简介
本文主要介绍元素选择器,id选择器,class选择器,派生选择器和属性选择器
这五种情况。
元素选择器
CSS中直接指定元素的样式。
CSS h1{...} h2{...} p{...}
可以使用通配选择器*{…},它会作为没有特别指定的元素的默认样式。
id选择器
html中指定元素id为xxx,CSS中使用#xxx{…}设置样式。
html <p id="red">这个段落是红色。</p> CSS #red {color:red;}
值得注意的是,每个id 属性只能在一个 HTML 文档中出现一次。即一个id只能给一个标签使用,不能同时赋给多个标签。
class选择器
html中指定元素class为xxx,CSS中使用 .xxx{…}设置样式。
html <div class="divclass"></div> CSS .divclass { color: #f60; background: #567; }
结合元素选择器 :可以使用 a.xxx{…}指定只适用于a元素的class选择器。
多类选择器 :在html指定class=”a b”,a和b用空格隔开,它会同时继承a和b的样式。在此基础上,还可以在CSS中使用.a.b{…}使得同时继承a和b样式的元素还拥有自己特殊的样式。
NOTICE
因为id在页面只能使用一次,所以提倡少用id,否则可能和页面嵌的程序冲突(比如名称相同等)。
class名字不要使用数字开头。
建议单一使用的样式和需要程序、js动态控制的样式用id。
建议重复使用的元素、类别,用class。
派生选择器
又叫做上下文选择器,根据上下文关系来定义样式。它可以与id选择器和class选择器组合使用。在CSS中使用空格分隔名称。
html <p class="pclass">显示段落默认的蓝色<a href="...">显示派生选择器指定的红色</a></p> <a class="aclass" href="...">显示链接默认的绿色</a> CSS .pclass{color:blue} .pclass a{color:red} .aclass{color:green}
属性选择器
在html中指定属性的样式。
<head> <style type="text/css" > [title]{ color:blue } [title=override]{color:red} </style> </head> <body> <p title="default">使用属性选择器指定的蓝色</p> <p title="override">使用了选择器指名的名称,优先显示红色</p> </body>
最后附上GitHub:<https://github.com/gonearewe>