CSS选择器总结！！

前端ing学习

已于 2024-08-02 13:51:59 修改

阅读量402

点赞数 15

文章标签： css 前端 html

于 2024-08-02 13:49:42 首次发布

本文链接：https://blog.csdn.net/2301_80342078/article/details/140870479

版权

CSS选择器总结！！

一、普通选择器

元素选择器

用于更改标签名相同的标签的样式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: rgb(208, 78, 78);
        }
        span{
            background-color: orange;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <span>3</span>
</body>

</html>

id选择器

用于修改id名相同的样式(id名唯一，没法实现多个标签公用样式)
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            background-color: rgb(208, 78, 78);
        }
        #div2{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <span>3</span>
</body>

</html>

class类选择器(常用)

用于更改class名相同的标签(可以公用)

一个标签可以有多个选择器，用空格隔开

一个选择器可以作用于多个标签，实现样式的共用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            background-color: rgb(208, 78, 78);
        }
        .div2{
            background-color: aqua;
        }
        .color{
            color: white;
        }
    </style>
</head>

<body>
    <div class="div1 color">1</div>
    <div class="div2 color">2</div>
    <span class="div1">3</span>
</body>

</html>

属性选择器(对属性进行过滤)

一般用于input标签的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[class=div1]{
            background-color: rgb(208, 78, 78);
        }
        div[class=div2]{
            background-color: aqua;
        }
        input[type=text]{
            border-color: red;
        }
        input[type=password]{
            border-color: rgb(4, 255, 0);
        }
    </style>
</head>

<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <input type="text">
    <input type="password">
</body>

</html>

二、综合选择器

子元素选择器

普通

用于修改父级标签中指定的所有子元素样式(所有后代)
升级

用于修改父级标签中指定的直系子元素样式(仅儿子辈)

**注意：有的属性，例如背景颜色，字体样式，是会层层继承的，所以看起来好像直系选择器和普通选择器没区别！！

**

    /* 普通 */
    .father1 .son1{
        border: 1px solid black;
    }
    /* 直系 */
    .father2 > .son2{
        border: 1px solid black;
    }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 普通 */
        .father1 .son1{
            border: 1px solid black;
        }
        /* 直系 */
        .father2 > .son2{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="father1">
        father
        <div class="son1">
            son
            <div class="son1">
                grandson
            </div>
        </div>
        <div class="daughter1">
            daughter
        </div>
    </div>
    <div class="father2">
        father
        <div class="son2">
            son
            <div class="son2">
                grandson
            </div>
        </div>
        <div class="daughter2">
            daughter
        </div>
    </div>
</body>

</html>

相邻元素选择器+

修改目标标签的后一个相邻标签的样式(仅能修改后一个)
```
    .son+.brother{
        background-color: red;
    }
```

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .son+.brother{
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="father">
        father
        <div class="son">
            son
        </div>
        <div class="brother">
            brother
        </div>
        <div class="brother">
            brother
        </div>
        <div class="sister">
            sister
        </div>
    </div>
</body>

</html>

兄弟元素选择器~

修改目标标签后面任意标签样式，位置无须紧邻于目标元素
```
    .son~.brother{
        background-color: red;
    }
```

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .son~.brother{
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="father">
        father
        <div class="son">
            son
        </div>
        <div class="brother">
            brother
        </div>
        <div class="brother">
            brother
        </div>
        <div class="sister">
            sister
        </div>
    </div>
</body>

</html>

同类选择器

选择一个标签带有两个及以上选择器的

常用于选择一组标签中特殊的一个，例如页面切换的高亮

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .brother.color {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="father">
        father
        <div class="brother color">
            brother
        </div>
        <div class="brother">
            brother
        </div>
    </div>
</body>

</html>