目录
一、CSS简述
二、CSS基础语法
1.CSS三种引入方式
2.CSS语法
三、选择器
1.基本选择器
(1)通配选择器
(2)标签选择器
(3)ID选择器
(4)类选择器
(5)属性选择器
2.进阶选择器
(1)后代选择器
(2)子代选择器
(3)同级选择器
(4)相邻兄弟选择器
(5)伪类选择器
(6)伪元素
PS:子代选择器和后代选择器的区别
3.选择器分组
4.选择器优先级
一、CSS简述
CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的 计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框 的样式，调整模块的间距等。
CSS作用：简单来说：就是通过编码方式，对Html页面的各种标签元素进行样式控制。
二、CSS基础语法
1.CSS三种引入方式
- 外部样式表(.css文档中定义,通过link标签引入)
- 内部样式表(在head中添加style标签进行定义)
- 内联样式(在标签的style属性中定义)
三种方式的优先级： 内联样式 > 内部样式表 = 外部样式表 ( 后面两种优先级取决于定义的顺序，越 靠后优先级越高 )
2.CSS语法
CSS 规则由两个主要的部分构成： 1.选择器：指定将要添加样式的 HTML元素的方式。可以使用标签名，class值，id值等多种方式。 2.声明：形式为属性(property):值(value)，用于设置特定元素的属性信息，可以设置多个声明，多个声明之间用英文的分号";"隔开。选择器{
样式: 样式值;//声明样式: 样式值;
}
示例：
/* 给h1标签设置前景色为红色，字体大小14像素 */
h1{ color:red; font-size:14px; }
三、选择器
1.基本选择器
(1)通配选择器
可以匹配页面中的所有标签
*{ 样式: 样式值; }
(2)标签选择器
根据标签名称选中页面中指定的标签。
标签名{ 样式: 样式值; } h1{ color: blue; }
(3)ID选择器
根据标签上的ID属性值来选中指定的标签 。
#ID名{ 样式: 样式值; } #idName{ color: blue; }
(4)类选择器
根据标签上的class属性值来选中所有带此class属性的标签 。
.类名{ 样式: 样式值; } .ClassName{ color: blue; }
(5)属性选择器
根据标签上所携带的属性来选中标签。
/* [属性名]{} 拥有此属性的标签都会设置成对应的样式 */ [属性名="值"]{ 样式: 样式值; } /* [属性名="值"]{} 拥有此属性并且属性的值是对应的值的标签都会设置成对应的样式 */ [属性名="值"]{ 样式: 样式值; }
2.进阶选择器
(1)后代选择器
selector1 selector2 ...selectorN{ 样式: 样式值; }
示例：设置ID为level的标签下面所有h2子元素的样式。
#level h2{
color: red; }
(2)子代选择器
selector1>selector2 ...selectorN{ 样式: 样式值; }
示例：设置ID为level的标签下面的h3子元素的样式。
#level>h3{
color: red; }
(3)同级选择器
selector1~selector2...selectorN{ 样式: 样式值; }
示例：选中class="level"的元素后面所有的同级p标签。
.level~p{ color: green; }
(4)相邻兄弟选择器
selector1+selector2...selectorN{ 样式: 样式值; }
示例：选中所有class="level"的元素后面紧跟着的同级p标签。
.level+p{ background: yellow; }
(5)伪类选择器
selector:hover{ 样式: 样式值; }示例：当鼠标放到所有的 p 标签上时，将 p 标签的样式改变，当鼠标移开时，样式还原。
p : hover { background : lightpink ; color : white ; }
(6)伪元素
在selector元素内部的开头或结尾插入一个伪元素。
selector:before{ 样式: 样式值; } selector:after{ 样式: 样式值; }
示例：在class="level"的元素内部的开头位置和结束位置添加一个伪元素，并且设置伪元素的内容、文字大小、文字粗度。
.level:before{ content: "before伪元素标题"; font-size: 60px; font-weight: bold; } .level::after{ content: "ater伪元素标题"; font-size: 60px; font-weight: bold; }
常见的伪元素：
before：在标签的所有内容的前面添加内容。
after：在标签的所有内容的后面添加内容。
PS:子代选择器和后代选择器的区别
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*使用后代选择器*/
#outerdiv h1{
color: red;
}
/*使用子代选择器*/
#outerdiv>h1{
color: red;
}
</style>
</head>
<body>
<div id="outerdiv">
<h1>外层</h1>
<div>
<h1>内层</h1>
</div>
</div>
</body>
</html>
结果：
后代选择器效果 子代选择器效果
如图所示：#outerdiv是最外层的div，它的子代是一个内容为"外层"的h1和一个div，div的子代为一个内容为"内层"的h1。使用后代选择器#outerdiv h1进行渲染时，它可以渲染自己的子代，也可以渲染子代的子代，即“内层”、“外层”都会被渲染；使用子代选择器#outerdiv>h1进行渲染时，它只能渲染自己的子代，即只有“外层”会被渲染。
3.选择器分组
可以通过使用英文的逗号","将多个选择器连接到一起，同时给多个符合的元素设置统一的样式 例如：如果您想把很多元素显示为灰色，可以使用类似如下的规则。
h6,.level{ background: gray; }
4.选择器优先级
优先级只有在单selector场景中比较才有意义。
优先级排名：
第一名：ID选择器
第二名：属性选择器 / 类选择器 第三名：标签选择器 第四名：通配选择器
