Learning to develop hybrid app s requires learning some basics. This paper mainly introduces element selector, selector group and class selector
The most common selector is the element selector, and the document element is the most basic selector
For example: h1{} a {}
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>selector</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <p>Hello Dwyane!</p> </body> </html>
style.css
p{ color: green; }Selector group
<body> <h1>Title 1</h1> <h2>Title 2</h2> </body>
style.css
h1, h2{ color: green; }
result:
image.png In addition, there is a wildcard *, which usually sets the value of margin and padding in the wildcard
*{ margin: 0px; padding: 0px; }Class selector
1. Class selectors allow styles to be specified in a document element independent way
For example,. class {}
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>selector</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div>hello,Dwyane</div> </body> </html>
style.css
.div{ color: blue; }
result:
image.png 2. Combine element selectors: for example: a.class {}
index.html
<body> <div>hello,Dwyane</div> <a>hello,Dwyane</a> </body>
style.css
a.div{ color: blue; }
Only the div of a tag is specified to change, so the unspecified div will not change
result:
image.png 3. Multiclass selector
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>selector</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <p>this is my web page</p> <p>this is my web page</p> <p>this is my web page</p> </body> </html>
style.css
.p1{ color: blue; //p1 change color } .p2{ font-size: 30px; //p2 change font size } .p3{ font-style: italic; //p3 italics }
result:
image.png With multi class selectors, we can
index.html
<body> <p>this is my web page</p> <p>this is my web page</p> <p>this is my web page</p> //p1 p2 is separated by spaces, which inherits the characteristics of the first two class es </body>
style.css
.p1{ color: blue; //p1 change color } .p2{ font-size: 30px; //p2 change font size } .p1.p2{ font-style: italic; //p1 p2 italics }
The effect is the same as above