首页 > 代码库 > css选择器

css选择器

要实现对html元素的渲染就必须针对不同元素定义不同的样式,定义的前一步就是先选中那个要定义的元素,也就是选择。这里的选择器分为基本选择器和复合选择器,复合就是基本的组合。

选择器 {属性名:属性值;...}

 

基本选择器

有标记选择器,类别选择器,id选择器3种。

标记选择器其实是html标签名作为选择器,html有多少标签就有多少标记选择器。该种选择器会选中所有复合的标签,比如:

p{color:red;}

所有p的字体颜色均为红色。假如想有的p为红色有的为蓝色,怎么办?那么这时候就不灵活了,需要一种能够更细化的选择器,更具意愿随意渲染人一个元素。类别选择器登场了。

.redp{color:red;}.bluep{color:blue;}

类名可以自定义。

当要给全体p设置公用属性的时候就需要标记选择器和类别选择器结合使用:

p{font-size:12px;}    //公共的字体大小.redp{color:red;}     //有的红色字.bluep{color:blue;}   //有的蓝色字

每个元素可任意定义class属性值。

更具体一点的场景就是选择一个元素进行突出渲染,使用id选择器即可达到目的。

#id{color:black;}   //注意id的唯一性

 

复合选择器

复合选择器由2个及以上的基本选择器,通过不同方式连接而成。

交集选择器:

p.redp{}

并集选择器:

p,.redp,div{}

全集:

*{}

后代选择器:

div p{}  //选中div内的p

注:代后选择器可大大节省代码及class和id的定义,一般为html最外层页面元素定义class或id然后通过后代选择器选择并渲染,无法利用此规则的才对局部元素新定义class或id这样的页面比较简洁。

以上后代选择器会选择所有内部元素,而有另一种只选择直系第一代子元素的选择器:

p>span{} //只选择p的直接后代span隔代的任何元素都不行 ie6不支持

 

css选择器