css选择器

最新推荐文章于 2022-03-19 20:38:04 发布

陈小栋

最新推荐文章于 2022-03-19 20:38:04 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/github_38535279/article/details/73415389

css 专栏收录该内容

8 篇文章

订阅专栏

在CSS入门阶段，我们大概就会接触到以下四种选择器：

id选择器
class选择器
元素选择器
群组选择器

这些都是CSS最基本的选择器，这里我们来讲一下CSS2.1中的层次选择器。

层次选择器有以下几种：

M N 后代选择器选择M元素内部后代N元素（所有N元素）
M>N 子代选择器选择M元素内部子代N元素（所有第1级N元素）
M~N 兄弟选择器选择M元素后所有的同级N元素
M+N 相邻选择器选择M元素相邻的下“一”个元素（M,N是同级元素）

1.后代选择器

后代选择器是选择元素内部中所有的某一个元素，包括子元素和其他后代元素。

举例：

<!doctype html>
<html lang="CN">
	<head>
		<meta charset="utf-8">
		<title>this is a templete</title>
		<style type="text/css">
			#first p{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="first">
			<p>of course I still love you</p>
			<p>of course I still love you</p>
			<div id="second">
				<p>of course I still love you</p>
				<p>of course I still love you</p>
			</div>
			<p>of course I still love you</p>
			<p>of course I still love you</p>
		</div>
	</body>
</html>

浏览器预览效果

分析：#first p 表示选取id为first的元素内部的所有p元素，因此不管是子元素还是其他元素后代元素都会被选中。

2.子代选择器

子代选择器就是选中元素内部的某一个子元素，子代选择器跟后代选择器很相似，但是却有着明显的区别，区别如下：

(1)后代选择器，选取的是元素内部所有的元素（包括子元素）。

(2)子代选择器，选取的是元素内部某一个子元素（只限于子元素）。

举例：

<!doctype html>
<html lang="CN">
	<head>
		<meta charset="utf-8">
		<title>this is a templete</title>
		<style type="text/css">
			#first>p{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="first">
			<p>of course I still love you</p>
			<p>of course I still love you</p>
			<div id="second">
				<p>of course I still love you</p>
				<p>of course I still love you</p>
			</div>
			<p>of course I still love you</p>
			<p>of course I still love you</p>
		</div>
	</body>
</html>

浏览器预览效果如下：

#first>p 表示选中id为first的元素下的子元素p,与后代选择器相比，我们很清楚的知道，子代选择器只选取子元素，不包括其他元素。

3.兄弟选择器

兄弟选择器，选择的是元素后面的（不包括前面）某一类兄弟元素。

举例：

<!doctype html>
<html lang="CN">
	<head>
		<meta charset="utf-8">
		<title>this is a templete</title>
		<style type="text/css">
			#second~p{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="first">
			<p>of course I still love you</p>
			<p>of course I still love you</p>
			<div id="second">
				<p>of course I still love you</p>
				<p>of course I still love you</p>
			</div>
			<p>of course I still love you</p>
			<p>of course I still love you</p>
		</div>
	</body>
</html>

浏览器预览效果：

#second~p 表示选取id为second的元素后面的所有兄弟元素p，记住，兄弟选择器只选取后面的所有兄弟元素，不包括前面的所有兄弟元素。

4.相邻选择器

相邻选择器，选择元素后面（不包括前面）的某一个“相邻”的兄弟元素，相邻选择器跟兄弟选择器也非常相似，不过也有明显的区别。

(1)兄弟选择器选取元素后面“所有”的某一类元素。

(2)相邻选择器选取元素后面“相邻”的某一个元素。

举例：

<!doctype html>
<html lang="CN">
	<head>
		<meta charset="utf-8">
		<title>this is a templete</title>
		<style type="text/css">
			#second+p{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="first">
			<p>of course I still love you</p>
			<p>of course I still love you</p>
			<div id="second">
				<p>of course I still love you</p>
				<p>of course I still love you</p>
			</div>
			<p>of course I still love you</p>
			<p>of course I still love you</p>
		</div>
	</body>
</html>

浏览器预览效果如下：

#second+p 表示选中id为second的元素后面的“相邻”的兄弟元素p。

关于相邻选择器的一个重要技巧

代码如下：

<!doctype html>
<html lang="CN">
	<head>
		<meta charset="utf-8">
		<title>this is a templete</title>
		<style type="text/css">
			ul{list-style-type:none;}
			li+li{border-left:2px solid red;}
			li{float:left;padding:0 5px;}
		</style>
	</head>
	<body>
		<ul>
			<li>关于我们</li>
			<li>联系我们</li>
			<li>版权声明</li>
			<li>免责声明</li>
			<li>广告服务</li>
			<li>意见反馈</li>
		</ul>
	</body>
</html>

浏览器预览效果如下：

li+li 是相邻选择器，表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素，所以对于最后一个li元素，它是没有下一个li元素可以选取的。li+li{border-left:2px solid red;}达到在两个li元素中间添加一个边框的效果。这是一个非常棒的技巧，一定要重点掌握。