CSS 中的各种选择器

文章目录

CSS 常用选择器总结

CSS 常用选择器总结

一、基础选择器

1. ID 选择器

根据 ID 属性选择唯一元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        #container{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="container">元素被选取</div>
</body>
</html>

2. 元素选择器

根据元素类型选取全部元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>元素被选取</div><br />
    <div>元素被选取</div>
</body>
</html>

3. 类名选择器

根据 class 属性选取全部元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        .container {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">元素被选取</div><br />
    <div class="container">元素被选取</div>
</body>
</html>

4. 通配符选择器

选择全部元素，例子中 html、body、div 都会被选取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        * {
            margin-top: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div style="width: 100px; height: 100px;">元素被选取</div>
</body>
</html>

二、复合选择器

CSS选择器中单冒号和双冒号区别

单冒号用于伪类，双冒号用于伪元素

1. 并集选择器

分别对各个基础选择器进行选取，最后合并到一起
选取 id="container" 的元素和标签类型为 <p> 的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        #container,
        p {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="container">元素被选取</div>
    <p>元素被选取</p>
    <p>元素被选取</p>
    <div>元素不会被选取</div>
</body>
</html>

2. 后代选择器

在 id="container" 的元素内选中所有的 <p> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        #container p {
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="container">
        <p>元素被选取</p>
        <div>
            <p>元素被选取</p>
        </div>
    </div>
    <p>元素不会被选取</p>
</body>
</html>

3. 一层后代选择器

在 id="container" 的元素内选中所有的 <p> 元素，只选中一级子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        #container>p {
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="container">
        <p>元素被选取</p>
        <div>
            <p>元素不会被选取</p>
        </div>
        <p>元素被选取</p>
    </div>
    <p>元素不会被选取</p>
</body>
</html>

4. 属性选择器

选中 name="abc" 的 <input> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        input[name="abc"] {
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <input name="abc" type="text" value="元素被选取">
    <input name="abce" type="text">
    <input name="abc" type="text" value="元素被选取">
    <input name="def" type="button" value="按钮">
</body>
</html>

选中 name 以 "abc" 开头的 <input> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        input[name^="abc"] {
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <input name="abc" type="text" value="元素被选取">
    <input name="abce" type="text">
    <input name="abc" type="text" value="元素被选取">
    <input name="def" type="button" value="按钮">
</body>
</html>

选中 name 以 "c" 结尾的 <input> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        input[name$="c"] {
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <input name="abc" type="text" value="元素被选取">
    <input name="abce" type="text">
    <input name="abc" type="text" value="元素被选取">
    <input name="def" type="button" value="按钮">
</body>
</html>

选中 name 包含 "e" 的 <input> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        input[name*="e"] {
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <input name="abc" type="text" value="元素被选取">
    <input name="abce" type="text">
    <input name="abc" type="text" value="元素被选取">
    <input name="def" type="button" value="按钮">
</body>
</html>

5. 链接伪类选择器

链接未点击样式：:link
链接访问过样式：:visited
鼠标悬停样式：:hover
鼠标按住不松时样式：:active

如果使用多个链接伪类选择器时，要满足 LVHA :link、:visited、:hover、:active 的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        a:link {
            color: green;
        }

        a:visited {
            color: gray;
        }

        a:hover {
            color: red;
        }

        a:active {
            color: blue;
        }
    </style>
</head>
<body>
    <a href="#">变色</a>
</body>
</html>

6. 伪元素选择器

伪元素不属于 DOM 文档流，无法用 JS 操作

在 div 元素前插入伪元素，::before 默认插入的是行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        div::before{
            width: 100px;
            height: 100px;
            border:1px solid black;
            display: block;
            content: "这是 ::before 插入的元素"
        }
    </style>
</head>
<body>
    <div style="border:1px solid black;">这是一个DIV元素</div>
</body>
</html>

在 div 元素后插入伪元素，::after 默认插入的是行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        div::after {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: block;
            content: "这是 ::after 插入的元素"
        }
    </style>
</head>
<body>
    <div style="border:1px solid black;">这是一个DIV元素</div>
</body>
</html>

7. 伪类选择器

选择第一个出现的类型为 <p> 的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        p:first-of-type {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <p>元素被选中</p>
    <p>元素不会被选中</p>
</body>
</html>

选择第二个出现的类型为 <p> 的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        p:nth-of-type(2) {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <p>元素不会被选中</p>
    <p>元素被选中</p>
</body>
</html>

8. 相邻选择器

选择紧跟 <div> 元素的首个 <p> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        div+p {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <p>元素被选中</p>
    <p>元素不会被选中</p>
</body>
</html>

选择 <div> 元素后面的，所有与其平级的 <p> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style>
        div~p {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <p>元素被选中</p>
    <span></span>
    <p>元素被选中</p>
</body>
</html>