Geeks_Z の Blog Geeks_Z の Blog
首页
  • 学习笔记

    • 《HTML》
    • 《CSS》
    • 《JavaWeb》
    • 《Vue》
  • 后端文章

    • Linux
    • Maven
    • 汇编语言
    • 软件工程
    • 计算机网络概述
    • Conda
    • Pip
    • Shell
    • SSH
    • Mac快捷键
    • Zotero
  • 学习笔记

    • 《数据结构与算法》
    • 《算法设计与分析》
    • 《Spring》
    • 《SpringMVC》
    • 《SpringBoot》
    • 《SpringCloud》
    • 《Nginx》
  • 深度学习文章
  • 学习笔记

    • 《PyTorch》
    • 《ReinforementLearning》
    • 《MetaLearning》
  • 学习笔记

    • 《高等数学》
    • 《线性代数》
    • 《概率论与数理统计》
  • 增量学习
  • 哈希学习
GitHub (opens new window)

Geeks_Z

AI小学生
首页
  • 学习笔记

    • 《HTML》
    • 《CSS》
    • 《JavaWeb》
    • 《Vue》
  • 后端文章

    • Linux
    • Maven
    • 汇编语言
    • 软件工程
    • 计算机网络概述
    • Conda
    • Pip
    • Shell
    • SSH
    • Mac快捷键
    • Zotero
  • 学习笔记

    • 《数据结构与算法》
    • 《算法设计与分析》
    • 《Spring》
    • 《SpringMVC》
    • 《SpringBoot》
    • 《SpringCloud》
    • 《Nginx》
  • 深度学习文章
  • 学习笔记

    • 《PyTorch》
    • 《ReinforementLearning》
    • 《MetaLearning》
  • 学习笔记

    • 《高等数学》
    • 《线性代数》
    • 《概率论与数理统计》
  • 增量学习
  • 哈希学习
GitHub (opens new window)
  • Linux

  • Java

  • 微服务笔记

  • MySQL

  • Nginx

  • HTML

  • CSS

    • CSS基本介绍
    • 字体样式
    • 选择器
      • 选择器(重点)
        • 标签选择器(元素选择器)
        • 类选择器
        • 类选择器
        • CSS 标签命名规范
        • 课堂案例--Google 的 logo
        • 多类名选择器
        • id 选择器
        • id 选择器和类选择器的区别
        • 通配符选择器
        • 伪类选择器
        • 链接伪类选择器
        • 结构(位置)伪类选择器
        • 目标伪类选择器
    • CSS 外观属性
    • 引入 CSS 样式表
    • CSS 复合选择器
    • CSS 背景(background)
    • CSS 三大特性
    • 盒子模型(CSS 重点)
    • Flex布局
  • JavaWeb

  • Vue

  • Git

  • 开发规范

  • SpringCloud微服务权限系统

  • bug

  • Software

  • ProgramNotes
  • CSS
Geeks_Z
2022-10-26
目录
选择器(重点)
标签选择器(元素选择器)
类选择器
类选择器
CSS 标签命名规范
课堂案例--Google 的 logo
多类名选择器
id 选择器
id 选择器和类选择器的区别
通配符选择器
伪类选择器
链接伪类选择器
结构(位置)伪类选择器
目标伪类选择器

选择器

选择器(重点)

要想将 CSS 样式应用于特定的 HTML 元素,首先需要找到该目标元素。在 CSS 中,执行该任务的样式规则被称为 选择器 (选择符)。

标签选择器(元素选择器)

标签选择器是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。其基本语法格式如下:

  • 标签名 { 属性1:属性值1 ; 属性2:属性值2 ; 属性3:属性值3; }
  • 或者 元素名 { 属性1:属性值1 ; 属性2:属性值2 ; 属性3:属性值3; }

标签选择器最大的有点是:能快速为页面中同类型的标签统一样式,同时这也是它的缺点——不能设计差异化样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V9-字体大小</title>
    <style>
        p {
            /*以标签分类的称为 标签选择器*/
            font: italic normal 14px "Microsoft YaHei";
            color: red;
        }

        div {
            /*以标签分类的称为 标签选择器*/
            font: 16px "Microsoft YaHei";
            color: yellowgreen;
        }

    </style>
