一.基本的CSS选择器:
1.通配符 例:*{...}
2.类别选择器 例:.container{...}
3.ID选择器 例:#div1{.....}
4.群组选择器 例:span,.class,#id{....}
5.并列选择器 例: div.class{.....}
6.子代选择器 例:div span{....}
7.直接子代选择器 例:div>span{....}
二.复杂的CSS选择器
三.内容选择器:
复杂选择器
例子
含义
版本/兼容性
选1 + 选2
div+span{....}
相邻兄弟选择器:选择紧挨的下一个兄弟元素
2/IE6以下不支持
选1~选2
div~span{....}
通用兄弟选择器:选择选1所有的兄弟元素中与选2匹配的元素
3
注意:只匹配选1后的元素,之前的元素匹配不到
[属性名]
[title]
选择具有指定HTML属性的元素
2
[属性名=属性值]
[type=text]
匹配具有指定属性且属性值为指定值的元素
2
[属性名~=属性值]
[type~=text]
匹配具有指定属性且属性值中包含指定的完整的单词的元素(不是单词的不行)
3
[属性名*=属性值]
[class*=str]
匹配具有指定的属性且属性值中包含指定的字母组合(不必是完整的单词)
3
[属性名^=属性名]
[class^=str]
匹配具有指定的属性且属性值以指定的字母开头
3
[属性名$=属性值]
[class$=str]
匹配具有指定的属性且属性值以指定的字母结尾
3
[属性名|=属性值]
匹配具有指定的属性且属性值以指定的完整的单词开头(要么只有它,要么其后有-)
3
:target
:target{}
div:target{}
目标伪类选择器;选定【当前锚点的】目标元素
IE8-不支持
:enabled
:enabled{...}
匹配当前启用的所有表单元素
:disabled
:disabled{...}
匹配当前禁用的所有表单元素
:checked
:checked{...}
匹配当前选中的表单元素
:first-child
span:first-child{}
div :first-child{}
匹配父元素中的第一个子元素(纯文本不算子元素)
:last-child
p:last-child{ }
div :last-child{}
匹配作为父元素中最后一个子元素出现的元素
:only-child
p:only-child{}
匹配作为父元素中唯一子元素出现的元素
:empty
div:empty{display:none;}
匹配没有子元素且没有任何文本内容的元素
:not(选1)
div:not(.strong){}
span:not([class=content])
否定选择器;匹配不被选择器1选定的元素
::selection
::selection{ }
匹配一段文字中被选择部分
选择器1:before{
.....
content:纯文本/图片/计数器;
}
选择器1:after{
....
content:纯文本/图片/计数器;
}
注意:content属性必须配合:before/:after选择器使用。
计数器的使用:
body{
counter-reset:计数器名 初始值 [计数器2名 初始值].... //计数器的初始化,默认值为0
}
p:before{
counter:计数器名;
counter-increment:计数器名 [步增值];
}
复杂的CSS选择器
最新推荐文章于 2022-05-29 19:54:08 发布