css常用选择器

标签：不能   back   区别   组合   开头   命名   语义   规则   优先级   

【CSS常用选择器】

标签选择器
写法： HTML标签名{}
作用： 可以选中页面中，所有与选择器同名的HTML标签。

li{
color: red;
font-size: 24px;
}

类选择器(class选择器)
写法： .class名{}
调用： 在需要调用选择器样式的标签上，使用class="class名"调用选择器
优先级： >标签选择器

.first{
color: blue;
}


ID 选择器
写法： #ID名{}
调用： 需要调用样式的标签，起一个id="ID名"
优先级： ID选择器>class选择器
注意： 一个页面中，不能出现同名ID

#one{
background-color: yellow;
color: green;
}

【Class选择器与ID选择器的区别】
1、 写法不同:class选择器用.声明，ID选择器用#声明；
2、 优先级不同： ID选择器>class选择器
3、 作用范围不同： class选择器可以多次调用，ID选择器只能使用一次。


【选择器的命名规范】
1、只能有字母、数字、下划线、减号组成；
2、 开头不能是数字。也不能是只有一个减号。

一般，起名要求有语义，使用英文单词与数字的组合。



通用选择器
写法： *{}
作用： 可以选中页面中所有的HTML标签。
优先级： 最低！！！

*{
color: orange;
}


并集选择器
写法： 选择器1,选择器2,……,选择器n{}
生效规则： 多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。

li,.first{
color: red;
}

交集选择器
写法： 选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔
生效规则： 多个选择器取交集，则必须满足所有选择器的要求，才能生效

li.first{
color: red;
}

后代选择器
写法： 选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔
生效规则： 只要满足，后一选择器是前一个选择器的后代，即可成效。（后代包括子代、孙代、重孙代。。。）

通俗的讲：只要后一个选择器，在前一个选择器里面即可。

div span{
}

子代选择器
写法： 选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
生效规则： 必须满足，后一个选择器是前一个选择器的直接子代，才能生效。（中间不能间隔任何标签）

div>span{
color: orangered;
}

css常用选择器

标签：不能   back   区别   组合   开头   命名   语义   规则   优先级   

原文地址：http://www.cnblogs.com/sunlizheng/p/7259000.html