1、基本选择器:
1. *——通配符(不建议使用)
2. E——标签(元素),也是我们之前类型选择器
3. . + class名——类选择器
4. # + id名——id选择器
5. 选择器1,选择11器2 —— 群组选择器
2、关系(层级)选择器
1.E F 包含选择器 —— E父元素,F后代元素,满足F是E的后代,而且一定要F元素
2.E>F 满足F是E子代元素(不包括子代的子代元素),E父元素,F是子元素
3.E+F 表示获取到E下一个兄弟元素(F是E的相邻元素),E下一个元素必须是F,F必须为E的相邻元素
4.E~F 表示获取到E后面的所有F兄弟元素
3、动态伪类选择器
1.E:hover —— 给E添加鼠标滑过的样式
2.E: link —— 链接并未被访问的时候的样式(访问之前的)
3.E:visited —— 链接被访问之后的样式
4.E:active —— 鼠标按下,并未跳转的时候样式
5.input:focus —— input 获取焦点时候的样式
4、目标伪类
1.E:target —— E目标元素,给目标元素添加样式
5、语言伪类选择器
1.q:lang(no){
qoutes:"符号" "符号"
}
注意点:要配合<q lang="no"></q>,默认符号是双引号
6、状态伪类选择器
1.E:enabled —— 给可输入的标签添加样式
2.E:disabled —— 给禁用的标签添加样式
3.E:checked —— E被选中的时候添加样式
4.E::selection —— 被选中的样式
7、结构伪类选择器:
1.E F:first-child 代表找到下面F(F要为E的第一个元素),
所有子元素中得第一个,并且要满足为F元素
2.E F:lat-child 代表找到下面F(F要为E的最后一个元素),
所有子元素中的最后一个,并且要满足为F元素
3.E F:nth-child(n) 代表找E下面的第n 元素,并且这个元素要为F
备注:这个n取1之后才会有效果
4.E F:nth-child(2n) 代表找到E下面的子元素为偶数的F元素
5.E F:nth-child(2n-1) 代表找到E下面的子元素奇数的F元素
6.E F:nth-of-type(n) 代表找到E下面指定的F元素的第n个
7.E F:last-of-type 代表找到E下面指定的F元素的最后一个
8.E F:first-of-type 代表找到E下面指定的F元素的第一个元素
9.E F:only-child 代表E下面有且只有一个子元素,并且这个子元素
10.E F:only-of-type 代表E下面同类型的元素只有一个,并且这个元素为F,其他类型的元素可以有多个
11.E F:empty 代表找到E下面子元素内容为空,并且这个子元素为F
注意点:F资源内容不能有空格,有空格相当于字符。
8、否定伪类选择器:
1.E:not(F) 代表找到E中 除了 F以为所有E元素
9、属性选择器:
1.E[attr] 代表找到E元素中拥有attr 这个属性的元素
2.E[attr=val] 代表找到E元素中拥有attr属性 且属性值等于 val
3.E[attr^=val] 代表找到E元素中拥有attr属性 且以val值开头的元素
4.E[attr$=val] 代表找到E元素中拥有attr属性 且以val值结尾的元素
5.E[attr*=val] 代表找到E元素中拥有attr属性 且val值 (任意位置都可以)
10、伪元素选择器:
1.E::after 表示在E下面添加一个最后的子元素
2.E::before 表示在E下面添加第一个的子元素
3.E::first-letter 表示改变E元素中第一个字符 样式
4.E::first-line 表示改变E元素中第一行字符样式