</head>
<body>
<p>白展堂</p>
<p>吕秀才</p>
<p>李大嘴</p>

<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
27
28
29
30

类选择器

类选择器

类选择器使用 英文句号 . 进行标识,后面紧跟类名,其基本语法格式为:.类名 { 属性1:属性值1 ; 属性2:属性值2 ; 属性3:属性值3; }

标签调用时使用 class=“类名” 即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V9-字体大小</title>
    <style>
        .mingren {
            /*声明类样式*/
            color: red;
        }

        .zuozhu {
            color: yellowgreen;
        }

        .kakaxi {
            font-size: 24px;
        }
    </style>
</head>
<body>

<!--调用类样式-->
<div class="mingren">鸣人</div>
<div class="zuozhu">佐助</div>
<div class="kakaxi">卡卡西</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

显示效果:

CSS 标签命名规范

  • 长名称或词组可以使用**中横线 - **为选择器命名
  • 不建议使用下划线 _ 来命名 CSS 选择器。(可能会有兼容问题)
  • 不要用纯数字或者中文命名

课堂案例--Google 的 logo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V9-字体大小</title>
    <style>
        span {
            font-size: 26px;
        }

        .c-blue {
            color: blue;
        }

        .c-red {
            color: red;
        }

        .c-orange {
            color: orange;
        }

        .c-green {
            color: green;
        }
    </style>
</head>
<body>
<span class="c-blue">G</span>
<span class="c-red">o</span>
<span class="c-orange">o</span>
<span class="c-blue">g</span>
<span class="c-green">l</span>
<span class="c-red">e</span>
</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

显示效果如下:

多类名选择器

<div class="cover J-cover"></div>,像这种一个 HTML 元素引用多个类名的情况,就称为多类名选择器。多用于负责的页面布局中。

  • 样式显示效果与 HTML 元素中类名的先后顺序无关,而是取决于 CSS 样式书写的上下顺序
  • 各类名之间使用空格分开。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V9-字体大小</title>
    <style>
        .font-14 {
            font-size: 14px;
        }

        .font-20 {
            font-size: 20px;
        }

        .c-red {
            color: red;
        }
    </style>
</head>
<body>
<!--多类名选择器,使用空格分割-->
<div class="font-14 c-red">亚瑟</div>
<!--在 style 中 font-20 后定义,所以,最终 font-20 生效-->
<div class="font-14 font-20">刘备</div>
<!--在 style 中 font-20 后定义,所以,font-20 为最终效果-->
<div class="font-20 font-14 c-red">安其拉</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

显示效果:

id 选择器

id 选择器 使用 # 进行标识,后面紧跟 id 名称 , 其基本语法为:#id 名 { 属性1:属性值1 ; 属性2:属性值2; 属性3:属性值3; }

  • 该语法中,id 名 即为 HTML 元素的 id 属性值,
  • 大多数 HTML 元素都可以定义 id 属性,
  • 元素的 id 是唯一的,只能对应文档中某一个具体的元素

id 选择器的用法基本等同于类选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V9-字体大小</title>
    <style>
        <!--标签选择器,以#开头-- >
        #big-bear {
            font-size: 14px;
            color: red;
        }

        .small-bear {
            color: green;
            font-size: 20px;
        }

    </style>
</head>
<body>
<div id="big-bear">熊大</div>
<div class="small-bear">熊二</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

显示效果:

id 选择器和类选择器的区别

  • 类选择器 好比人的名字,是可以重复使用的——重名
  • id选择器 好比人的身份证号,是不会重复的,一人只能有一个身份证号

通配符选择器

通配符选择器用 * 表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素,其基本语法如下:

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V9-字体大小</title>
    <style>
        * {
            /*通配符选择器会改变全部,慎用*/
            font-size: 14px;
            color: red;
        }
    </style>
