css有哪些常见选择器?

要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

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其它相关文章!

推荐阅读