css常见选择器：+、~、>、:first-child，:nth-child()的用法

时间 2019-12-05

标签 css 常见选择器 child nth 用法栏目 CSS 繁體版

原文原文链接

本篇文章主要记录一些css常见的选择器的区别和用法，如相邻兄弟选择器（+）、兄弟选择器(>)、子选择器(+)、:nth-child()等，掌握了这些，能够帮助咱们在前端开发中事半功倍。css

相邻兄弟选择器(+)

定义：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另外一元素后的元素，且两者有相同父元素。html

html代码：前端

<p>这里是第一个p标签</p>
    <p>这里是第二个p标签</p>
    <h2>标题H2</h2>
    <p>这里是第三个p标签</p>
    <p>这里是第四个p标签</p>
    <p>这里是第五个p标签</p>
复制代码

css样式：浏览器

h2+p {color: red; }
复制代码

结果： spa

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
复制代码

li + li {color:red;}
复制代码

结果：3d

分析：一开始特别纳闷为啥“List item 2”和“List item 3”都被选中了~~~code

首先分析选择器样式：li+li{}，字面意思是选取全部位于li标签后的第一个li元素cdn

很显然第一个li不会被选中，由于它前面不是li
第二个li会被选中，由于它是第一个li标签紧邻的li标签
第三个li也会被选中，由于第三个li标签的上一个标签也是li标签，也知足li+li{}的条件：li标签后的第一个li标签

正由于css选择器的样式为li+li{}，因此代码中的li标签就能够一直套用这个“公式”。htm

注：前端面包屑导航中常常用到该选择器。blog

兄弟选择器（~），又称匹配选择器

定义：做用是查找某一个指定元素的后面的全部兄弟结点

结果：

经过这两个例子，能够发现虽然这两个选择器都表示兄弟选择器，可是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的（特殊状况：循环多个）。而‘~’选择器则表示某元素后全部同级的指定元素，强调全部的。

子选择器(>)

定义：只能选择做为某元素儿子元素的元素（直接子元素），不包括孙元素、曾孙元素等等等。

:first-child

定义：用于选取属于其父元素的首个子元素的指定选择器

嗯，乍一看好像说的不是很明白，所以这个选择器很容易让人误解，一般会有两种误解：

误解一：认为E:first-child选中E元素的第一个子元素。
误解二：认为E:first-child选中E元素的父元素的第一个E元素。

正确的理解应该是：只要E元素是它的父级的第一个子元素，就选中。它须要同时知足两个条件，一个是“第一个子元素”，另外一个是“这个子元素恰好是E”。

<style> span:first-child{color: red;} p:first-child{color: blue;} /*p元素的父元素的第一个子元素是div而不是p元素，所以该样式不起做用*/ i:first-child{color: orange;} </style>

<div class="demo">
<div>.demo的第一个子元素是div</div>
<!--第一个span元素是它的父级P元素的第一个span，颜色变红色-->
<p><span>第一个span</span>第一个段落P<span>第二个span</span></p>
<!--第一个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个连接<i>第一个i元素</i></p>
<!--第二个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个连接<i>第二个i元素</i></p>
<p>一个连接</p>
</div>
复制代码

效果：

:nth-child(n)

定义：该选择器选取父元素的第 N 个子元素，与类型无关。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> p:nth-child(2) { background:#ff0000; } </style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>

<p><b>注意:</b> Internet Explorer 8 以及更早版本的浏览器不支持 :nth-child()选择器.</p>

</body>
</html>
复制代码

效果：

:nth-child(n)的详细用法：

nth-child(3) 表示选择列表中的第三个元素。

nth-child(2n)表示列表中的偶数标签，即选择第二、第四、第6……标签

nth-child(2n-1) 表示选择列表中的奇数标签，即选择第一、第三、第五、第7……标签

nth-child(n+3) 表示选择列表中的标签从第3个开始到最后（>=3）

nth-child(-n+3) 表示选择列表中的标签从0到3，即小于3的标签(<=3)

nth-last-child(3) 表示选择列表中的倒数第3个标签

:nth-of-type(n)

定义:选择器匹配属于父元素的特定类型的第 N 个子元素的每一个元素，与元素类型有关

<!DOCTYPE html>
<html>
<head>
<style> p:nth-of-type(2) { background:#ff0000; } </style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>
</html>
复制代码

效果：

属性选择器

定义：能够为拥有指定属性的 HTML 元素设置样式，而不只限于 class 和 id 属性。

<html>
<head>
<style type="text/css"> [title~=hello] { color:red; } </style>
</head>

<body>
<h1>能够应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>

</body>
</html>
复制代码

结果：