标签:
CSS选择器有:
选择器分组:
h1,h2{ /*同时对h1,h2定义样式*/ ... }
通配符“*”:
*{ ... } /*用“*”对所有元素定义样式*/
类选择器+标签选择器:
<h class="cww" ...> <a class="cww" ...> a.cww{ ... }
多类选择器:
<p class="p1">...</p> <p class="p2">...</p> <p class="p1 p2">...</p> .p1{ ... } .p2{ ... } .p1.p2{ ... }
其中".p1.p2"会包含自身样式以及前面".p1"和".p2"的样式。
id选择器:
<p id="cww">...</p> #cww{ ... } /*用“#”定位*/
属性选择器:
<a href="http://www.cww.com">...</a> <a href="http://www.mochayo13.com">...</a> /*对属性href定义样式*/ [href]{ ... }
<p tltle="cw"></p> <p tltle="cww"></p> <p tltle="cww13"></p> [title~="cww"]{ ... } /*“~”可以理解为省略,即该样式只对title属性值包含“cww”字符串的部分元素作用*/
后代选择器:
<!DOCTYPE html>
<html>
<body>
<p>米娜桑,<b>这里是<i>陈玩玩</i></b>,早安QwQ</p>
</body>
<style>
p b i{
color: blue;
}
</style>
</html>
效果如下:
相比用class,id来实现,这样要快很多。
子元素选择器:
/*仍用上述的例子:*/ <!DOCTYPE html> <html> <body> <p>米娜桑,<b>这里是<i>陈玩玩</i></b>,早安QwQ</p> </body> <style> p>b>i{ color: blue; } </style> </html>
注意这里通过子元素定义的格式,用到符号“>”一层一层表示:
p>b>i{
color: blue;
}
相邻兄弟选择器:
标签:
原文地址:http://www.cnblogs.com/suzyc/p/4693625.html