1.CSS基本选择器
1. 通配选择器 2. 元素选择器 3. 类选择器 4. id 选择器1.1通配选择器
作用：可以选中所有的 HTML 元素。
* {
属性名: 属性值;
}1.2 元素选择器
作用：为页面中 某种元素 统一设置样式。
标签名 {
属性名: 属性值;
}/* 选中所有div元素 */
div {
color: orange;
font-size: 40px;
}
/* 选中所有p元素 */
p {
color: blue;
font-size: 60px;
}1.3 类选择器
作用：根据元素的 class 值，来选中某些元素。（ class 翻译过来有： 种类 、 类别 的含义，所以 class 值，又称：类名。）.类名 {
属性名: 属性值;
}/* 选中所有class值为uname的元素 */
.uname {
color: orange;
}
/* 选中所有class值为age的元素 */
.age {
color: blue;
}注意点：
1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。 2. class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left - menu ，且命名要有意义，做到 “ 见名知意 ” 。 3. 一个元素不能写多个 class 属性，下面是 错误示例：<!-- 该写法错误，元素的属性不能重复，后写的会失效 -->
<h1 class="user" class="vip">你好啊</h1><!-- 该写法正确，class属性，能写多个值 -->
<h1 class="user vip">你好啊</h1>1.4 ID选择器
作用：根据元素的 id 属性值，来 精准的 选中 某个 元素。#id值 {
属性名: 属性值;
}/* 选中id值为student的那个元素 */
#student {
color: red;
font-size: 60px;
}注意：
1.id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空格、区分大小写。
2.一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。
3.一个元素可以同时拥有 id 和 class 属性。2. CSS复合选择器
CSS 选择器整体分类两大类： 一、基本选择器： ①通配选择器 ②元素选择器 ③类选择器 ④ ID 选择器 二、复合选择器： ①交集选择器 ②并集选择器 ③后代选择器 ④子元素选择器 ..... 1. 复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。 2. 复合选择器可以在复杂结构中，快速而准确的选中元素。2.1 交集选择器
作用：选中 同时符合 多个条件的元素。 交集有并且的含义（通俗理解：即......又...... 的意思） 。/* 选中：类名为beauty的p元素 */
p.beauty {
color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}2.2 并集选择器
作用：选中多个选择器对应的元素，又称： 分组选择器 。 所谓并集就是或者的含义（通俗理解：要么......要么...... 的意思） 。/* 选中id为high，或类名为rich，或类名为handsome的元素 */
#high,
.rich,
.handsome {
font-size: 40px;
background-color: skyblue;
width: 200px;
}2.3 HTML元素间的关系
分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。 1. 父元素： 直接 包裹某个元素的元素，就是该元素的父元素。 2. 子元素：被父元素 直接 包含的元素（简记：儿子元素）。 3. 祖先元素：父亲的父亲 ......，一直往外找，都是祖先。( 备注：父元素，也算是祖先元素的一种。) 4. 后代元素：儿子的儿子 ...... ，一直往里找，都是后代。 5. 兄弟元素：具有相同父元素的元素，互为兄弟元素。2.4 后代选择器
作用：选中指定元素中，符合要求的后代元素。/* 选中ul中的所有li */
ul li {
color: red;
}
/* 选中ul中所有li中的a */
ul li a {
color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: blue;
}2.5 子代选择器
作用：选中指定元素中，符合要求的 子 元素（ 儿子元素）。（ 子代选择器又称：子元素选择器、子选择器。 ）/* div中的子代a元素 */
div>a {
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
color: red;
}2.6 兄弟选择器
相邻兄弟选择器：
作用：选中指定元素后，符合条件的 相邻兄弟元素。( 所谓相邻，就是 紧挨着 他的下一个 )/* 选中div后相邻的兄弟p元素 */
div+p {
color:red;
}通用兄弟选择器：
作用：选中指定元素后，符合条件的 所有兄弟 元素。/* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}2.7 属性选择器
作用：选中属性值符合一定要求的元素。 1. [ 属性名 ] 选中 具有 某个属性的元素。 2. [ 属性名 =" 值 "] 选中包含某个属性，且属性值 等于 指定值的元素。 3. [ 属性名 ^=" 值 "] 选中包含某个属性，且属性值以指定的值 开头 的元素。 4. [ 属性名 $=" 值 "] 选中包含某个属性，且属性值以指定的值 结尾 的元素。 5. [ 属性名 *=“ 值 ”] 选择包含某个属性，属性值 包含 指定值的元素。/* 选中具有title属性的元素 */
div[title]{
color:red;
}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{
color:red;
}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{
color:red;
}
/* 选中title属性值以u结尾的元素 */
div[title$="u"]{
color:red;
}
/* 选中title属性值包含g的元素 */
div[title*="g"]{
color:red;
}2.8 伪类选择器
作用：选中特殊状态的元素。 如何理解“伪” ? — 虚假的，不是真的。 如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。 常用的伪类选择器：一、动态伪类：
1. :link 超链接 未被访问 的状态。 2. :visited 超链接 访问过 的状态。 3. :hover 鼠标 悬停 在元素上的状态。 4. :active 元素 激活 的状态。 什么是激活？—— 按下鼠标不松开。 注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。 5. :focus 获取焦点的元素。 表单类元素才能使用 :focus 伪类。 当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获得焦点二、结构伪类
常用的： 1. :first - child 所有兄弟元素中的 第一个 。 2. :last - child 所有兄弟元素中的 最后一个 。 3. :nth - child(n) 所有兄弟元素中的 第 n 个 。 4. :first - of - type 所有 同类型 兄弟元素中的 第一个 。 5. :last - of - type 所有 同类型 兄弟元素中的 最后一个 。 6. :nth - of - type(n) 所有 同类型 兄弟元素中的 第 n 个 。 关于 n 的值： 1. 0 或 不写 ：什么都选不中 —— 几乎不用。 2. n ：选中所有子元素 —— 几乎不用。 3. 1~ 正无穷的整数 ：选中对应序号的子元素。 4. 2n 或 even ：选中序号为偶数的子元素。 5. 2n+1 或 odd ：选中序号为奇数的子元素。 6. - n+3 ：选中的是前 3 个。 不常用的： 1. :nth - last - child(n) 所有兄弟元素中的 倒数第 n 个 。 2. :nth - last - of - type(n) 所有 同类型 兄弟元素中的 倒数第 n 个 。 3. :only - child 选择没有兄弟的元素（独生子女）。 4. :only - of - type 选择没有 同类型 兄弟的元素。 5. :root 根元素。 6. :empty 内容为空元素（空格也算内容）。 三、否定伪类： :not( 选择器 ) 排除满足括号中条件的元素。 四、 UI 伪类： 1. :checked 被选中的复选框或单选按钮。 2. :enable 可用的表单元素（没有 disabled 属性）。 3. :disabled 不可用的表单元素（有 disabled 属性）。 五、目标伪类 :target 选中锚点指向的元素。 六、语言伪类 :lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。