css中常用的选择器

小鱼儿 2022-01-15 21:11 231阅读 0赞

首先我们要了解一个概念，就是什么是选择器，以及选择器的作用？

css的作用是修饰html标签，美化页面的。既然要修饰html标签 ，那首先就要选择到要被修饰的标签，如何进行选择，那么就要使用选择器。选择器其实就是一种匹配模式，主要用于选择中要被修饰的标签。今天给大家介绍css中一些常用的选择器。

*  **标签选择器**

标签选择器又称为类型选择器，作用就是修饰指定的标签。

语法：

标签名\{

属性1:属性值1

......

比如：

p\{

background-color:orange;

这个选择器的作用就是把页面上所有的p标签的背景色设置为orange;

![20190613155442820.png][]

**二id选择器**

id选择器用于选择指定id属性值的标签

语法:

\#id属性值\{

比如:

\#box\{

background-color:orange;

这个选择器将选择中带有id属性，且值为box的标签。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70][]

在html中要求一个页面中的id属性的值必须要唯一，所以id选择器能选择中一个标签,

id选择器是以\#开头的。

**三 class选择器**

class选择器又称为类选择器.

语法:

.class属性名\{

属性1:属性值1;

......

比如:

.box\{

background-color:orange;

这个选择器可以修饰带有class属性，且值是box的标签。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 1][]

class选择器可以修饰一个或者多个标签。

**四 交集选择器**

交集选择器语法:

第一种语法:

标签名.类名\{

属性1:属性值1;

......

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 2][]

第二种语法:

标签名\#id属性值\{

属性1:属性值1;

......

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 3][]

这种写法了解即可。

**五 分组选择器**

语法:

选择器1,选择器2,选择器3......\{

属性1:属性值1;

......

比如:

div,.box,h2\{

background-color:orange;

这个选择器将会选择中所有的div标签，以及类名为box的标签和h2标签。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 4][]

这种选择器适合用于当多个选择器有相同的样式时，可以把相同的样式写在一起，这样可以实现代码的重用。需要注意的是选择器之间使用的是逗号进行分隔。

**六 后代选择器**

语法：

选择器1  选择器2\{

属性1:属性值1;

......

选择器1  选择器2  选择器3\{

属性1:属性值1;

......

比如:

div  p\{

background-color:orange;

这个选择器将选择中div 标签中的所有的后代p标签。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 5][]

div p span\{

background-color:blue;

这个选择器将选择中div标签中的所有的后代p标签中的所有的span标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 6][]

需要注意的是后代选择器选择的是具有层次关系的标签，选择器之间使用至少一个空格进行分格。

**七 子元素选择器**

也可以称为儿子选择器。顾名思义这种选择器只选择儿子元素。

语法:

选择器1 > 选择器2 \{  属性名1:属性值1;......\}

选择器1 > 选择器2 >选择器3\{  属性名1:属性值1;......\}

比如:

.box >p\{  bakcground-color:orange;\}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 7][]

需要注意的是选择器之间使用大于符号进行分隔，大于符号两边的空格不是必须的。

**八通用选择器**

语法:

\*\{ 属性名1:属性值1;......\}

比如:

\*\{

margin:0px;

padding:0px;

这个选择器的作用是清除所有标签的margin和padding。

![20190613155919204.png][]

通用选择器一般用于初学练习时用来清除标签默认的margin和padding.

总结：今天一共给大家介绍了8种选择器，这些选择器在写项目的过程中可以灵活使用，项目中使用最多的就是后代选择器。当然选择器远远不止这些，有兴趣的同学可以参考文档：

http://www.w3school.com.cn/cssref/css\_selectors.asp

[20190613155442820.png]: /images/20220115/22c9ee37a999466fbab305d7058255f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70]: /images/20220115/7ffa4b690f034d2bba0d7f86e0dcc95b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 1]: /images/20220115/cca40197ed82411896f55ccc769c34c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 2]: /images/20220115/bdab1c75b1d444c4b921aebc2a639aa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 3]: /images/20220115/3bae7c54867a48e98fe1650a3ee1f3b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 4]: /images/20220115/5383082b4e7a429f874de44a94cae7ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 5]: /images/20220115/e1a4f2ddd4bc4631b94e9de0963763f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 6]: /images/20220115/bd0d320fbade40ec80bdb02a23d707cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 7]: /images/20220115/cc85732dd14e41b199f5e532eeec6043.png
[20190613155919204.png]: /images/20220115/95e9e5e821154356a8e84f54ea584475.png