CSS相邻选择符

最新推荐文章于 2024-02-19 11:00:44 发布

judyge

最新推荐文章于 2024-02-19 11:00:44 发布

阅读量1.6k

点赞数

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章 5 订阅

订阅专栏

CSS相邻选择符

CSS相邻选择符也称为同胞选择器，用于定义同一个父级元素下，紧紧相邻的两个标签元素中的第二个元素的样式。

所谓相邻选择符，类似于下面的格式：

<body>
<p>p元素</p>
<strong>strong元素</strong>
</body>

p与strong就是相邻的两个标签元素，它们都在父级元素body元素的下面。在CSS中，相邻选择符定义的就是strong元素。

CSS相邻选择符的定义

相邻选择符必须使用加号（+）符号。例如：

<style type="text/css">
<!--
p + strong{
  color:#FF0000;
  font-size:18px;
  text-decoration:underline;
}
-->
</style>

上述CSS代码定义了body父元素下，相邻的两个元素p元素与strong元素中strong元素的样式。

再看一个相邻选择符结合其它选择符的例子：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在table元素后出现的所有相邻的ul元素，该table元素包含在一个body元素中，body元素本身是html元素的子元素。

示例一

下面列出了相邻选择符的使用方法。如下所示：

<style type="text/css">
<!--
p + strong{
  color:#FF0000;
  font-size:18px;
  text-decoration:underline;
}
-->
</style>

在浏览器中查看CSS相邻选择符示例的显示效果。

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS相邻选择符示例-www.baike369.com</title>
<style type="text/css">
<!--
p + strong{
 color:#FF0000;
 font-size:18px;
 text-decoration:underline;
}
-->
</style>
</head>
<body>
<p>定义了p元素！</p>
<strong>定义了与p元素相邻的strong元素的样式！</strong>
</body>
</html>

如下图所示：

在浏览器中查看CSS相邻选择符示例的显示效果

示例二

<style type="text/css">
<!--
p + strong + strong{
  color:#FF0000;
  font-size:18px;
  text-decoration:underline;
}
-->
</style>

在浏览器中查看CSS相邻选择符示例二的显示效果。

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS相邻选择符示例二-www.baike369.com</title>
<style type="text/css">
<!--
p + strong + strong{
 color:#FF0000;
 font-size:18px;
 text-decoration:underline;
}
-->
</style>
</head>
<body>
<p>定义了p元素！</p>
<strong>1. 定义了与p元素相邻的strong元素的样式！</strong>
<strong>2. 定义了与p元素相邻的strong元素的样式！</strong>
</body>
</html>

如下图所示：

在浏览器中查看CSS相邻选择符示例二的显示效果

相邻选择符p+strong+strong的定义范围是与p元素相邻并且再与strong元素相邻的strong元素，即p元素后的第二个strong元素就是定义了CSS样式的元素。

示例三

<style type="text/css">
<!--
strong + strong{
  color:#FF0000;
  font-size:18px;
  text-decoration:underline;
}
-->
</style>

在浏览器中查看CSS相邻选择符示例三的显示效果。

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS相邻选择符示例三-www.baike369.com</title>
<style type="text/css">
<!--
strong + strong{
 color:#FF0000;
 font-size:18px;
 text-decoration:underline;
}
-->
</style>
</head>
<body>
<p>定义了p元素！</p>
<strong>1. 定义了与p元素相邻的strong元素的样式！</strong>
<strong>2. 定义了与p元素相邻的strong元素的样式！</strong>
<strong>3. 定义了与p元素相邻的strong元素的样式！</strong>
<strong>4. 定义了与p元素相邻的strong元素的样式！</strong>
<strong>5. 定义了与p元素相邻的strong元素的样式！</strong>
</body>
</html>

如下图所示：

在浏览器中查看CSS相邻选择符示例三的显示效果