css中“~”（波浪号）、“，”（逗号）、“+”（加号）和“>”（大于号）详解

柔光的暖阳◎ 2022-05-21 08:55 277阅读 0赞

1.  p~ul\{
2.  　　 background:\#8e8e8e;
3.  \}
4.  
5.  <p>段落P </p>
6.  <ul>
7.  　　 <li>列表项1 </li>
8.  　　 <li>列表项2 </li>
9.  　　 <li>列表项3 </li>
10. </ul>

p~ul选择前面有<p>元素的每个<ul>元素，即选择p之后出现的所有ul，两种元素必须拥有相同的父元素，但ul不必紧随p。

css中“>”是css3中特有的选择器，A>B表示选择A元素的所有子B元素，与A B不同的是，A B选择所有后代元素，为A>B只选择一代。

A B\{\}选择A所有的后代B元素

A>B\{\}选择A的一代B元素

A+B\{\}这个+是选择相邻兄弟，称作“相邻兄弟选择器”，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器，例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p \{margin-top:50px;\}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝；

再举个例子，实现下面图片这个效果

![70][]

代码为

![70 1][]

先不看后面的+li，意思就是选择ul中所有的后代li元素，因为后面使用了li+li，所以选择ul中第一个li之后所有的li标签并设置border-top.

总结

1.A>B 表示选择A元素的所有子B元素（只选择第一代）

2.A B   表示选择A元素的所有子B元素（选择在A标签里面所有的B元素，不止第一代）

2.A+B表示HTML中紧随A的B元素：用一个结合符只能选择两个相邻兄弟中的第二个元素

li + li {
       font-weight:bold;}

上面这个选择器只会把列表中的第二个及后面的li都变为粗体，但第一个列表项不受影响。

[70]: /images/20220521/e68ee6133e3648978585916a3b9a64f1.png
[70 1]: /images/20220521/e551ad21f00e40f1b847cef6ce814658.png

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 package.json 中的波浪号（~）和插入符号（^）有什么区别？

问题描述：在我升级到最新的稳定版 node 和 npm 后，我尝试了 npm install moment --save。它使用插入符号 ^ 前缀将条目保存在 pack

短命女/ 2024年03月31日 17:32/ 0 赞/ 71 阅读

相关纯css实现波浪球

其实利用不规则园旋转实现，打开浏览器看下代码就知道了 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

Myth丶恋晨/ 2023年06月30日 06:58/ 0 赞/ 45 阅读

相关 240.简单的 CSS 波浪

效果 (源码网盘地址在最后) ![b7658345800490a58de027d9adbaed15.gif][] 源码 index.html <!DOC

一时失言乱红尘/ 2022年09月12日 11:59/ 0 赞/ 157 阅读

相关纯css的大于号样式

.gl{//大于号样式 width: 12px; height: 12px; position: absolute; border-left: 1px sol

缺乏、安全感/ 2022年06月18日 03:16/ 0 赞/ 256 阅读

相关 matlab中波浪号~的作用和用法

在matlab中，波浪号 ~（也就是键盘上数字键1 旁边的那个）主要有两个用法：第一是代表与或非中的非，如在以下代码中： if ~flag ……

小鱼儿/ 2022年06月06日 13:59/ 0 赞/ 369 阅读

相关 matlab矩阵中的逗号和分号

今天小鱼分享的比较简单，但是自己老搞混，所以记录下来，方便以后查阅我们这里定义一个矩阵 ![定义A矩阵][A] 以列的形式将矩阵中量显示出来方式为A(:) ![

た入场券/ 2022年06月03日 00:15/ 0 赞/ 333 阅读

相关 css中“~”（波浪号）、“，”（逗号）、“+”（加号）和“>”（大于号）详解

1. p~ul\{ 2. 　　 background:\8e8e8e; 3. \} 4. 5. <p>段落P </p> 6. <ul> 7. 　　 <li>列表

柔光的暖阳◎/ 2022年05月21日 08:55/ 0 赞/ 278 阅读

相关纯 CSS3 实现波浪效果

1.使用linear-gradient来做小波浪线 ①原理: linear-gradient(45deg, red, transparent 45%) 是个渐变

水深无声/ 2021年09月14日 15:42/ 0 赞/ 1191 阅读

相关 jquery选择器空格与大于号、加号与波浪号的区别

空格：$('parent childchild')表示获取parent下的所有的childchild节点（所有的子孙）。大于号：$('parent > child')表示获

水深无声/ 2021年09月10日 10:00/ 0 赞/ 385 阅读

相关 css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ > ”（大于号）是什么意思？

为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景： p~ul\{ 　　 background:\ff0000; \}

浅浅的花香味﹌/ 2021年08月13日 13:56/ 0 赞/ 349 阅读