选择器
1、选择器分组
可以将任意多个选择器分组在一起，规则如下：
h1,h2,h3,p,div{color:red;}
1 <style> 2 h1,p,em{ 3 color:red; 4 } 5 </style> 6 </head> 7 <body> 8 <h1>这里是H1标题</h1> 9 <p>我们的<em>祖国是很伟大的。</em>非常漂亮！</p> 10 </body>
2、通配选择器
在CSS2中引入的新选择器，显示为一个星号，这个选择器可以与任何元素匹配，就像是一个通配符。
1 <style> 2 *{ 3 color:red; 4 } 5 </style> 6 </head> 7 <body> 8 <h1>这里是H1标题</h1> 9 <p>我们的<em>祖国是很伟大的。</em>非常漂亮！</p> 10 </body> 11 </html>
3、类选择器
html中使用class设置类名，css中使用点号来设置效果
1 <style> 2 .q1{ 3 color:red; 4 } 5 </style> 6 </head> 7 <body> 8 <h1>这里是H1标题</h1> 9 <p class="q1">我们的<em>祖国是很伟大的。</em>非常漂亮！</p> 10 </body> 11 </html>
4、多类选择器
A、优先选择完全满足多类类名的选择器的设置
1 <style> 2 .q1{ 3 color:red; 4 } 5 .q2{ 6 color:red; 7 } 8 .q3{ 9 color:yellow; 10 } 11 .q1.q2{ 12 color:green; 13 } 14 .q1.q2.q3{ 15 color:blue; 16 } 17 </style> 18 </head> 19 <body> 20 <p class="q1 q2 q3">优先选择完全满足类名的选择器</p> 21 </body> 22 </html>
B、如果不能完全匹配，则减少一个进行组合，组合之后的按照越后优先级越高的原则
1 <style> 2 .q1{ 3 color:red; 4 } 5 .q2{ 6 color:red; 7 } 8 .q3{ 9 color:yellow; 10 } 11 .q2.q3{ 12 color:blue; 13 } 14 .q1.q2{ 15 color:green; 16 } 17 </style> 18 </head> 19 <body> 20 <p class="q1 q2 q3">优先选择完全满足类名的选择器</p> 21 </body>
5、简单属性选择器
可以使用标签加标签属性的方式来组合成新的选择器。格式为 标签[属性名]
1 <style type="text/css"> 2 p[class]{ 3 color:red; 4 } 5 </style> 6 </head> 7 <body> 8 <img class="a1" src="123456.png" /> 9 <p class="q1">何谓勇，勇者，无畏也。勇者是什么能</p> 10 <p>何谓勇，勇者，无畏也。勇者是什么能</p> 11 </body>
也可以多属性组合
1 <style type="text/css"> 2 a[href][class]{ 3 color:red; 4 } 5 </style> 6 </head> 7 <body> 8 <img class="a1" src="123456.png" /><br> 9 <a href="http://www.baidu.com" class="q1">q1何谓勇，勇者，无畏也。勇者是什么能</a><br> 10 <a href="http://www.hao123.com">q2何谓勇，勇者，无畏也。勇者是什么能</a> 11 </body>
6、具体属性选择器
在5的基础上，可以指定标签加某个标签对应的属性的特定的属性值进行组合成为新的选择器。格式为 标签[属性名=xxx]
1 <style type="text/css"> 2 p[class="q2"]{ 3 color:red; 4 } 5 </style> 6 </head> 7 <body> 8 <img class="a1" src="123456.png" /> 9 <p class="q1">q1何谓勇，勇者，无畏也。勇者是什么能</p> 10 <p class="q2">q2何谓勇，勇者，无畏也。勇者是什么能</p> 11 </body>
1 <style type="text/css"> 2 a[href="http://www.hao123.com"][class]{ 3 color:red; 4 } 5 </style> 6 </head> 7 <body> 8 <img class="a1" src="123456.png" /><br> 9 <a href="http://www.baidu.com" class="q1">q1何谓勇，勇者，无畏也。勇者是什么能</a><br> 10 <a href="http://www.hao123.com" class="q1">q2何谓勇，勇者，无畏也。勇者是什么能</a> 11 </body>
7、模糊属性选择器
有多个属性值，只取值中的一个精确值来进行匹配。
1 <style type="text/css"> 2 a[class~="q1"]{ 3 color:red; 4 } 5 </style> 6 </head> 7 <body> 8 <a href="http://www.baidu.com" class="q1 q11 q12">q1何谓勇，勇者，无畏也。勇者是什么能</a> 9 </body>
a[class~="q1"] 等价于：a.q1
取值的开头部分来进行匹配：a[class^="q"]
1 <style type="text/css"> 2 a[class^="q"]{ 3 color:red; 4 } 5 </style> 6 </head> 7 <body> 8 <a href="http://www.baidu.com" class="q1 q11 q12">q1何谓勇，勇者，无畏也。勇者是什么能</a><br> 9 <a href="http://www.hao123.com" class="q2 q21 q22">q1何谓勇，勇者，无畏也。勇者是什么能</a> 10 </body>
取值的结尾部分来进行匹配：a[class$="22"]
1 <style type="text/css"> 2 a[class$="22"]{ 3 color:red; 4 } 5 <a href="http://www.baidu.com" class="q1 q11 q12">q1何谓勇，勇者，无畏也。勇者是什么能</a><br> 6 <a href="http://www.hao123.com" class="q2 q21 q22">q1何谓勇，勇者，无畏也。勇者是什么能</a>
取值的部分内容来进行匹配：a[class*="22"]
1 a[class*="2"]{ 2 color:red; 3 } 4 <a href="http://www.baidu.com" class="q1 q11 q12">q1何谓勇，勇者，无畏也。勇者是什么能</a><br> 5 <a href="http://www.hao123.com" class="q2 q21 q22">q1何谓勇，勇者，无畏也。勇者是什么能</a>
取值的开始部分的内容来进行匹配，等于该值或以该值开始的进行匹配：a[class|="22"]
