【CSS3】选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <h1 class="class1" class="class2">h1标题内容</h1><!--一个元素可以有多个类名称--> 10 <p class="class1">p段落内容</p> 11 <div id="div1" class="class1">div的内容</div> 12 </body> 13 </html>
1 p{color:green;}/*元素选择器样式优先级高于通用选择样式*/ 2 *{color: red}/*星号*为通用样式*/ 3 #div1{color: blue}/*id选择器样式高于通用选择器和元素选择器样式*/ 4 div{color: yellow} 5 .class1{color: pink}/*类选择器样式低于id选择器样式，高于元素选择器样式和通用选择器样式*/ 6 h1.class1{padding: 20px}/*指定类名称为某个特定元素的*/
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <form> 10 <input type="text" name="text1" style="padding: 10px 20px 30px"> 11 <input type="text" name="text2" style="padding: 15px 25px 35px"> 12 <input lang="en-us" type="tel"> 13 <input type="email" name="email" value="qq@qq.com"> 14 <input type="submit" name="submit" value="确认"> 15 </form> 16 </body> 17 </html>
1 /*input[name]{background: red}*/ 2 /*input[name][value]{background: green}*//*含指定属性的元素*/ 3 /*input[name="email"]{background: blue}*//*指定属性等于指定值的元素*/ 4 /*input[style~='25px']{background:green}*/ 5 /*input[lang|='en']{background: pink}*//*属性值以en开头，并后跟-的元素*/ 6 /*input[name^="e"]{background:red }*//*属性name值以e开头的元素*/ 7 /*input[name$="t"]{background: red}*//*指定属性值以特定字符串结尾的元素*/ 8 input[name*="a"]{background: red}/*指定属性值包含特定字符串的元素*/
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <ul> 10 <li>第一个li元素 11 <ol> 12 <li>后代选择器</li> 13 <li>后代选择器</li> 14 </ol> 15 </li> 16 </ul> 17 <div> 18 <h1>h1h1</h1> 19 <p>p标签</p> 20 <h2>h2标签</h2> 21 <h1>h1标签</h1> 22 </div> 23 <h1>第3个h1标签</h1> 24 </body> 25 </html>
1 /*ul li{background: red}*/ 2 /*ul>li{color: red;border:1px solid;}*//*颜色会被继承下去。边框不会被继承，只对子级有效，对孙级无效。*/ 3 /*div h1{color: red}*/ 4 /*p+h1{color: red}*//*紧贴在p之后的h1元素，如果p和h1之间有其他元素则无效*/ 5 p~h1{color: red}/*p之后的所有h1，p之前的h1无效，p之后的h1和p之间有其他元素不会干扰。超出同个父级标签范围之后的h1无效*/
伪元素选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <p> 10 万里长城永不倒<br> 11 千里黄河水涛涛 12 </p> 13 </body> 14 </html>
1 /*伪元素选择器*/ 2 p::first-letter{color: red;font-size: 60px} 3 p::first-line{background: red} 4 p::before{content: "前插入内容"} 5 p::after{content: "后插入内容"}/*不止插入文字，还可插入图片等*/ 6 p::selection{background: pink}
结构伪类选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <ul> 10 <li>第一个子元素</li> 11 <ol> 12 <li>第1个子元素</li> 13 <li>第2个子元素</li> 14 <li>第3个子元素</li> 15 </ol> 16 <li>第二个子元素</li> 17 <li>第三个子元素</li> 18 </ul> 19 <ul><li>仅有的一个无序列表</li></ul> 20 <ol><li>仅有的一个有序列表</li></ol> 21 <div> 22 <h1>父元素下同类型h1元素只有一个</h1> 23 <p>父元素下同类型p元素只有一个</p> 24 </div> 25 <div> 26 <p>父元素下同类型p元素只有一个</p> 27 </div> 28 <div> 29 <p>父元素下同类型p元素有两个。有子元素。 30 <h2>h2元素</h2> 31 </p> 32 <p>父元素下同类型p元素有两个</p> 33 </div> 34 <div></div> 35 </body> 36 </html>
1 /*伪类选择器*/ 2 /*结构伪类选择器*/ 3 /*:root{background: blue};*//*root指html标签*/ 4 /*li:first-child{color: red}*//*要满足两个条件：1.是li元素；2.是其父元素的第一个子元素*/ 5 /*ol>li:first-child{background: green} 6 ul>li:last-child{color:blue;}*/ 7 /*p:only-child{background: red}*//*要满足两个条件：1.是p元素；2.p元素的父元素内只有一个元素*/ 8 /*p:only-of-type{color: green}*//*要满足两个条件：1.是p元素；2.p元素的父元素内只有一个p元素*/ 9 /*li:first-of-type{color: red}*//*要满足两个条件：1.是li元素；2.li元素的父元素内是第一个li元素。即匹配同级同类型第一个元素*/ 10 /*li:last-of-type{color: red}*//*要满足两个条件：1.是li元素；2.li元素在父元素内是最后一个li元素。即匹配同级同类型最后一个元素*/ 11 /*li:nth-of-type(2){color: red}*//*要满足两个条件：1.是li元素；2.li元素的父元素内是同类型第2个li元素。即匹配同级同类型第2个元素*/ 12 /*li:nth-last-of-type(1){color: green}*//*要满足两个条件：1.是li元素；2.li元素的父元素内是同类型倒数第一个li元素。即匹配同级同类型倒数第1个元素*/ 13 /*li:nth-child(2){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第2个元素*/ 14 /*li:nth-last-child(1){color: green}*//*要满足两个条件：1.是li元素；2.li元素是父元素内倒数第1个元素*/ 15 /*li:nth-child(odd){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第奇数个元素*/ 16 /*li:nth-child(even){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第偶数个元素*/ 17 /*li:nth-child(3n){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第3n个元素。还可用3n+1等各种表达式*/ 18 div:empty{width: 300px;height: 200px;background: red}/*要绝对的空，连内容都不能有，空格都不能有*/
UI伪类选择器、其他伪类选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <a href="">链接</a> 10 <a href="">链接2</a> 11 <a href="#p1">链接到target</a> 12 <form> 13 <input type="text" name=""> 14 <input type="email" name=""> 15 <input type="tel" name="" lang="zh-CN"> 16 <input type="checkBox" name="" disabled="">复选框 17 <input type="radio" name="">单选按钮 18 </form> 19 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 20 <p lang="" id="p1">target链接过来的文本内容</p> 21 </body> 22 </html>
1 /*伪类选择器*/ 2 /*UI伪类选择器*/ 3 /*a:active{background: blue}*/ 4 /*a:hover{background: blue}*/ 5 /*a:link{color: pink;background: green}*//*未访问过的链接颜色设置要放在访问过的设置之前才有效*/ 6 /*a:visited{color: red}*/ 7 /*input:focus{background: pink}*/ 8 /*input:lang(zh-CN){background: pink}*/ 9 /*input:checked{ 20px;height: 20px}*/ 10 /*input:disabled{ 30px;height: 30px}*/ 11 /*input:enabled{ 30px;height: 30px}*/ 12 /*p:target{color: red}*//*p元素的内容在被链接过来时会使用的样式*/ 13 :not(a){color: red}
选择器优先级：
一般情况：行内样式>ID>类>元素；
范围更小，描述更精准的优先级高；
后设置的优先级高。