css选择器的使用
二、CSS是什么（选择器的使用）
2022-5-9
-
CSS 指层叠样式表 (Cascading Style Sheets)
-
样式定义如何显示 HTML 元素
-
样式通常存储在样式表中
-
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
-
外部样式表可以极大提高工作效率
-
外部样式表通常存储在 CSS 文件中
-
多个样式定义可层叠为一个
1、CSS 的 id 选择器与class选择器
实例：
Document
桃李不言
下自成蹊
作业正在做
这里的是属性
css中书写方式方法：
桃李不言
下自成蹊
桃李不言
区别在于：红色的用的是属性，绿色的用的是CSS样式，称之为行内样式（两个是写在一起的）
2、CSS内部样式
书写方式方法：
css内部样式
桃李不言，下自成蹊
桃李不言，下自成蹊
桃李不言，下自成蹊
以 属性 加 值 的方式去写，注意 是在 head（头部）中写它的h3 的属性
3、CSS外部样式
首先，外部样式要写在外面（相当于重写一个文件，但是使用时要将两个文件关联起来）
做关联的外部样式，是 .css 的后缀
书写方式方法：
外部样式：
/*外部样式*/
h3 {
color: #00ff00;
}
关联：
css内部样式
桃李不言，下自成蹊
使用 link 关联 href 写关联外部样式的路径
这样就可以直接输出 h3 。
4、CSS标签选择器
在 head（头部）中建立一个style 选择是 p 标签，与上面的样式差不多，使用花括号 里面写属性与值
书写的方式方法：
标签选择器
桃李不言
下自成蹊
这里的 使用了 font-size 修改字体的大小
字体单位选择的是 em ，但是还有很多单位 例如：px与rem
px 是像素
em 是相对父元素的字体大小，em是相对单位，没有一个固定的度量值。
rem 是标准的字体大小，根据标准字体大小来调整的。
5、CSS类选择器
类选择器可以被重复使用的
如果说，只想让某行起作用或者某行换一个字体大小、颜色 ，就可以使用类选择器。
书写方式方法：
标签选择器
桃李不言
下自成蹊
++++++++++++此处做明显区分使用++++++++++++
自我理解：在 style 里面做了另一个类，这个类（使用 .XXXX）做完以后在body（身体）中，p标签的后面跟上class（类）的名字即可
Q：为什么类选择器起作用了？
A：因为代码从上向下，从左往右执行，它会把上一个覆盖掉。重复的内容会覆盖，如果其中一个因素改变了，两个不相同他就不会变（个人理解）
6、CSSID选择器
在 style 中使用 # 加 自己的关键字，使用花括号，里面写属性
标签选择器
桃李不言
下自成蹊
++++++++++++此处做明显区分使用++++++++++++
跟面前笔记中 a 标签 锚点（页面导航）差不多
在body（身体）中写 id加关键字就可以使用
注意:id只能唯一的，不能重复，可以为某个元素设置特有的样式
7、CSS后代选择器
使用的是ul无序列表的方式
后代选择器
00
55
Q：为什么输出的是：
A：因为11 22 33 44 都是写进
在了 ul 里面的，注意的是 11 22 在一行是因为 他们是行级元素，33 44 是因为 他们是包含在 ul 标签 里的所有都起作用（个人理解）
8、CSS子选择器
子选择器与后代选择器的区别不大，只是在 ul 后边加了一个大于号
书写：
ul>a{
text-decoration: line-through;
}完整代码：
后代选择器
00
55
输出结果为：
Q：为什么 33 44 不起作用？
A：因为它是子选择器，ul里面有两个a标签，两个li标签，li里面又有一个a标签 ， 对于ul来讲，li是下级 那 ul 的间接性下级基于是 a ，a标签相当于是ul的孙子，ul只能影响到下级也就是 ul里面的 a 标签 对于li里面的a标签是影响不到的，所以33 44 不起作用
9、CSS直接相邻选择器
使用的是 # 加 two+p 的方式，前面的只是一个定位让你去找相邻的那个单位
书写方式：
直接相邻选择
第一
第二
第三
第四
第五
background-color: crimson;这个是背后景色的代码
这里面只有 第三 会起作用，原因是 这个是直接相邻选择器，它会直接选择two相邻的单位，让它起作用，代码的规律，从上往下执行。
10、CSS间接相邻选择器
个人理解：除了自身与自身以上的代码都还起作用。
书写格式就是加了一个 波浪线
间接相邻选择
第一
第二
第三
第四
第五
11、CSS属性选择器选择器
属性选择器：对某一个标签进行 修改 \ 操作 就是通过某一个属性找到的，但是属性是借助标签找的，如果不写标签的话就找不到，但是如果不加标签，只要是这个属性，我就全部起作用。
书写格式：
属性选择器
12、CSS公共选择器
与上面的属性选择器差不多
就是使用一个选择器，实现所有标签的样式
只需要定好一个公共样式，可以让别的标签按照公共样式去显示。
书写方式方法：
公共选择器
这里的输出结果是：
因为他们两个 text 与 passwor 共同使用一个公共的选择器，所以表格的大小一致
但是又分开使用了自己的选择器，导致各自有各自边框的颜色
13、CSS通配符选择器
全局设置，不管在哪个标签里，颜色全部都更改为我设置的这个颜色也可以设置 字体大小 ，简而言之，一个代码改全部
书写方式方法：
通配符选择器
桃李不言
下自成蹊
14、CSS伪类选择器
Q：是什么伪类选择器？
A：伪类选择器用于定义元素的特殊状态。
伪类选择器
我是EVA
我是B站官网
就是标记某种状态，没有访问过是一个颜色，访问之后是一个颜色，鼠标悬停一个颜色，点击链接一个颜色
鼠标悬停各种样式：
鼠标悬浮样式 这里我们要用cursor属性 cursor属性规定要显示的光标的类型(形状)。
-
1、default默认光标(通常是一个箭头)
-
2、auto 默认。浏览器设置的光标。
-
3、crosshair光标呈现为十字线。
-
4、pointer光标呈现为指示链接的指针(-只手)
-
5、move此光标指示某对象可被移动。
-
6、e-resize此光标指示矩形框的边缘可被向右(东)移动。
-
7、ne-resize此光标指示矩形框的边缘可被向上及向右移动(北东)。
-
8、nw-resize此光标指示矩形框的边缘可被向上及向左移动(北西)。
-
9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。
-
10、se-resize此光标指示矩形框的边缘可被向下及向右移动(南东).
-
11、sw-resize此光标指示矩形框的边缘可被向下及向左移动(南西)。
-
12、s-resize此光标指示矩形框的边缘可被向下移动(北西)。
-
13、w-resize此光标指示矩形框的边缘可被向左移动(西)。
-
14、text 此光标指示文本。
-
15、wait 此光标指示程序正忙(通常是一只表或沙漏)。
-
16、help此光标指示可用的帮助(通常是一个问号或-个气球)。
15、CSS伪对象选择器
伪对象选择器：
伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号来定义。伪类和伪对象(元素)的区别
伪类一般反映无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性;
伪元素表示DOM外部的某种文档结构
常用伪元素： 1.E:before/E: : before
2.E:after/E: :after
伪元素是在元素内容的前面或后面定义的，必须要添加content:""这个属性，不然伪元素无法定义成功。
p: :after{ content:"在P标签元素内容前加了内容"; color: red;}
书写方式方法：
伪对象选择器
写了content：
就会变成点击设计的按钮后，会在后面出现 content 里面的内容
例如我这里写的输出后的样子：
背景色是给了content 内容的。
想让它在前面的话就把 after 改为 before
在这里→
改为→
输出结果：