HTML选择器分类
注：图片来源于w3c
1、id选择器（只能唯一、#abc）
2、class选择器（可以重复、.abc）（又称类选择器，属性值可有多个，用空格隔开）
3、通用选择器 *
4、复合选择器
-交集选择器
作用：选择同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n {}
举例：.a.b.c{ }
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头div.abc{ }
-并集选择器（选择器分组）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{ }
举例：h1,span,p{ }
5、关系选择器
- 父元素
- 直接包含子元素的元素叫做父元素，eg: div 元素是 p 元素和 span 元素的父元素，p 元素是 p 所包含的 span 元素的父元素，但 div 并不是 p 中所包含的 span 元素的父元素，因为两者之间隔了一个 p 元素。
- 子元素
- 直接被父元素包含的元素是子元素，eg: p 和 span 是 div 的子元素，p 中的 span 是 p 的子元素，而不是 div 中的子元素，因为 div 和 p 中的 span 是间接 关系，而不是直接关系。
- 祖先元素
- 直接或间接包含后代元素的元素叫做祖先元素
- 一个元素的父元素也是它的祖先元素
- 后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
- 兄弟元素
- 拥有相同父元素的元素是兄弟元素
- 子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
举例：
<div> 我是一个div <p>我是div中的p元素 <span>我是p元素中的span</span> </p> <span>我是div中的span元素</span> <span>我是div中的span元素</span> <span>我是div中的span元素</span> </div>
div > span{
color: orange;
}
效果：
- 后代选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
举例：
div span{
color: brown;
}
效果：
- 兄弟元素选择器
选择下一个兄弟（两元素必须是相邻的）
语法：前一个 + 下一个
选择下边所有的兄弟
语法：兄 ~ 弟
举例： p + span{ color: red; }
效果:
举例： p ~ span{ color: red; }
效果：
注：更多详细内容可查看w3c
6、属性选择器
- [属性名] 选择含有指定属性的元素
举例： [title]{ color:red; }
效果：
- [属性名=属性值] 选择含有指定属性和指定属性值的元素
举例： p[title=abc]{ color:red; }
效果：
- [属性名^=属性值] 选择属性值以指定值开头的元素
举例： p[title^=abc]{ color:red; }
效果：
- [属性名$=属性值] 选择属性值以指定值结尾的元素
举例： p[title$=de]{ color:red; }
效果：
- [属性名*=属性值] 选择属性值中含有某值的元素
举例： p[title*=c]{ color:red; }
效果：
7、伪类选择器
伪类（不存在的类、特殊的类）
- 伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的子元素、鼠标移入的元素
- 伪类一般情况下都是使用 : 开头
:first-child 第一个子元素
:last-child 最后一个子元素
<ul>
<span>span元素</span>
<li>第〇个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
- :not()否定伪类
- 将符合条件的元素从选择器中去除
举例： ul > li:not(:nth-child(3)){ color: red; }
效果：
- a元素的伪类
:link 用来表示没访问过的链接（正常的链接）
:visited 用来表示访问的链接
- 由于隐私原因，所以visited这个伪类只能用来修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击的状态
举例： <a href="www.baidu.com">百度</a>
a:link{ color: green; }
效果：
8、伪元素选择器
伪元素，表示页面中一些特殊的并不真实的存在元素（特殊的位置），伪元素选择器，用于设置指定元素的样式。
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
<p>
在W3School，您将找到所有属性和选择器的完整 CSS 参考手册，包括语法
</p
p::first-line{ color:red; }
效果1:
举例2：
p::before{ content: '我们可以在'; color: green; }
效果2：
9、继承
- 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
- 继承是发生在祖先与后代之间的
- 继承的设计是为了方便我们开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
- 注意：并不是所有的样式都会被继承，比如，背景相关的，布局相关的就不会被继承
