-
CSS三种样式表、样式表优先级、CSS选择器
一、CSS介绍：
1.1、CSS介绍：
CSS，全称是：Cascading Style Sheets，层叠样式表，用于修饰HTML页面的。
CSS编写规则如下所示：
CSS编写的规则分为两部分，分别是：选择器、声明块。
- 声明块，需要使用【{}】大括号包裹，括号里面使用【key: value；】的格式定义属性。
选择器，表示需要对哪个HTML标签添加CSS样式，声明块表示要给选择的标签添加什么样式效果。例如：
h1 { color: blue; font-size: 20px; }- 1
- 2
- 3
- 4
1.2、CSS三种使用方式：
CSS有三种使用方式，这三种方式在不同地方使用，分别是：内联样式、内部样式、外部样式。
（1）内联样式：
内联样式，是直接在需要添加样式的HTML标签上面，使用【style】属性进行样式修饰。如下所示：
<body> <div style="color: blue; font-size: 20px;">内联CSS样式div> body>- 1
- 2
- 3
（2）内部样式：
内部样式，是在head标签之前，使用【
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>title> <style> .box { color: blue; font-size: 20px; } style> head> <body> <div clas="box">内联CSS样式div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
（3）外部样式：
外部样式，就是将所有的CSS代码统一的写到一个CSS文件里面，然后哪个HTML要使用，就通过【】标签引入即可。
<link rel="stylesheet" href="./cssdemo.css">- 1
- 2
rel属性，用于指定是CSS样式表，href属性用于指定CSS文件的路径。
1.3、CSS样式表的优先级：
上面三种CSS样式表的使用方式，是具有优先级，浏览器会使用优先级越高的CSS样式。
CSS样式表优先级：
- 内联样式 > 内部样式 和 外部样式，即：标签上面使用的style属性优先级最高。
- 内部样式 和 外部样式 的优先级，最后读取的样式，优先级更高，即：哪个最后定义，就使用哪个样式。
- 也可以理解为后定义的样式，会覆盖前面定义的样式。
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>title> <link rel="stylesheet" href="./cssdemo.css"> <style> div { color: blue; } style> head> <body> <div clas="box">三种CSS样式表优先级div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
定义的CSS外部样式。
div { color: orange; font-size: 20px; }- 1
- 2
- 3
- 4
二、CSS选择器：
2.1、简单选择器：
（1）元素选择器：
根据HTML标签名称来选择元素。
<style> div { color: blue; } style>- 1
- 2
- 3
- 4
- 5
（2）id选择器：
id选择器，需要给HTML标签添加id属性，然后再通过指定的id名称来选择到这个HTML标签，一个HTML里面，id属性应该是唯一的。
id选择器使用格式：#id名称 {样式属性}
（3）class类别选择器：
class类别选择器，给需要添加样式的标签设置【class】属性，一个HTML页面里面，可以有多个相同名称的class选择器，也就是说，class类别选择器可以被重复使用。class选择器也支持同时设置多个，使用空格隔开即可。
class选择器使用格式：【.class名称 { 样式属性 } 】（注意：使用点号开头）
（4）通用选择器：
通用选择器是对HTML中的所有标签添加CSS样式的，通用选择器使用【*】星号通配符定义。
2.2、组合选择器：
（1）后代选择器：
后代选择器，通过【空格】将每个选择分隔，格式如下所示：
后代选择器：【选择器1 空格 选择器2 空格 选择器3…】
后代选择器，可以将所有指定的后代标签获取到。
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>title> <link rel="stylesheet" href="./cssdemo.css"> <style> /* 获取 div 标签下的所有 p 标签 */ div p { color: red; } style> head> <body> <div> <div> <p>后代选择器p> div> <p>后代选择器p> <p>后代选择器p> 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
（2）子选择器：
子选择器，通过【>】箭头将每个选择分隔，格式如下所示：
子选择器：【选择器1 > 选择器2 > 选择器3…】
子选择器，只能够获取到选择器下直接子元素，不能包含孙子元素。
也就是某个选择器下面，第一层的标签。
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>title> <style> /* 获取 .box 选择器下的直接 p 标签 */ .box > p { color: red; } style> head> <body> <div class="box"> <div> <p>后代选择器p> div> <p>后代选择器p> <p>后代选择器p> 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
（3）相邻兄弟选择器：
相邻兄弟选择器，通过【+】加号将每个选择器分隔，格式如下所示：
相邻兄弟选择器：【选择器1 + 选择器2 + 选择器3…】
待解锁_…
（4）一般兄弟选择器：
一般兄弟选择器，通过【~】波浪线将每个选择器分隔，格式如下所示：
一般兄弟选择器：【选择器1 ~ 选择器2…】
待解锁_…
2.3、伪类选择器：
伪类选择器，是根据元素的状态来选择元素。伪类选择器，是属于类别选择器的一种，它能够根据元素的状态来选择标签元素。
伪类选择器的格式如下：
伪类选择器：【选择器名称：状态 { 属性样式 }】
常见的伪类选择器，有如下几个：
伪类选择器：
- 【:link】这是鼠标点击之前显示的样式。
- 【:visited】这是鼠标点击之后显示的样式。
- 【:hover】这是鼠标悬浮上面显示的样式。
- 【:active】这是鼠标点击的那一刻显示的样式。
上面四个伪类选择器，一般情况下，都是使用在超链接上面，并且四个的使用顺序（l、v、h、a）必须按照上面定义的先后顺序编写，否则在浏览器中可能不能生效。
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>title> <style> a { font-size: 30px; } a:link { color: red; } a:visited { color: blue; } a:hover { color: yellow; } a:active { color: green; } style> head> <body> <a href="#">伪类选择器a> 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
上面四个伪类选择器也可以使用在其他标签上面，但是只能使hover和active生效。
2.4、伪元素选择器：
伪元素选择器，可以在标签的前后添加额外的内容，伪元素选择器的使用格式：
伪元素选择器：【选择器名称::选择器类型 { 样式属性 }】
伪元素选择器有五种：
伪元素选择器：
- 【::first-letter】在第一个字符之前添加样式（样式只能够对第一个字符生效）。
- 【::first-line】在第一行之前添加样式（样式只能够对第一行文本生效）。
- 【::before】在指定元素之前添加样式。
- 【::after】在指定元素之后添加样式。
- 【::selection】在元素选中之后显示的样式（这个只能支持：color、backgroud、cursor、outline四个属性）。
伪元素选择器添加文本内容是通过【content】属性。
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>title> <style> div { width: 100px; height: 100px; border: 2px solid blue; } .box1::first-letter { font-size: 30px; color: red; } .box2::first-line { font-size: 20px; color: green; } .box3::before { content: '***'; color: red; font-size: 20px; } .box4::after { content: 'XXX'; font-size: 30px; color: green; } .box5::selection { color: white; background: black; } style> head> <body> <div class="box1"> 伪元素选择器first-letter div> <div class="box2"> 伪元素选择器first-line div> <div class="box3"> 伪元素选择器before div> <div class="box4"> 伪元素选择器aftre div> <div class="box5"> 伪元素选择器selection 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
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
2.5、结构伪类选择器：
结构伪类选择器，可以从多个元素中，选择指定的元素进行操作，常见的结构伪类选择器有如下这些：
结构伪类选择器：
- :empty：选择内容是空的元素标签的选择器。
- :root：匹配文档的根元素，即：html标签。
- :first-child：选择第一个孩子元素。
- :last-child：选择最后一个孩子元素。
- :nth-child(n)：选择索引值是n的孩子元素，索引值从1开始。
- :nth-child(2n)、:nth-child(even)：选择索引值是偶数的。
- :nth-child(2n-1)、:nth-child(2n+1)、:nth-child(odd)：选择索引值是奇数的。
2.6、目标伪类选择器：
目标伪类选择器，一般是锚点结合使用，语法格式：
- 【XXX:target】：当选择对应目标之后，会触发。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器title> <style> body>div>div { height: 600px; border: 1px solid black; } ul { position: fixed; top: 0; } /* 目标伪类选择器 */ div:target { background-color: lightblue; } style> head> <body> <ul> <li><a href="#one">第一页a>li> <li><a href="#two">第二页a>li> <li><a href="#three">第三页a>li> ul> <div> <div id="one">第一页div> <div id="two">第二页div> <div id="three">第三页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
- 31
- 32
- 33
- 34
2.7、UI元素状态选择器：
UI元素状态选择器，是针对表单元素设置的，有下面四种选择器：
UI元素状态选择器
- :enabled：匹配所有处于可用状态的元素。
- :disabled：匹配所有处于禁用状态的元素。
- :checked：匹配所有选择状态的元素。
- ::selection：匹配所有处于选中、高亮状态的元素（选中文本时候，注意是两个冒号）。
- :focus：获得焦点时候的选择器。
案例代码：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>UI状态选择器title> <style> input:enabled { background-color: lightblue; } input:disabled { background-color: pink; } input[type=checkbox]:checked { /* 去掉默认样式 */ appearance: none; width: 20px; height: 20px; background: red; } input:focus { background-color: aqua; } div::selection { background-color: lightblue; } style> head> <body> <form action="#"> 用户名：<input type="text"> <br> 密码: <input type="text"> <br> 多选<input type="checkbox"> <br> <input type="button" value="提交" disabled> form> <div> BBBBBBBBBBBBBB 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
- 39
2.9、否定伪类选择器：
否定伪类选择器，语法格式：
- 【:not(s)】：对指定的选择器，进行否定选中。
div:not(:first-child) { background-color: aqua; }- 1
- 2
- 3
2.10、属性选择器：
根据元素的属性或者属性值来选择元素。一般情况下，是针对表单、超链接采用属性选择器居多。属性选择器的使用格式：
属性选择器：
- 第一种方式：【[属性名称]】，通过中括号包裹属性名称（查找含有指定属性名称的标签元素）。
- 第二种方式：【[属性名称=“value”]】，通过中括号，包裹属性名称和属性值，查找含有指定属性名称，并且属性值等于给定的标签元素，（这种只能匹配单个属性值）。
- 第三种方式：【[属性名称**~=****“value”]】，查找包含指定属性名称，并且属性值中包含给定值value的标签元素（这种是能够从多个属性值中进行匹配）。**
- 第四种方式：【[属性名称**|=****“value”]】，查找包含指定属性名称，并且属性值是以【value】或者【value-】开头的元素（这种只能匹配单个属性值）。**
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>属性选择器title> <style> input { display: block; margin: 10px; } /* 属性选择器 */ /* 查找所有包含type属性的input标签 */ input[type] { border: 2px solid blue; padding: 5px 10px; } /* 查找所有type属性等于text的input标签 */ input[type='text'] { background-color: lightgray; } /* 查找所有class属性包含box2值的input标签 */ input[class~='box2'] { width: 200px; } /* 查找所有class属性值是以box01开头的input标签 */ input[class|='box'] { width: 300px; } style> head> <body> <input type="text" name="age"> <input type="text" name="uname"> <input type="password" class="box1 box2"> <input type="text" class="box-css01"> 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
运行效果如下：
-
相关阅读:
[C++]vector遍历方式4种
技术资料MF74：将图像插入单元格注释
.NET Core 实现后台任务（定时任务）Longbow.Tasks 组件（三）
牛客多校10 - Yet Another FFT Problem?（鸽巢原理）
XShell快速连接虚拟机(Ubuntu系统)
动态库加载【Linux】
QFile（文件）
2022/7/2做题总结
Linux-定时任务at命令
Linux系统上搭建高可用Kafka集群（使用自带的zookeeper）
- 原文地址：https://blog.csdn.net/qq_45525848/article/details/132790750