css选择器

标签：style   blog   color   使用   sp   strong   div   on   log   

要实现对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选择器

标签：style   blog   color   使用   sp   strong   div   on   log   

原文地址：http://www.cnblogs.com/thingk/p/4106560.html