</head>
<body>
<p>熊大</p>
<div>熊二</div>
<span>光头强</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第 N 个元素。

伪类选择器使用 冒号 : 标识,比如::link { }

链接伪类选择器

  • :link 未访问的链接
  • :visited 已经访问过的链接
  • :hover 鼠标移到链接上
  • :active 点击未松开时

书写的时候,他们的顺序不能颠倒,按照 lvha 顺序书写——记忆法:lv 的包包就是 hao

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V21-链接伪类选择器</title>
    <style>
        a:link {
            font-size: 14px;
            color: red;
        }

        a:visited {
            font-size: 18px;
            color: gray;
        }

        a:hover {
            font-size: 22px;
            color: green;
        }

        a:active {
            font-size: 24px;
            color: blue;
        }
    </style>
</head>
<body>
链接伪类选择器
<div><a href="#"> 点击有惊喜1</a></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

显示效果1:未点击时的状态:

显示效果2:点击之后的状态:

实际使用时,下面这种用法更多:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V21-链接伪类选择器</title>
    <style>
        a {
            /*标签选择器*/
            font-weight: 700;
            font-size: 22px;
            color: gray;
        }

        a:hover {
            /*链接伪类选择器*/
            color: red;
        }
    </style>
</head>
<body>
链接伪类选择器
<div><a href="#"> 点击有惊喜1</a></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

结构(位置)伪类选择器

结构伪类选择器是 CSS3 中增加的内容。

  • :first-child 选取属于其父元素的首个子元素的指定选择器
  • :last-child 选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n) 选取属于其父元素第 N 个子元素的选择器,不关心子元素的类型
  • :nth-last-child(n) 选取属于其父元素的倒数第 N 个子元素,不区分元素的类型
  • 前面两个中的 n 可以是数字、关键词或公式
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>V21-链接伪类选择器</title>
   <style>
       li:first-child {
           color: red;
           font-size: 14px;
       }

       li:last-child {
           color: orange;
           font-size: 24px;
       }

       li:nth-child(3) {
           color: magenta;
           font-size: 18px;
       }

       li:nth-last-child(3) {
           color: blue;
           font-size: 22px;
       }

       li:nth-child(even) {
           /*第偶数个元素的位置伪类选择器,传递 odd 则是选择第奇数个元素*/
           color: green;
           font-size: 20px;
       }

       li:nth-child(7n) {
           /*第8的倍数位置元素的伪类选择器,也可以传递诸如:2n+1 这种表达式*/
           font-size: 20px;
           color: pink;
       }
   </style>
</head>
<body>
<ul>
   <li>第1个子元素</li>
   <li>第2个子元素</li>
   <li>第3个子元素</li>
   <li>第4个子元素</li>
   <li>第5个子元素</li>
   <li>第6个子元素</li>
   <li>第7个子元素</li>
</ul>
</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

显示效果如下:

目标伪类选择器

目标伪类选择器用 :target 表示,可以用于选取当前活动的目标元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V26-目标伪类选择器</title>
    <style>
        :target {
            /*目标选择器,作用于当前被选中的标签*/
            color: red;
        }
    </style>
</head>
<body>
<h4>
    <a href="#p1">标题1 </a>
</h4>
<h4>
    <a href="#p2">标题2 </a>
</h4>
<h4>
    <a href="#p3">标题3 </a>
</h4>
<h4>
    <a href="#p4">标题4 </a>
</h4>
<p id="p1"> 标题1的描述</p>
<p id="p2"> 标题2的描述</p>
<p id="p3"> 标题3的描述</p>
<p id="p4"> 标题4的描述</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

显示效果——初始进入页面的效果:

显示效果——某个内容被选中时的效果:

#CSS
上次更新: 2025/02/26, 08:57:57
字体样式
CSS 外观属性

← 字体样式 CSS 外观属性→

最近更新
01
RAIL
02-26
02
IOCTF
02-25
03
DGM
02-25
更多文章>
Theme by Vdoing | Copyright © 2022-2025 Geeks_Z | MIT License
京公网安备 11010802040735号 | 京ICP备2022029989号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式