- 推荐
- 发现音乐
- 我的音乐
- 下载的音
CSS--选择器
1.基本选择器
1. 标签选择器
标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。
例如：
one
two
three
2.类选择器（ Class selectors ）
类选择器以点 "." 开头，后面紧跟一个类名。类名不允许有空格，与元素中 class 属性的值保持一致。一个元素可以有多个 class 的值，每个值通过空格分割开。类名相同的元素 属于一类元素。
例如：
- Create an HTML document
- Create a CSS style sheet
- Link them all together
3.ID选择器（ID selectors）
ID 选择器以 "#" 开头，后面紧跟一个 ID 名，在一个文档中， ID 值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。
例如：
— "Good morning."
— "Go away!"
4.普遍选择器（Universal selector）
使用 "*” 来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。
例如：
2.层次选择器
1.后代选择器（ descendant selector ）
l 使用 “ ” 隔开两个选择器。例如 “ul li” 表示选择 ul 的后代元素 li ， li 可以为 ul 的直接子元素，也可以为 ul 的孙子元素。
2.子代选择器（child selector）
l 使用 “>” 隔开两个选择器。例如 “ul>li” 表示选择 ul 的直接子代元素 li,ul 的孙子元素 li 无法被选择到。
3.相邻同胞选择器（adjacent sibling selector） 下一个兄弟元素
l 使用 “+” 隔开两个选择器。例如 ".one+*" 表示选择 class 为 "one" 元素的下一个兄弟元素。
4.一般同胞选择器（ general sibling selector）之后所有的兄弟元素
l 使用 “~” 隔开两个选择器。例如 ".one~*" 表示选择 class 为 "one" 元素之后的所有兄元素。
3.多选择器
1. 组合选择器
多个选择器组合使用，使用 “,” 分割。
例如 "div,.one,#tt" 表示选择 div 元素， class 为 one 的元素以及 id 为 tt 的元素
2. 嵌套选择器
多个选择器嵌套使用。例如 "div.one" 表示 class 为 one 的 div 元素。
4.属性选择器
选择具有 attr 属性的元素、无论该属性的值是什么
[attr] 选择有attr属性的值
例：input[value]
[attr=val] 选择具有 attr 属性的、并且 attr 的值为 val 元素
例：input[type=text]
[attr^=val] 选择具有 attr 属性的、并且 attr 的值以 val 开头的元素
例：div[class^=icon]
[attr$=val] 选择具有 attr 属性的、并且 attr 的值以 val 结尾的元素
例：section[class$=data]
[attr*=val] 选择具有 attr 属性的、并且 attr 的值包含 val 的元素
[attr~=val] 选择具有 attr 属性的、并且 attr 的值之一为 val 的元素
5.伪类选择器
伪类以 ":" 开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。
5.1 子代元素相关的伪类选择器
1. :only-child 选中独生子元素
2. :first-child 选中作为别人第一个孩子的元素 li:first-child
3.l :last-child 选中作为别人最后一个孩子的元素 li:last-child
4.l :nth-child(n) n可以是数字，选中作为别人第几个孩子元素的元素
:nth-child(even/odd) 偶数、奇数 n可以是even/odd，选中偶数列，或奇数列
n可以是公式，n从0开始自增
li:nth-child(n) 选择所有孩子
li:nth-child( 2n) 选择所有偶数
5.l :nth-last-child(n) 选中作为别人倒数第几个孩子的元素
6.l :first-of-type 选中作为别人每种类型中的第一个孩子的元素
7.l :last-of-type 选中作为别人每种类型中的最后一个孩子的元素
8.l :nth-of-type(n) 选中作为别人每种类型中的第几个孩子的元素
9.l :nth-last-of-type(n) 选中作为别人每种类型中的倒数第几个孩子的元素
ü 上面的 n 可以为元素的序号，也可以为特殊的字符，比如 odd ， even ， n 从 1 开始
nth-child(n)和nth-of-type(n)的区别
写一个示例
Document
ppppppp
divdiv1
div2div2
ppppppp
divdiv1
div2div2
nth-child会把所有子盒子都排列序号，执行的时候先看 :nth-child(1) ，找到第一个盒子，再看前面的要求 div ,找到的盒子和要求不符，无法显示。
nth-of-type() ,会把指定的元素（div）排列序号，再看第几个孩子。
5.2 元素状态相关伪类选择器
1.:link 未被访问的状态， a 标签
l
2.:visited 已访问过的状态， a 标签
l
3.:hover 鼠标悬停的状态， a 标签，其他标签也可用
l
4.:active 活动的状态， a 标签，其他标签也可用
l
5. :focus 聚焦的状态
l
6. :checked 用户选中的单选按钮和复选按钮
l
7. :default 默认选中的单选按钮和复选按钮
l
8. :enabled 、 :disabled 可用的表单控件、禁用的表单控件
l
9. :valid 、 :invalid 通过验证的、不通过验证的
l
10. :required 、 :optional 必填的和选填的
l
11. :in-range 、 :out-of-range 在范围内的、在范围外的
6.伪元素选择器
伪元素以"::" 开头，用在选择器后，用于选择指定的元素。可创建新标签
1. ::after 选中之后的不存在的节点，可配合 content 属性进行内容填充
2. ::before 选中之前的不存在的节点，可配合 content 属性进行内容填充
befor,after创建一个元素，且属于行内元素，新创建的元素在文档树中找不到，所有叫伪元素。
element::before{} ,before放在element里面的所有孩子最前面。
3. ::first-letter 选中第一个文本字符
4. ::first-line 选中第一行文本
5. ::selection 选中用户在选择的时候的文本
before、after 必须有conent属性，conent填充内容
7.选择器的优先级排序
1. ！important
在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。
2. 行内样式，在style属性里面写的样式。
3. id选择器
4. class选择器
5. 标签选择器
6. 通配符选择器*
7. 浏览器的自定义属性和继承