白学的小知识[CSS选择器的十二种方法]

最新推荐文章于 2024-08-09 11:34:51 发布

原创最新推荐文章于 2024-08-09 11:34:51 发布 · 1.8k 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

本文详细介绍了CSS中的各种选择器，包括标签名选择器、类选择器、ID选择器、通配符选择器、并集和交集选择器、后代和子代选择器、相邻/全部兄弟选择器以及伪类和属性选择器的用法示例。

部署运行你感兴趣的模型镜像

1.元素选择器:通过标签名可直接选取到元素。

div{}

p{}

ul{}

...

2.类选择器:通过class类选取到元素，可以选取到多个元素，只要给想要添加这种类名的元素添加上class类，就可以不用反复写相关的样式

.className

记住要添加点号"."

3.id选择器:通过id选取到元素，id是独特的，就跟我们的身份证一样，一人一个，不能重复。

#idName

要以"#"开头

4.通配符选择器:直接以*基本选择器代码总结：开头，通常用于清除默认样式，比如网页的内外边距。**

5.并集选择器:并集选择器，意如其名，就是并在一起。
例如：.box,.box1{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box,.box1 {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box">并集选择器1</div>
    <div class="box1">并集选择器2</div>
</body>
</html>

样式:

注：使用并集选择器时别忘了","。

6.交集选择器:交集，相交的元素。

例如：div.box{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.box {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box">交集选择器</div>
</body>
</html>

样式:

注：使用交集选择器时别记混了，是div+.盒子的class。

7.后代选择器:后代选择器我们需要用空格隔开，选取到全部的后代
例如：div span{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box span {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>我是老大</span>
        <div>
            <span>我是老二</span>
            <div>
                <span>我是老三</span>
            </div>
        </div>
    </div>
</body>
</html>

样式:

注：使用后代选择器时别记混了，不用+"."。

8.子代选择器:选取到父级元素的子元素，是亲儿子，不包括后代
例如：div>span{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box>span {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>子代选择器</span>
        <span>子代选择器</span>
        <span>子代选择器</span>
    </div>
</body>
</html>

样式:

注：使用子代选择器时别记混了，用的是">"。

9.相邻兄弟选择器:使用+号,选取到的是下一个兄弟。
例如：div+div{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box+div{
            color: pink;
        }
    </style>
</head>
<body>
    <div>我是你上一级兄弟</div>
    <div class="box">我是你哥</div>
    <div>我是你亲兄弟</div>
</body>
</html>

样式:

注：使用兄弟选择器时别记混了，用的是"+",选取的是下一个而不是上面的。

10.全部兄弟选择器:使用~可以选取到全部兄弟,也是从下一个开始。
例如：div~div{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box~div{
            color: pink;
        }
    </style>
</head>
<body>
    <div>我是你上一级兄弟</div>
    <div class="box">我是你哥</div>
    <div>我是你亲兄弟</div>
    <div>我也是你亲兄弟</div>
</body>
</html>

样式:

注：使用全部兄弟选择器时别记混了，用的是"~",选取的是下一个而不是上面的。

11.使用伪类选择器[常用的三种：:first-child :last-child :nth-child(n)]

:first-child选取到第一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box:first-child {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</body>
</html>

样式:

:last-child选取到最后一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box span:last-child {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

样式:

:nth-child(n) 选择第n个元素，从1开始
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box span:nth-child(1) {
            color: pink;
        }
        .box span:nth-child(2n+2) {
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

样式:

注：使用伪类选择器时，前面+":"

12.属性选择器(介绍4种)

可以通过元素属性选取到属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        input[name=inp]{
            border: 10px solid pink;
        }
        /* 选取到以i开头的元素 */
        input[name^=i]{
            border: 10px solid green;
        }
        /* 选取以p结尾的元素 */
        input[name$=p]{
            border: 10px solid blue;
        }
        /* 选取含有n的元素 */
        input[name*=n]{
            border: 10px solid black;
        }
    </style>
</head>
<body>
    <input type="text" name="inp">
    <input type="text" name="inp">
    <input type="text" name="inp">
</body>
</html>

--以上皆为个人课后总结，以上有不对的地方，希望大家可以指出，感谢大家！

您可能感兴趣的与本文相关的镜像