前端一HTML:十一:其他选择器_前端开发中网页里面的其他选项是什么-优快云博客

博客介绍了几种CSS选择器。通配符选择器作用于页面所有标签，但遍历所有标签设置属性，性能较低；后代选择器选标签后代中满足条件的标签；子元素选择器获取直接子元素；还有并集选择器和交集选择器。

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

1.通配符选择器:作用域页面上的所有标签

<style type="text/css">
  *{
     属性名1 : 属性值1
     属性名2 : 属性值2
     ...
  }
</style>

通配符选择器在进行选择的时候,会去遍历页面上的所有标签，并且给这些标签设置对应的属性。这样一来，性能就比较低。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            color:blue;
        }
    </style>
</head>
<body>
    <span>java</span>
    <p>python</p>
    <div>javascript</div>
</body>
</html>

2.后代选择器: 选择一个标签中所有后代标签里满足条件的标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .book p{
            color: blue
        } /* 后代选择器 */

        .book .history p{ /* 去book标签下找history标签,再找history下面所有的p标签 */
            color: red
        } 
    </style>
</head>
<body>
    <div class="book">
        <p>历史类书籍</p>
            <div class="history">
                <p>史记</p>
                <p>资治通鉴</p>
            </div>
        <p>哲学类书籍</p>
        <p>教育类书籍</p>
    </div>
    <p>电影</p>
</body>
</html>

3.子元素选择器: 得到当前标签中的直接子元素(直接放在标签下面没有经过任何标签的嵌套)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .book> p{
            color: blue
        } /* 子元素选择器 */

       
    </style>
</head>
<body>
    <div class="book">
        <p>历史类书籍</p>
            <div class="history">
                <p>史记</p>
                <p>资治通鉴</p>
            </div>
        <p>哲学类书籍</p>
        <p>教育类书籍</p>
    </div>
    <p>电影</p>
</body>
</html>

4.并集选择器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .history p, .novel p {
            color: blue
        } /* 并集选择器 */

       
    </style>
</head>
<body>
    <div class="book">
        <p>历史类书籍</p>
            <div class="history">
                <p>史记</p>
                <p>资治通鉴</p>
            </div>
            <div class="novel">
                <p>三国演义</p>
                <p>红楼梦</p>
            </div>
        <p>哲学类书籍</p>
        <p>教育类书籍</p>
    </div>
    <p class="novell">电影</p>
</body>
</html>

5.交集选择器:从两个集合中选择它们相同的部分

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
          p.history{ /*找到既是p标签，又是history的标签*/
            color: blue
        } /* 交集选择器 */

       
    </style>
</head>
<body>
    <div class="novel">
        <p class="history">三国演义</p>
        <p class="history">红楼梦</p>
        <p>三体</p>
        <p>麦田里的守望者</p>
    </div>
    <p class="history">水浒传</p>
</body>
</html>