CSS相邻选择符

来源：互联网发布：淘宝西班牙代购真假编辑：程序博客网时间：2024/06/12 17:07

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相邻选择符示例三的显示效果

相邻选择符strong+strong所要定义的元素为与strong元素相邻的strong元素，结构中5个strong元素都是相邻的，排除第一个strong元素外，其余4个都可以理解为与strong元素相邻的strong元素。

提示

并不是所有的浏览器都支持相邻选择符！IE7以下版本的IE浏览器不支持！

由于IE 6.0及更早的版本不支持相邻选择器，因此这种选择器经常用于对IE 6.0隐藏某些CSS规则使用。

0 0