关系选择器

最新推荐文章于 2024-10-09 23:09:28 发布

无区新手

最新推荐文章于 2024-10-09 23:09:28 发布

阅读量1.6k

点赞数 2

分类专栏： HTML+CSS

HTML+CSS 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

1.子代选择器（>）

子代选择器主要用于选择某个元素的第一级子元素。例如希望选择只作为h1元素子元素的strong元素，可以这样写：h1>strong。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子代选择器的应用</title>
<style type="text/css">
h1>strong{
	color:red;
	font-size:20px;
	font-family:"微软雅黑";	
}
</style>
</head>
<body>
<h1>这个<strong>知识点</strong>很<strong>重要</strong></h1>
<h1>一定要学<em><strong>好</strong></em>！</h1>
</body>
</html>

第一个h1标签中的<strong>是h1的子元素，第二个h1标签中的<strong>是h1的孙元素，所以只有第一个h1标签应用了样式。

2.兄弟选择器（+、~）

兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。分为临近兄弟选择器和普通兄弟选择器两种。

<1>临近兄弟选择器

该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>临近兄弟选择器的应用</title>
<style type="text/css">
p+h2{
	color:green;
	font-family:"宋体";
	font-size:20px;	
}
</style>
</head>
<body>
<h2>《次北固山下》</h2>
<p>客路青山外，行舟绿水前。</p>
<h2>潮平两岸阔，风正一帆悬。</h2>
<h2>海日生残夜，江春入旧年。</h2>
<h2>乡书何处达？归雁洛阳边。</h2>
</body>
</html>

只有紧跟p元素的h2元素应用了代码中设定的样式。

2.普通兄弟选择器

普通兄弟选择器使用“~”来链接前后两个选择权。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>普通兄弟选择器</title>
<style type="text/css">
p~h2{
	color:pink;
	font-family:"微软雅黑";
	font-size:20px;
}
</style>
</head>
<body>
<p>海上生明月，天涯共此时。<p>
<h2>情人怨遥夜，竟夕起相思。</h2>
<h2>灭烛怜光满，披衣觉露滋。</h2>
<h2>不堪盈手赠，还寝梦佳期。</h2>
</body>
</html>