HTML+CSS笔记 (6.CSS选择器)

选择器

元素选择器

根据标签名来选中指定的元素
语法：标签名｛｝
例子：P{} h1{}

1
2
3
4
5
6
7
<style>
p{
color :red;

}
</style>

id选择器

根据元素ID来选中指定的元素
(ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。)
语法： #id属性值｛｝
例子：#box｛｝ #red｛｝

1
2
3
4
5
6
7
8
9
10
<head>
<style>
#red{
    color:red;
}
</style>>
</head>
<body>
<p id="red">这是一段文字</p>
</body>

class选择器（类选择器）

根据class属性来选中指定的元素组
class是一个html的标签属性，和ID相似，但是它可以重复。可以同时为一个元素指定多个class元素。
可以解决拿ID选择器不好给多个元素指定样式的弊端，
可以通过class给元素分组
语法： .class属性值

1
2
3
4
5
6
7
8
9
10
11

<style>
.red{
        color:red;
    }
</style>>
</head>
<body>
<p class="red">这是一段文字</p>
<p class="red">这是一段文字</p>
</body>

统配选择器

选中页面里所有元素
语法：*

1
2
3
*{
    color:red;
}

复合选择器

交集选择器：
作用：选中复合多个条件的元素
语法：选择器1选择器2选择器3选择器N｛｝
注意点：如果有元素选择器，必须使用元素选择器开头

1
2
3
4
5
6
7
8
9
10
11
<head>
<style>
    div.red{
        color:red;
    }
</style>
</head>
<body>
    <div class="red">这里是div</div>
    <P class="red">这里是P标签</P>
</body>

并集选择器

同时选中多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器N｛｝
例子：#bi,h1,p,div{}

1
2
3
4
5
6
7
8
9
10
11
<head>
<style>
    div，p{
        color:red;
    }
</style>
</head>
<body>
    <div class="red">这里是div</div>
    <P class="red">这里是P标签</P>
</body>

关系选择器

关系描述

父元素：
-直接包含子元素的元素叫父元素
子元素：
—直接被父元素包含的元素叫子元素
祖先元素：
-直接或间接包含后代元素的元素叫祖先元素
-一个元素的父元素也是它的祖先元素
后代元素
-直接或间接被祖先元素包含的元素叫后代元素
-一个元素的子元素也是它的后代元素
兄弟元素
-拥有相同父元素的元素是兄弟元素

子元素选择器：

选中指定父元素的子元素
语法：父元素>子元素

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
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        为div的子元素设置一个字体颜色红色
        子元素选择器：选中指定父元素的子元素
        语法：父元素>子元素
        */
        div.box>span{
            color: crimson;
        }
    </style>
</head>
<body>
   
    <div class="box">
        这里是div
        <P >
            这里是div里的P标签
            <span>这里是p里的span标签</span>
        </P>
        <span>这里是div里的span标签</span>
    </div>
    <div>
        这里是div
        
        <span>这里是第一个div外的span标签</span>
    </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
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
         后代元素选择器：
         选中指定元素的指定后代元素        
         语法：祖先 （空格）后代
         */
         div span{
             color: crimson;
         }
    </style>
</head>
<body>
  
    <div class="box">
        这里是div
        <P >
            这里是div里的P标签
            <span>这里是p里的span标签</span>
        </P>
        <span>这里是div里的span标签</span>
    </div>
    <div>
        这里是div
        
        <span>这里是第一个div外的span标签</span>
    </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
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /*
          选择下一个兄弟
          语法：前一个+下一个
          */
          p+span{
              color: crimson;
          }
          /*
          选择下方所有的兄弟
          语法：兄~弟 
           */
           P~span{color: crimson;}
    </style>
</head>
<body>
    <div class="box">
        这里是div
        <P >
            这里是div里的P标签
            <span>这里是p里的span标签</span>
        </P>
        <span>这里是div里的span标签</span>
    </div>
    <div>
        这里是div
        <span>这里是第一个div外的span标签</span>
    </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
30
31
32
33
34
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        [属性名]选择含有指定属性的元素
        [属性名=属性值]选择含有指定属性值的元素
        [属性名^=属性值]选择属性值以指定属性值开头的元素
        [属性名$=属性值]选择属性值以指定属性值结尾的元素
        [属性名*=属性值]选择属性值含有指定属性值的元素
         */
        p[title]{
            color: crimson;
        }
        p[title=abc]{
            color: crimson;
        }
        p[title^=abc]{
            color: crimson;
        }
    </style>
