css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法

rustum · 发表于 2022-6-27 11:45

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

相邻兄弟选择器（+）

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

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title>相邻兄弟选择器</title><styletype="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>

复制代码

效果图如下：

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

<styletype="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的兄弟元素，所以也会应用样式。
兄弟选择器（~）

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

<styletype="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>

复制代码

效果展示：

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

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

子选择器（>）

只能选择作为某元素儿子元素的元素，不包括孙元素、曾孙元素等等等。
后代选择器，子选择器和相邻兄弟选择器结合使用示例：

请看下面这个选择器：

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><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>

复制代码

效果图：

: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/cssref/css_selectors.asp

csss属性选择器

选择器	示例	示例说明
[attribute]	[target]	选择所有带有target属性元素
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素
[attribute~=value]	[title~=flower]	选择标题属性包含独立单词"flower"的所有元素
[attribute ^= language]	[lang ^= en]	[lang ^= en] 选择一个lang属性的起始值="EN"的所有元素
[attribute $= language]	[lang $= en]	选择一个lang属性的结尾值="EN"的所有元素
[attribute *= language]	[lang *= en]	选择一个lang属性的包含"EN"的所有元素

关于CSS属性选择器中“~=”和“*=”的区别

“value是完整单词” 类型的比较符号: ~= , |=
“value是拼接字符串” 类型的比较符号: *= , ^= , $=

[attribute~=value] 属性中包含独立的单词为value
[title~=flower]
<imgsrc="/i/eg_tulip.jpg"title="tulip flower"/>
[attribute*=value] 属性中做字符串拆分，只要能拆出来value这个词就行
[title~=flower]
<imgsrc="/i/eg_tulip.jpg"title="ffffflowerrrrrr"/>

复制代码

伪类选择器

伪元素选择器

伪类和伪元素的区别

伪类像类选择器一样给已存在某个元素添加额外的样式；伪元素则是给自己虚拟的元素添加样式。

参考：https://segmentfault.com/a/1190000013737796
扩展：导航列多种实现方式

菜单栏右边框的实现方法有多种，结合上面介绍的选择器，实现方法分别如下：
一、常规方法：

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

复制代码

权重

总结排序：!important > 行内样式（style）>ID选择器 > 类选择器=伪类 > 元素=伪元素 > 通配符 > 继承 > 浏览器默认属性

		自动登录	找回密码
密码			立即注册

css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法

本帖子中包含更多资源

浏览过的版块