一、css简介

css层叠样式集（Cascading Style Sheets），样式表语言，由多个规则集组成。用于设置页面样式，其本质是给页面中的标签设置样式，是前端三大基础之一。

二、规则集

规则集的组成：

• 选择器：声明规则的对象
• 声明：一个单独的规则属性

div{
width:100px;
height:100px;
background-color:orange;
}

//div 选择器
//width 属性名，100px属性值

注意：

1. 每个规则集的属性应该包含在成对的花括号 “{}” 内
2. 每个声明的属性和属性值用英文冒号 “:” 隔开
3. 每个规则集的声明用英文分号 “;” 隔开

三、选择器

• 标签选择器：HTML标签元素

p  div  img  input

• 类选择器：特定的某个class属性，格式“.xx”

.list  .book  .title

• id选择器：特定的某个id属性，格式“#xx”

#room  #door  #food

• 伪类选择器：特定状态下的特定元素，格式“div:xx”

//用于超链接
a:link（超链接点击之前）
a:visited（超链接访问之后）

//用于所有
div:hover（鼠标经过，悬停）
div:active（鼠标点击，激活）
input:foucs（元素获得焦点）

• 属性选择器

//是否存在型
[attr] a[title] 匹配带有attr属性的元素
[attr=value] a[href="https://www.baidu.com"] 匹配带有attr属性，且值为value的元素
[attr~=value] div[class~=size] 匹配带有attr属性，多个属性值中至少有一个值为value的元素
[attr|=value] div[lang|zh] 匹配带有attr属性，值value或以连字符value开头的元素
 
 //字符串匹配型
 [attr^=value] li[class^="box-"] 匹配带有attr属性，值以value开头的所有元素
 [attr$=value] li[class$="-box"] 匹配带有attr属性，值以value结尾的所有元素
 [attr*=value] li[class*="box"] 匹配带有attr属性，值至少出现一次value的所有元素
 [attr operator value i] 匹配属性值时，忽略大小写
 [attr operator value s] 匹配属性值时，区分大小写

• 关系选择器

1、后代选择器：以空格隔开，按嵌套关系顺序书写，匹配最后的选择器 * .school .book 匹配.book*
2、子代选择器：以大于号连接，匹配父级下的某个元素 *.school>.book 匹配.school中的.book*
3、邻接兄弟选择器：以加号连接，匹配父级下的某个相邻元素 *.school+.book*
4、通用兄弟选择器：以~连接，匹配父级下的某个所有元素*.school~.book*