CSS选择器详解

最新推荐文章于 2025-07-08 19:03:53 发布

Andrelia20171760

最新推荐文章于 2025-07-08 19:03:53 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

分类专栏： # css 文章标签： css

本文链接：https://blog.youkuaiyun.com/Andrelia20171760/article/details/85726570

css 专栏收录该内容

19 篇文章

订阅专栏

当我们用CSS对HTML部分代码进行修饰时，首先要在CSS文件里找到想要修饰的那部分HTML代码，此时，我们就要用到选择器。

1.id选择器

id选择器与标签之间是一对一关系。在现实生活中，如果我们想要找到一个人，可以通过身份证号，一个人对应一个身份证号，一个身份证号对应一个人，身份证号具有唯一性。而id选择器就相当于标签的身份证号。在HTML文档中，一个id只能使用一次！

语法：

<div id="only">123</div>

#only{
	background-color: yellow;
}

2.类选择器

我们找一个人时还可以通过某人的属性来找他，例如，他今天穿的衣服，人与衣服的关系是多对多的，一个人可以穿多件衣服，而同样款式的衣服可以被不同的人穿。类选择器也是如此。

a.不同元素使用同一类名

<p class="lei1">234</p>
	<div class="lei1">345</div>

.lei1{
	background-color: green;
}

b.同一元素使用一个以上的类名

<p class="lei1 lei2">546547646</p>

.lei1{
	background-color: green;
}
.lei2{
	font-size: 45px;
}

3.标签选择器（元素选择器）

所有的该标签都会产生设置的样式，无论在哪里，无论被套在哪些标签里。比较简单直接。

<div id="only">123</div>
	<div class="lei1">345</div>
	<div>23412rf3214</div>

div{
	color: red;
}

4.通配符选择器（全局选择器）

* 代表所有的标签，只要是标签都会被选中。

5.属性选择器 css2引入

先看例子:


	<div id="only" class="demo">123</div>
	<p id="only2">234</p>
	<div id="only3">345</div>

id为属性，only为属性值。

[id]{
	background-color: red;
}
[id="only"]{
	background-color: green;
}

【id】选中只要有id这个属性的所有标签

【id=" only"】选中有id属性且属性名为only的标签

以上选择器中1,2,3,5为最基本的选择器。还有一些其他选择器如1后代选择器，2子代选择器，3相邻兄弟元素选择器，4通用兄弟元素选择器。还有1伪类选择器，2伪元素选择器。

选择器的优先级

！important>行间样式>id>class=属性>标签>通配符

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

1.后代选择器

后代选择器用于选取某元素的后代元素。

<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

运行结果如图所示，只要是div中的子元素p均被选中。

2.子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

div>p
{
	background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>//选中
</div>

<div>
<span><p>I will not be styled.</p></span>//不选中
</div>

<p>My best friend is Mickey.</p>
</body>

如图所示，只有在div中的p被选中了，这个p是div的直接后代，p嵌套在span中,span嵌套在div中，这个p是div的间接后代不能被选中。

3.相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

div+p
{
	background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>//选中

<p>I will not be styled.</p>

</body>

紧挨着div的p被选中，但是包含在div中的p不能被选中。

4.后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。后续好理解只要在该元素之后的指定元素都可以被选中，不仅仅是相邻的。

div~p
{
	background-color:yellow;
}
</style>
</head>
<body>
	
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
	<span>afsdfsafafafs</span>
	<p>在div,span后的p</p>

</body>