您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文小编为大家详细介绍“CSS相邻兄弟选择器、子选择器和兄弟选择器怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS相邻兄弟选择器、子选择器和兄弟选择器怎么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器：相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（——）、first-child、：last-child、：nth-child（）、：nth-last-child（）的用法。
相邻兄弟选择器（+）
相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
器。
在学习上有什么疑问随时可以找我我，与大家分享互联网web前端实战操作，无论你是否有基础，我都欢迎。点：前端技术分享
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
h2+p{
color:red;
}
</style>
</head>
<body>
<p>Hello word!</p>
<p>Hello word!</p>
<h2>Hello word!</h2>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
</body>
</html>
效果图如下：
兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h2标签的样式。
当然这个也会循环查找，即当两个兄弟元素相同时，会再一次循环查找：
示例：
<style type="text/css">
li + li {
color:red;
}
</style>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。
兄弟选择器（——）
作用是查找某一个指定元素的后面的所有兄弟结点。
示例代码：
<style type="text/css">
h2 —— p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h2>2</h2>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
效果展示：
后代选择器（包含选择器）
可以选择某元素后代的元素（子子孙孙元素）
子选择器（>）
只能选择作为某元素儿子元素的元素，不包括孙元素、曾孙元素等等等。
后代选择器，子选择器和相邻兄弟选择器结合使用示例：
请看下面这个选择器：
html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的第一个相邻兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
：first-child 选择器
li:first-child
{
background:yellow;
}
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
效果图
值得注意的是，如果其父元素的第一个元素（p）不是该指定类型元素（li），则第一个元素不会有样式
li:first-child
{
background:yellow;
}
<ol>
<p>测试</p>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
效果图
：last-child选择器
：last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
提示：p:last-child 等同于 p:nth-last-child（1）。
eg：指定属于其父元素的最后一个子元素的 p 元素的背景色：
p:last-child
{
background:#ff0000;
}
<body>
<h2>这是标题</h2>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
效果：
说明：p标签的父元素是body，body标签中最后一个p元素是第五个段落
：nth-child（）
：nth-child（） 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。
p:nth-child（2）
{
background:#ff0000;
}
<body>
<h2>这是标题</h2>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child（） 选择器。</p>
</body>
：nth-child（）的详细用法
nth-child（3） 表示选择列表中的第三个元素。
nth-child（2n）表示列表中的偶数标签，即选择第2、第4、第6……标签
nth-child（2n-1） 表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签
nth-child（n+3） 表示选择列表中的标签从第3个开始到最后（>=3）
nth-child（-n+3） 表示选择列表中的标签从0到3，即小于3的标签（<=3）
nth-last-child（3） 表示选择列表中的倒数第3个标签
：nth-of-type（n）
：nth-of-type（n） 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。
n 可以是数字、关键词或公式。
p:nth-of-type（2）
{
background:#ff0000;
}
<body>
<h2>这是标题</h2>
<p>第一个段落。</p>
<div>测试</div>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
效果图：
：nth-last-child（） 选择器
：nth-last-child（n） 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式。
提示：请参阅 :nth-last-of-type（） 选择器，该选择器选取父元素的第 N 个指定类型的子元素，从最后一个子元素开始计数。
CSS3 :not 选择器
：not（selector） 选择器匹配非指定元素/选择器的每个元素。
扩展
菜单栏右边框的实现方法有多种，结合上面介绍的选择器，实现方法分别如下：
一、常规方法：
。nav li{
border-right:1px solid #fff;
}
。nav li:last-child{
border-right-width:0px;
}
二：结合相邻兄弟选择器（+）
。nav li + li{
border-left:1px solid #fff;
}
三、结合兄弟选择器（——）
。nav li:first-child —— li{
border-left:1px solid #fff;
}
四、结合：not（）选择器
。nav li:not（：last-child）{
border-right:1px solid #fff;
}
读到这里，这篇“CSS相邻兄弟选择器、子选择器和兄弟选择器怎么用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。