CSS基础之组合选择器

最新推荐文章于 2022-11-20 10:55:42 发布

万万君

最新推荐文章于 2022-11-20 10:55:42 发布

阅读量280

点赞数 1

分类专栏：笔记 HTML CSS 文章标签： css

本文链接：https://blog.csdn.net/devin_xin/article/details/105116224

版权

笔记同时被 3 个专栏收录

80 篇文章 0 订阅

订阅专栏

HTML

35 篇文章 0 订阅

订阅专栏

CSS

24 篇文章 0 订阅

订阅专栏

CSS 组合选择器

CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。
CSS3 中包含了以下四种组合选择器：

后代选择器（以空格分隔）
子元素选择器（以**>**号分隔）
相邻兄弟选择器（以**+**分隔）
普通相邻兄弟选择器（以**~**分隔）

后代选择器

后代选取器匹配所有指定元素的后代元素。

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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>

</body>
</html>

子元素选择器

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

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Devin</h2>
<p>I live in Xi'an.</p>
</div>

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

<p>My best friend is Peter.</p>
</body>
</html>

相邻兄弟选择器

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

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div+p
{
	background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<h2>My name is Devin</h2>
<p>I live in Xi'an.</p>
</div>

<p>My best friend is Peter.</p>

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

</body>
</html>

普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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>

</body>
</html>