</head>
<body>
    <h1 title="abc">将进酒</h1>
    <p title="abcde">君不见黄河之水天上来，奔流到海不复回 </p>
	<p title="deabc">君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
	<p>人生得意须尽欢，莫使金樽空对月。</p>
	<p>天生我材必有用，千金散尽还复来。</p>
</body>
</html>

伪类选择器

伪类：不存在的类，特殊的类。用来描述元素的特殊状态。比如：第一个子元素，被点击的元素，鼠标处在上面的元素。
伪类一般以：开头

常用的伪类选择器

第一个子元素 ：first-child
最后一个子元素：last-child
第n个子元素:nth-child(n)
n=n是选中除第零个元素之外的所有元素
n=2n或n=even表示偶数元素
n=2n+1或n=odd表示奇数元素
以上几个伪类都是根据所有元素的顺序排列的
:first-of-type
:last-of-type
:nth-of-type()
这几个和上面三个功能相似，但是是根据同类一元素的顺序进行排列的

否定伪类选择器

:not()去除满足条件的元素
示例：

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
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将ul里第一个li设为红色 */
        /* 第一个子元素 ：first-child*/
        ul>li:first-child{
            color: brown;
        }
        /* 最后一个子元素：last-child */
        ul>li:last-child{
            color: red;
        }
        /* 
        第n个子元素:nth-child(n) 
        n=n是选中除第零个元素之外的所有元素
        n=2n或n=even表示偶数元素
        n=2n+1或n=odd表示奇数元素        */
        ul>li:nth-child(1){
            color: red;
        }
        /* 以上几个伪类都是根据所有元素的顺序排列的 */
        :first-of-type
        :last-of-type
        :nth-of-type()
        /* 这几个和上面三个功能相似，但是是根据同类一元素的顺序进行排列的 */
         /* 否定伪类选择器 */
        ul>li:not(:nth-child(3)){
            color: seagreen;
        }
    </style> 
</head>
<body>
    <ul>
        <span>第一个span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>
a元素的伪类（超链接）

超链接可以分为特殊状态：
1.访问过的超链接
2.没有访问过的超链接
：link 表示没有访问过的链接（正常的链接） （a独有）
:visited表示是访问过的链接 （a独有）
由于隐私原因，这个伪类只能修改链接的颜色，不能修改其他字体大小等属性
：hover表示鼠标移入的状态
:active表示鼠标点击

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
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       a:link{
           color: seagreen;
       }
       /* :link表示没访问过的链接 */
       a:visited{
           color: sienna;
       }
       /* :visited表示是访问过的链接 
       由于隐私原因，这个伪类只能修改链接的颜色，不能修改其他字体大小等属性*/
       /* ：hover表示鼠标移入的状态 */
       a:hover{
           color: skyblue;
           font-size: 50px;
       }
       /* :active表示鼠标点击 */
       a:active{
           color: springgreen;
       }
    </style>
</head>
<body>
    <a href="http://www.baibu.com">baidu（访问过）</a>
    <br>
    <a href="http://www.baidu123.com">baidu123（没访问过）</a>
</body>
</html>

伪元素

伪元素：不真实存在的元素，特殊的位置的元素。
伪元素使用::开头
::first-letter表示第一个字母（字符）
::first-line表示第一行
::selection表示选中的文本

::before表示元素开始的位置
::after表示元素结束的位置
–>必须配合属性content来使用
这两个应用很多，是重点内容
例子：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        P{
            font-size: 20px;
        }
        /* ::first-letter表示第一个字母（字符） */
        p::first-letter{
            font-size: 50px;
        }
        /* ::first-line表示第一行 */
        p::first-line{
            font-size: 50px;
        }
        /* p::selection表示选中的文本 */
        p::selection{
            background-color: springgreen;
        }
        div::before{
            content: "123";
            color: tan;
        }
        div::after{
            content: "hh";
            color: blue;
        }
    </style>
</head>
<body>
    <div>hello ,how are you.</div>
    <p>这是一个段落</p>
</body>
</html>
计算机及嵌入式软件 > 计算机前端 > HTML+CSS
#HTML+CSS
HTML+CSS笔记 (6.CSS选择器)
https://www.duruofu.xyz/posts/23785/
作者
DuRuofu
发布于
2023年6月6日
更新于
2025年1月10日
许可协议