一、基础选择器
基础选择器：标签（元素）选择器，类选择器，id 选择器，通配符选择器。
- 标签选择器：html 代码中的标签，如 <html>、<body>、<h1>、<p>、<img>。
p { color: red; } <p>实验楼</p>
- 类选择器：不能是纯数字，不能是标签名。一般是 . + 对应样式描述
p { color: red; } .bgc{ background-color: yellow; } <p class="bgc">实验楼</p>
- 类选择器：单个元素可以有多个类名(以空格分开多个类名的形式书写)。
p { color: red; } .bgc{ background-color: yellow; } .one{ font-size: 50px; } <p class="bgc one">实验楼</p>
- id选择器：id 是对 HTML 标签中 id 属性进行选择。选择符是 #。
p { color: red; } .bgc{ background-color: yellow; } #height{ height: 50px; } <p class="bgc=" id="height">实验楼</p>
- 通配符选择器：匹配页面中所有的元素。选择符是 *
*{ color: red } <p>你好</p> <span>Hello</span> <div>CSS选择器</div>
二、组合选择器
组合选择器：交集选择器（标签指定式选择器），后代选择器（包含选择器），并集选择器。
- 交集选择器：由两个选择器构成，其中第一个必须是标签选择器，第二个为 class 选择器或 id 选择器。两个选择器之间不能有空格。
p { color: red } p.one{ background-color: skyblue; } <p>好好学习</p> <p class="one">你好</p>
- 后代选择器：用来选择元素或元素组的后代。写法为把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
.one #two p{ color: red; } <div class="one"> <div id="two"> <p>天天向上</p> </div> </div>
- 子代选择器：与后代选择器相比，子元素选择器只能选择作为某个元素的子元素。子选择器使用大于号作为子结合符。
p > strong{ color: red; } <p> <strong>好好学习</strong> </p> <p> <em> <strong>天天向上</strong> </em> </p>
如果改成后代选择器
子代选择器只选择指定标签的第一代子元素或者理解为它的直接后代（只指定儿子，而不管孙子），后代选择器是作用于所有子后代元素（不只儿子，还可以选择到孙子，重孙子等等）。
并集选择器：并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器、id 选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。
p, #one, .two{ color: red; } <p>好好学习</p> <span id='one'>天天向上</span> <strong class='two'>冲冲冲</strong>
三、属性选择器
属性选择器是根据元素的属性及属性值来选择元素。
p{ color: blue; } p[title='one']{ color: red; } p[title~='two']{ color: green; } p[title|='three']{ color: pink; } <p title="five">我爱学习</p> <p title="one">我爱吃饭</p> <p title="one two">我爱睡觉</p> <p title="three-four">我爱打游戏</p>
四、伪类选择器
CSS 伪类用于向某些选择器添加特殊的效果。
- :link 应用于未被访问过的链接。
- :hover 应用于有鼠标指针悬停于其上的元素。
- :active 应用于被激活的元素，如被点击的链接、被按下的按钮等。
- :visited 应用于已经被访问过的链接。
- 注意：顺序 L-V-H-A（link-visited-hover-active）
a { color: red; text-decoration: none; } /*链接访问之后的状态*/ a:visited { color: skyblue; } /*鼠标放到链接上显示的状态*/ a:hover { color: blue; text-decoration: line-through; } /*链接激活的状态*/ a:active { color: pink; } <a href="">好好学习</a>
五、层叠性和继承性
层叠性是指多种 CSS 样式的叠加。
- !important 具有最大优先级。也就是说任何情况下，只要定义了它，它的样式最终就会被应用。
div{ color:red !important } div{ color:skyblue; } <div>天天向上</div>
div{ color:red !important } div{ color:skyblue; } <div>天天向上</div>
- 源码出现次序。
.box2 { font-size: 100px; color: blue; } .box { font-size: 60px; color: pink } <div class='box box2'>天天向上</div>
注意：先定义的 box2 类样式，再定义的 box 类样式，最后显示的是 box 类中的样式。
优先级：
规则一：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。
规则二：important > 内联 > id > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承。
继承性就是指我们写 CSS 样式表的时候子元素会继承父元素的某些样式，比如文本颜色和字号。
.demo { font-size: 20px; color: blue; } <div class="demo"> <span>好好学习</span> </div>
想要设置一个可继承的属性，只需将它应用于父元素即可。
所有字相关的都可以继承，比如：color、text-系列、font-系列、line-系列等。
并不是所有的 CSS 属性都可以继承，例如：边框、外边距、内边距、背景、定位、元素宽高属性就不能继承。
所有盒子相关的属性都不能继承例如：a 标签，h1 标签不会实现继承。
不积跬步无以至千里 不积小流无以成江海
