css常用选择器:
1、标签选择器
写法: HTML标签名{}
作用:选中页面中所有与选择器同名的HTML标签。
示例:
li{ /*color: red;*/ }
2、类选择器(class选择器)
写法: .class名{}
调用: 在需要应用这套样式的标签上,使用class="class名"调用选择器。
优先级: class选择器>标签选择器
示例:
.ji{ /*color: blue;*/ }
3、ID选择器:
写法: #ID名{}
调用: 在需要应用这套样式的标签上,使用id="ID名"调用选择器。
优先级: ID选择器>class选择器
示例:
#two{ /*color: yellow;*/ }
class选择器和ID选择的区别:
写法不同:class选择器用.声明,ID选择器用#声明;
优先级不同:ID选择器>class选择器
调用次数不同: class选择器可以调用多次; ID选择器只能调用一次(同一页面,不能出现同名ID)。
4、通用选择器
写法: *{}
作用: 作用于页面中所有的HTML标签;
优先级: 最低!低于标签选择器。
示例:
*{ background-color: yellow; color: pink; }
5、并集选择器
写法: 选择器1,选择器2,……选择器n{} 多个选择器之间逗号分隔。
生效规则: 多个选择器取并集,只要标签满足其中任何一个选择器,样式即可生效 (其实相当于多个选择器拆开写)
示例:
li,.ji{ color: red; }
6、交集选择器
写法: 选择器1选择器2……选择器n{} 多个选择器之间紧挨着,没有分隔
生效规则: 多个选择器取交集,必须满足所有选择器的要求,样式才能生效。
示例
li.ji{ color: red; }
7、后代选择器
写法: 选择器1 选择器2 …… 选择器n{}
生效规则: 只要满足后一个选择器是前一个选择器的后代,样式即可生效(后代包括子代、孙代。。。)
示例:
div .ji{ color: red; }
8、子代选择器
写法: 选择器1>选择器2>……>选择器n{}
生效规则: 必须满足后一个选择器是前一个选择器的直接子代,样式才能生效。(两个选择之间不能有任何其他标签)
示例:
div>ul>.ji{ color: red; }
以上就是css有哪些常见选择器?的详细内容,更多请关注易知道|edz.cc其它相关文章!