CSS中＞,+,~，空格，逗号等符号的使用

最新推荐文章于 2025-07-07 16:17:17 发布

原创最新推荐文章于 2025-07-07 16:17:17 发布 · 6.1k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html #html5

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSS中的一些特殊选择器，包括波浪号(~), 加号(+), 大于号(>), 空格以及逗号的使用方法。这些选择器用于精准定位和应用样式到特定的HTML元素。例如，波浪号用于选择指定元素后面的所有兄弟元素，加号选择紧邻的后续元素，大于号选择直接子元素，空格则表示所有后代元素，而逗号用于分隔多个选择器，使多个元素共享同一组样式。" 123702099,11777845,Vue数据绑定详解：单向与双向,"['vue', '前端开发']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其中,+,~均为CSS3特有的选择器。

~(波浪号) ：

p~ul选择器 p之后出现的所有ul。
两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。

P~ul {
         background-color: pink;
       }

<p>快乐生活</p>
    <ul>
　　    <li>昊昊</li>
　　    <li>凯凯</li>
    </ul>
    <h1>-------------</h1>
    <ul>
　　    <li>0</li>
　　    <li>1</li>
    </ul>

输出结果：

+(加号）：

二者有相同的父元素，
选择紧接在另一个元素后的元素

P+ul {
         background-color: pink;
       }

<p>快乐生活</p>
    <ul>
　　    <li>昊昊</li>
　　    <li>凯凯</li>
    </ul>
    <h1>-------------</h1>
    <ul>
　　    <li>0</li>
　　    <li>1</li>
    </ul>

输出结果：

>(大于号)：

是css3特有的选择器，
A>B 表示选择A元素的所有子B元素。

  body>ul {
         background-color: pink;
       } 

    <p>快乐生活</p>
    <ul>
　　    <li>昊昊</li>
　　    <li>凯凯</li>
    </ul>
    <ul>
　　    <li>190</li>
　　    <li>180</li>
    </ul>
    <ul>
        <li>21</li>
        <li>23</li>
    </ul>

输出结果：

空格：

A B{ }表示A标签的所有子代B标签。

      div{
            background-color: red;
            height: 50px;
        }
        body p{
         background-color: pink;
       }
<body>
    <div><p>快乐生活</p></div>
    <p>昊昊凯凯</p>

, 逗号：

A,B{ }表示A,B两个标签同时拥有大括号中的CSS样式。

        p,ul {
            background-color: pink;
        }
    <p>快乐生活</p>
    <ul>
        <li>昊昊</li>
        <li>凯凯</li>
    </ul>
    <ul>
        <li>21</li>
        <li>23</li>
    </ul>

输出结果：