django学习入门系列之第三点《常用选择器概念讲解》

作者：小舞很执着 | 2024-06-22 16:49:14

踩

文章目录

ID选择器
类选择器(用的最多)
标签选择器
属性选择器
后代选择器
往期回顾

注意权重由高到低（ID,类，标签）

ID选择器

使用“#”开头来表示id选择器
id选择器的值和html中某个元素的id值相同
html的元素id不必带#
id是唯一的，不能被多个标签使用

#c1{
    内容
}

<div id='c1'></div>
1
2
3
4
5

类选择器(用的最多)

特点：差异化表示不同的标签，可以让多个标签的都使用同一个标签

类名用“.”开头，标签使用class属性来调用。
一个类可以被多个标签使用，一个标签也能使用多个类。
多个类名要使用空格分割且类名不要使用纯数字，或者中文以及标签名来命名类名

.c1{
    内容
}

<div id='c1'></div>
1
2
3
4
5

标签选择器

特点：能快速将同一类型的标签都选择出来，但是不能差异化选择

div{
    内容
}

<div>xxx</div>


li{
    内容
}

<ul>
	<li>内容</li>
</ul>

# 以此类推
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

属性选择器

属性名
属性名=属性值
属性名^= (以某某开头的)
属性名$=属性值 (以某某结尾的)
属性名*=属性值 (包含某某)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国移动</title>
    <style>
    input[type='text'] {
        border: 1px solid red;
    }

    .v1[xx="456"]{
        color: gold;
    }

    </style>

</head>

<body>

<input type="text">
<input type="text">

<div class="v1" xx="123">测试</div>
<div class="v1" xx="456">测试</div>
<div class="v1" xx="789">测试</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
24
25
26
27
28
29

加一个边框border: 1px solid

后代选择器

后代选择器较为精准格式为==.+自定义标签+空格+需要改变的标签==，如.yy li{ color: aquamarine;}
相当于精确命名来缩小范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国移动</title>
    <style>
        .yy li{
            color: aquamarine;
        }
    </style>
</head>

<body>
<div class="yy">
    <ui>
        <li>日本</li>
        <li>韩国</li>
        <li>非洲</li>
        <li>印度</li>
    </ui>
</div>
<div></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
19
20
21
22
23
24
25
26

关于上面的选择器

多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器
1
2

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/747083