前言: 我们在码代码的时候, 经常会遇到需要给第一个或者最后一个元素添加或删除样式, 还有一些比较特殊的是选取第几个元素添加或删除样式, 下面记录 CSS 选择器中常见的选择器: 相邻兄弟选择器 (+), 子选择器(>), 兄弟选择器(~),first-child,:last-child,:nth-child(),:nth-last-child() 的用法.
相邻兄弟选择器(+)
相邻兄弟选择器可选择紧接在另一个元素后的元素, 且二者具有相同的父亲元素. 注释: 与子结合符一样, 相邻兄弟结合符旁边可以有空白符.
器.
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
- 相邻兄弟选择器
- </title>
- <style type="text/css">
- h1+p{ color:red; }
- </style>
- </head>
- <body>
- <p>
- Hello Word!
- </p>
- <p>
- Hello Word!
- </p>
- <h1>
- Hello Word!
- </h1>
- <p>
- Hello Word!
- </p>
- <p>
- Hello Word!
- </p>
- <p>
- Hello Word!
- </p>
- <p>
- Hello Word!
- </p>
- </body>
- </HTML>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
效果图如下:
兄弟只会影响下面的 p 标签的样式, 不影响上面兄弟的样式.
注意这里的'+'的意义跟'and'意义不一样, 兄弟选择器的样式是应用在兄弟元素上, 跟参照的元素样式无关, 如上例只影响 p 元素的样式, 而不影响 h1 标签的样式.
当然这个也会循环查找, 即当两个兄弟元素相同时, 会再一次循环查找:
示例:
- <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">
- h1 ~ p{
- color:red;
- }
- </style>
- </head>
- <body>
- <p>1</p>
- <h1>2</h1>
- <p>3</p>
- <p>4</p>
- <p>5</p>
- </body>
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
效果展示:
后代选择器(包含选择器)
可以选择某元素后代的元素(子子孙孙元素)
子选择器(>)
只能选择作为某元素儿子元素的元素, 不包括孙元素, 曾孙元素等等等.
后代选择器, 子选择器和相邻兄弟选择器结合使用示例:
请看下面这个选择器:
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>
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
效果图
值得注意的是, 如果其父元素的第一个元素 (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>
- <h1 > 这是标题</h1>
- <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>
- <h1 > 这是标题</h1>
- <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>
- <h1 > 这是标题</h1>
- <p > 第一个段落.</p>
- <div > 测试</div>
- <p > 第二个段落.</p>
- <p > 第三个段落.</p>
- <p > 第四个段落.</p>
- <p > 第五个段落.</p>
- </body>
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
效果图:
: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;
- }
来源: http://www.jianshu.com/p/7cad4944e455