CSS选择器十二种方法

相信大家对元素应该是不陌生的，当我们页面中，我们想要布局，给元素添加样式的时候，我们应该怎么获取到指定元素呢？
优先级：ID 选择器 > 类选择器 > 标签选择器 > 通配符

1.元素选择器

通过标签名可直接选取到元素
例如：div{}，p{}，ul{}等等

2.类选择器

通过class类选取到元素，可以选取到多个元素，只要给想要添加这种类名的元素添加上class类，就可以不用反复写相关的样式
例如：.className 记住要添加点号(.)

3.id选择器

通过id选取到元素，id是独特的，就跟我们的身份证一样，一人一个，不能重复
例如：#idName
记住以#开头

4.通配符选择器

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器总结title>
    <style>
        /* 第一种,元素选择器 */
        /* div {
            color: red;
        } */
        /* ................. */
        /* 第二种,类选择器 */
        /* .box {
            color: red;
        } */
        /* ................ */
        /* 第三种,id选择器 */
        /* #box {
            color: red;
        } */
        /* ............ */
        /* 第四种,通配符选择器 */
        /* * {
            margin: 0;
            padding: 0;
        } */
    style>
head>
<body>
    
    
    
    
    
    
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

5.并集选择器

并集选择器，顾名思义，就是并在一起
例如：.box，.box1
使用逗号隔开，通常用于有相同样式的情况

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .box,.box1 {
            color: red;
        }
    style>
head>
<body>
    <div class="box">我是需要并集选择器div>
    <div class="box1">我也需要并集选择器div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

6.交集选择器

交集，相交的元素

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        div.box {
            color: red;
        }
    style>
head>
<body>
    <div class="box">交集选择器div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

7.后代选择器

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .box span {
            color: red;
        }
    style>
head>
<body>
    <div class="box">
        <span>我是儿子span>
        <div>
            <span>我是孙子span>
            <div>
                <span>我是重孙span>
            div>
        div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

8.子代选择器

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .box span {
            color: red;
        }
    style>
head>
<body>
    <div class="box">
        <span>子代选择器span>
        <span>子代选择器span>
        <span>子代选择器span>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

9.相邻兄弟选择器

使用+号
例如：div+div{ }
选取到的是下一个兄弟

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .box+div{
            color: red;
        }
    style>
head>
<body>
    <div>我是你上一级兄弟div>
    <div class="box">我是你哥div>
    <div>我是你亲兄弟div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

10.全部兄弟选择器

使用~可以选取到全部兄弟
例如：div~div{ }
不过也是从下一级开始

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .box~div{
            color: red;
        }
    style>
head>
<body>
    <div>我是你上一级兄弟div>
    <div class="box">我是你哥div>
    <div>我是你亲兄弟div>
    <div>我也是你亲兄弟div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

11.伪类选择器(常用的3种)

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .box:first-child {
            color: red;
        }
    style>
head>
<body>
    <div class="box">1div>
    <div class="box">2div>
    <div class="box">3div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述
2.:last-child选取到最后一个元素

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        .box span:last-child {
            color: red;
        }
    style>
head>
<body>
    <div class="box">
        <span>1span>
        <span>2span>
        <span>3span>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述
3.: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: red;
        }
        .box span:nth-child(2n+2) {
            color: pink;
        }
    style>
head>
<body>
    <div class="box">
        <span>1span>
        <span>2span>
        <span>3span>
        <span>4span>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

十二、属性选择器(介绍4种)

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        input[name=inp]{
            border: 10px solid #000;
        }
        /* 选取到以i开头的元素 */
        input[name^=i]{
            border: 10px solid red;
        }
        /* 选取以p结尾的元素 */
        input[name$=p]{
            border: 10px solid pink;
        }
        /* 选取含有n的元素 */
        input[name*=n]{
            border: 10px solid hotpink;
        }
    style>
head>
<body>
    <input type="text" name="inp">
    <input type="text" name="inp">
    <input type="text" name="inp">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

相关阅读:
git bfg 的使用（删除提交记录中的敏感信息，删除文件等）
百度云原生数据库GaiaDB的HTAP与多地多活技术实践
 学懂C#编程：常用高级技术——学会C#的高级特性反射
 asp毕业设计——基于asp+access的在线教育系统设计与实现（毕业论文+程序源码）——在线教育系统
 spring6概述
 使用Python进行Web开发：从基础到实战
 SpringMVC实现文件的上传（CommonsMultipartResolver和StanderServletMultipartResolver）
基于Matlab实现多个图像融合案例（附上源码+数据集）
Java - ScheduledExecutorService接口介绍(1)（可实现Timer定时器）
豪赌？远见？浙江东方的量子冒险
原文地址：https://blog.csdn.net/m0_74577714/article/details/134731946