CSS选择器简介及应用

作用：选择页面上的某一个或某一类元素

基本选择器

1、标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
    /*标签选择器，会选择页面上所有的这个标签的元素*/
        h1{
            color: chartreuse;
            background: blue;
            border-right: 24px;;
        }
        p{font-size: 80px;}
    </style>
</head>
<body>
<h1>标题一</h1>
<h1>标题二</h1>
<p>段落</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
         /*类选择器的格式 ： .class的名称{}
        好处，可以多个标签归类，是同一个 class ，可以复用
        也可以跨标签 h1，p标签都能归为一类 */
        .yi{color : aqua;}
        .er{color: chartreuse;}
        .san{color: brown;}
    </style>
</head>
<body>
<h1 class="yi">标题一</h1>
<h1 class="er">标题二</h1>
<h1 class="san">标题三</h1>
<p class="yi">P标签</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3、Id 选择器：全局唯一 #id名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*  id选择器  : id 必须保证全局唯一
            #id名称{}
            不遵循就近原则，固定的
            id选择器 > 类选择器 > 标签选择器 */
        #yi{color: #1f23ff;}
        .yi{color: brown;}
        h1{color: chartreuse;}
    </style>
</head>
<body>
<h1 id="yi">标题一</h1>
<h1 class="yi">标题二</h1>
<h1 class="yi">标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>
</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

优先级：id选择器 > class选择器 > 标签选择器

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*p{*/
        /*    background: chartreuse;*/
        /*}*/
        /*后代选择器 在某个元素的后面，祖爷爷 爷爷 爸爸 我*/
        body p{background: brown;}
        /*子选择器 一代 （儿子）*/
        body>p{ background: #1f23ff;}
        /*兄弟选择器 同辈  只有一个，相邻（向下）*/
        .active + p{background: aquamarine;}
        /*通用选择器，当前选择元素的向下的所有兄弟元素*/
        .active~p{background: blueviolet;}
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li> <p>p4</p> </li>
    <li> <p>p5</p> </li>
    <li> <p>p6</p> </li>
</ul>
<p>p9</p>
<p>p8</p>
</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

结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <!-- 避免使用，class，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{ background: #1f23ff; }
        /*ul的最后一个子元素*/
        ul li:last-child{background: chartreuse;}
        /* 选中p1 ：定位到父元素，选择当前的第一个元素
        选择当前 p 元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
        按顺序，如果在 p 元素的父元素 body 下第一行加一个 h1 元素，那就无法选中了*/
        p:nth-child(1){background: brown;}
        /*选中父元素下的 p 元素的第二个
        按类型，即使在父元素 body 下第一行加一个 h1 元素，也能选中 p 元素的第一个元素 */
        p:nth-of-type(1){background: yellow;}
    </style>
</head>
<body>
<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
</ul>
<p>p9</p>
<p>p8</p>
</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

属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            display: block;
            height: 50px;
            width: 50px;
            float:left;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: beige;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性名，属性名=属性值（正则）
        =表示绝对等于
        *=表示包含
        ^=表示以...开头
        $=表示以...结尾
        */
        /*存在id属性的元素  a[]{}*/
        /* a[id]{
             background: red;
         }*/
        /*id=first的元素*/
        /* a[id=first]{
             background: aqua;
         }*/
        /*class中有links元素*/
        /* a[class = ""links item2 first2""]{
             background: orange;
         }*/
        /*a[class*=""links""]{
            background: black ;
        }*/
        /*选中href中以http开头的元素*/
        a[href^="http"]{background: orange;}
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="/adad/faf" class="links item2 first2" >2</a>
    <a href="qwe123" class="links item3 first3" >3</a>
    <a href="eweqe" class="links item4 first4" >4</a>
    <a href="rrrrr" class="links item5 first5" >5</a>
    <a href="ttt" class="links item6 first6" >6</a>
    <a href="yyy" class="links item7 first7" >7</a>
</p>
</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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

相关阅读:
day6.Vue组件
 [vue3] 菜单动态折叠效果
 Jenkins 自动打包发布 SpringCloud 微服务项目
 Java 面试需要掌握哪些内容？
高校宿舍系统
 电脑硬盘分区软件哪个好用，无损分区软件哪个好
 ExoPlayer架构详解与源码分析（2）——Player
java-php-python-springboot校园服装租赁系统计算机毕业设计
 一步一步带你深入源码看Spring是如何加载XML配置文件的
 【Web项目实战】Cfeng.net基于MinIO的文件服务和支持markdown编辑的笔记服务
原文地址：https://blog.csdn.net/Q1575290554/article/details/125496646