css提供了许多选择器来实现精确地定位标签元素，主要有以下几种：

标签选择器

通过html标签名来选择元素，写法为标签名{属性:属性值;}，比如：

div{
color: red;             /* 标签选择器，选择所有的div标签，给予color: red;的样式。*/
}
p{
font-size: 20px;       /* 标签选择器，选择所有的p签，给予font-size:20px;的样式。*/
}

class选择器

通过class名来选择元素，写法为**.class名{属性:属性值;}**,比如：

.box{
color:red;      /*class选择器，选择所有class名为“box”的元素,给予color: red;的样式。*/
}

<div class="box"></div>   <!-- div的class名为“box”，因此应用上面的样式。-->
<p class="box"></p>   <!-- p的class名为“box”，因此应用上面的样式。-->

可以看出，div标签和p标签的class名都为“box”，因此他们都应用该样式，因为多个标签可以有相同的class名，所以class选择器应用最为广泛。

id选择器

通过id名来选择元素，写法为**#id名{属性:属性值;}**,比如：

#box{
color:red;    /*id选择器，选择id名为“box”的元素，给予color: red;的样式。 */
}

<p id="box"></p>  <!-- p的id名为“box”，因此应用上面的样式-->

需要注意的是，标签的id具有唯一性，多个标签的id不能相同，因此id选择器使用较少，一般用在内容十分重要或者特殊的地方。

后代选择器

后代选择器是指选定某个标签的某种后代元素然后给予样式。后代选择器有两种：

子选择器

选定某个标签的某个子元素给予样式，如果不是子元素比如孙子元素重孙子元素等等则不给予样式。写法为 选择器名>选择器名{属性:属性值;},这里的选择器名可以是标签选择器，id选择器，class选择器，可自己设计。

两个选择器名都是标签：

div>p{
color:red;    /* 选择div标签里的为p标签的子元素，给予color: red;的样式。*/
}

<div>
<p>我会应用样式</p>                <!--该p标签为div的子元素，会应用样式-->
<div>
<p>我不会应用样式</p>     <!--该p标签为div的孙子元素，不会应用样式-->
</div>
</div>

两个选择器名含有class名：

.box>p{
 color:red;    /* 选择class名为“box”的标签里的为p标签的子元素，给予color: red;的样式。*/
}

<div class="box">
<p>我会应用样式</p>                <!--该p标签为div的子元素，会应用样式-->
 <div>
  <p>我不会应用样式</p>     <!--该p标签为div的孙子元素，不会应用样式-->
 </div>
</div>
<div class="domo">
<p>我不会应用样式</p> <!--该div的class名不为“box”，不会应用样式 -->
</div>

同理，选择器名可以为id名标签名，甚至id名class名，当然要看实际需要我们设计什么样的。

所有后代选择器

选定某个标签的某种所有后代元素，给予样式，写法为 选择器名 选择器名{属性:属性值;}，两个选择器名中间用空格隔开。同子选择器，两个选择器名可以是标签，id名，class名。

下面就举两个标签名的例子：

div p{
color:red;  /*选择div标签里所有的p标签，给予color: red;的样式。*/
}

<div>
<p>我会应用样式</p> <!-- 该p标签为子元素，应用样式。-->
<ul><!-- 无序列表。-->
<li><p>我会应用样式</p></li>  <!-- 该p标签为孙子元素，应用样式。-->
</ul>	
</div>

其他的组合大家可以自行探索，但需要注意id名具有唯一性，class名没有唯一性。

兄弟选择器

选择某一个标签的兄弟标签来给予样式，并且只能选择出现在该标签之后的兄弟元素，之前的不行。也分为两种：

毗邻兄弟选择器

只选择某个标签的相邻的一个兄弟标签给予样式，也就是说它只会选择一个标签，写法为：选择器名+选择器名{属性:属性值;},这里的选择器名也可以为标签名，id名，class名。

两个标签名：

div+p{
color:red;   /* 选择div的下一个为p标签的兄弟元素，给予color: red;的样式。*/
}

<div></div>
<p>我会应用样式</p>   <!--该p是div后的第一个兄弟元素，应用样式。-->
<p>我不会应用样式</p>   <!--该p是div后的第二个兄弟元素，不应用样式。-->
<div> </div>
<span>我不会应用样式</span>   <!--该span是div后的第一个兄弟元素，但不是p，不应用样式。-->
<p>我不会应用样式</p>   <!--该p是div后的第二个兄弟元素，不应用样式。-->
`

其他的组合同理，毗邻选择器强调的是相邻，一个。

2 所有兄弟选择器

选择某个标签的所有兄弟元素，给予样式，写法为 选择器名~选择器名{属性:属性值;},这里的选择器名也可以为标签名，id名，class名。

也只举两个标签名的例子：

div~p{
color:red; /*选择div标签之后的所有为p的兄弟标签，给予color: red;的样式。*/
}

<div></div>
<p>我会应用样式</p>   <!-- 该p标签是div兄弟元素，应用样式-->
<p>我会应用样式</p>   <!-- 该p标签是div兄弟元素，应用样式-->

交集选择器

如果多个类型的标签有相同的class名，可以通过 **标签名.class名{属性:属性值;}**来选择，注意标签名和.class名之间紧挨不能加空格。

p.domo{
color:red; /*选择class名为“demo”的p标签，给予color: red;的样式。*/
}

<div class="demo">不会应用样式</div> 
<span class="demo">不会应用样式</span>     <!--这三个class名相同，但只有p标签会应用样式-->
<p class="demo">会应用样式</p>

通配符

通配符会选择文档里的所有标签给予样式，写法 *{属性:属性值;}.

*{
margin:0;   /* 所有的标签都会应用该样式*/
}

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。