CSS选择器有哪几种？你都了解吗

CSS提供了许多选择器来实现精确地定位标签元素，主要有以下几种：标签选择器通过html标签名来选择元素，写法为标签名{属性:属性值;}，比如： class选择器通过class名来选择...

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

标签选择器

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

class选择器

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

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

id选择器

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

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

后代选择器

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

子选择器

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

两个选择器名都是标签。

两个选择器名含有class名。

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

所有后代选择器

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

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

兄弟选择器

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

毗邻兄弟选择器

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

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

所有兄弟选择器

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

交集选择器

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

通配符

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

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

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

0 条评论