相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法

Tikitoo 发布于2019-08-02 11:37 / 2294人阅读

摘要：前言我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录选择器中常见的选择器相邻兄弟选择器子选择器兄弟选择器的用法。

前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。

相邻兄弟选择器（+）

相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
器。

相邻兄弟选择器

Hello word!

效果图如下：

兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。
当然这个也会循环查找，即当两个兄弟元素相同时，会再一次循环查找：
　　示例：




  
    List item 1
    List item 2
    List item 3

可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。

兄弟选择器（~）

作用是查找某一个指定元素的后面的所有兄弟结点。
示例代码：

2

效果展示：

后代选择器（包含选择器）

可以选择某元素后代的元素（子子孙孙元素）

子选择器（>）

只能选择作为某元素儿子元素的元素，不包括孙元素、曾孙元素等等等。

后代选择器，子选择器和相邻兄弟选择器结合使用示例：

请看下面这个选择器：

html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的第一个相邻兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

:first-child 选择器

li:first-child
{
background:yellow;
}


  咖啡
  茶
  可口可乐



  咖啡
  茶
  可口可乐

效果图

值得注意的是，如果其父元素的第一个元素（p）不是该指定类型元素（li），则第一个元素不会有样式

li:first-child
{
background:yellow;
}


  测试
  咖啡
  茶
  可口可乐

效果图

:last-child选择器

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

提示：p:last-child 等同于 p:nth-last-child(1)。

eg：指定属于其父元素的最后一个子元素的 p 元素的背景色：

p:last-child
{ 
background:#ff0000;
}

这是标题

第一个段落。

第二个段落。

第三个段落。

第四个段落。

第五个段落。

效果：

说明：p标签的父元素是body，body标签中最后一个p元素是第五个段落

:nth-child()

:nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。

p:nth-child(2)
{
background:#ff0000;
}

这是标题

第一个段落。

第二个段落。

第三个段落。

第四个段落。

注释：Internet Explorer 不支持 :nth-child() 选择器。

: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;
}

这是标题

第一个段落。

测试

第二个段落。

第三个段落。

第四个段落。

第五个段落。

效果图：

:nth-last-child() 选择器

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n 可以是数字、关键词或公式。

提示：请参阅 :nth-last-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素，从最后一个子元素开始计数。

CSS3 :not 选择器

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

更多css选择器请参考：CSS 选择器参考手册
http://www.w3school.com.cn/cs...

GPU云服务器云服务器选择器派生选择器省市选择器属性选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53005.html

相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法

摘要：前言我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录选择器中常见的选择器相邻兄弟选择器子选择器兄弟选择器的用法。前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子...

Drinkey 2019-08-30 15:54 评论0 收藏0
jQuery 对象、基本选择器、筛选选择器

摘要：代表的上下文对象是一个的上下文对象，可以调用的方法和属性值特殊选择器点击测试通过原生处理点击测试通过原生处理直接通过的方法改变颜色通过包装成对象改变颜色 DOM对象转化成jQuery对象如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象元素一元素二元素三 var ...

source 2019-08-21 11:51 评论0 收藏0
初学jQuery之选择器

摘要：选择器选择器是什么的选择器是用于定位页面中的元素，其用法最初设计是源于的选择其用法，但是的选择器进行了扩展，远比的选择器更加强大。选择器选择器是什么 jQuery的选择器是用于定位HTML页面中的元素，其用法最初设计是源于CSS的选择其用法，但是jQuery的选择器进行了扩展，远比CSS的选择器更加强大。基本选择器基本选择去具有以下几种：1.ID选择器 2.元素选择器3...

xcc3641 2019-08-02 16:04 评论0 收藏0
初学jQuery之选择器

摘要：选择器选择器是什么的选择器是用于定位页面中的元素，其用法最初设计是源于的选择其用法，但是的选择器进行了扩展，远比的选择器更加强大。选择器选择器是什么 jQuery的选择器是用于定位HTML页面中的元素，其用法最初设计是源于CSS的选择其用法，但是jQuery的选择器进行了扩展，远比CSS的选择器更加强大。基本选择器基本选择去具有以下几种：1.ID选择器 2.元素选择器3...

yankeys 2019-08-23 11:47 评论0 收藏0
【静态页面架构】CSS之选择器

摘要：架构基本选择器元素选择器通过元素名称定位页面元素类选择器通过元素的属性定位页面元素选择器通过元素的属性定位页面元素属性必须是唯一的通配符选择器匹配当前页面中所有元素元素选择器通过元素名称定位页面元素定位页面中一类元素选择器通过元素的属性定位 CSS架构基本选择器元素选择器:通过元素名称定位页面元素类选择器:通过元素的class属性定位页面元素 ID选择器:通过元素的ID属性定位...

Lowky 2019-08-29 16:32 评论0 收藏0