- 兄弟选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
兄弟选择器分
1、相邻兄弟选择器
相邻兄弟:当前元素 后面的 紧紧挨着的元素可称为相邻元素
2、通用兄弟选择器
作用:匹配某元素后所有的并且满足指定选择器的兄弟元素
属性选择器
1、 [id] : 匹配所有 附带 id 属性的元素
[class] : 匹配所有 附带 class属性的元素
div[style] : 匹配所有附带 style 属性的div元素
问题:获取页面所有的文本框元素
input[type="text"]
2、div[id][class] : 即附带 id属性又附带class属性的div元素
3、element[attr=val]
匹配attr属性值为val的element元素
input[type=password]
匹配type属性值为password的input元素
4、element[class~=val]
作用:匹配 class属性值是以空格隔开的单词列表,并且val是单词列 表中的一个单词‘ <div class="lf border"></div>
div[class~=border]
5、element[attr^=val]
匹配 element元素 attr 属性以val开始的元素
6、element[attr$=val]
匹配 的是 attr属性以val作为结尾的element元素
7、element[attr*=val]
attr属性之中 包含 val 字符的 element元素
伪类选择器
1、目标伪类状态
1、:enabled
匹配每个已启用元素
2、:disabled
匹配每个被禁用的元素
以上两个选择器,用于表单元素中
3、:checked
匹配每个被选中的input元素(限于 radio 和 checkbox)
伪元素选择器
1、:first-letter 或 ::first-letter
匹配指定元素的第一个字符
2、:first-line 或 ::first-line
匹配指定元素的首行
3、::selection
: 与 ::的区别
CSS2.0 中 伪元素选择器和伪类选择器全部都使用相同的标识 :
CSS3.0 中 伪类选择器使用 : ,而伪元素选择器一律使用 ::