CSS选择器(二)
继上篇继续.
结构伪类选择器
- E:empty 标签中内容无子元素(包括文字)时被选中
- E:link 表示
<a>,<area>,<link>元素未被访问时
链接伪类选择器
- E:visited 选取被访问的链接
- E:active 被激活时被选中比如鼠标点击
动态伪类选择器
- E:hover 鼠标上移到E元素时该元素被选中
- E:focus E元素获得焦点时被选中
link ,visited,active,hover 之前一直认为属于一组选择器对a标签进行操作,但实际上细分来看他们分别是三种类型的选择器,通常给a标签四种都加时的顺序按照 l,v,h,a 来 否则会产生覆盖有样式会不生效
目标伪类选择器
- E:target 元素的id与浏览器的uri相同时则被选中
<style>div:target {border: 1px solid}</style>
<body>
<div id="target">
test target
</div>
</body>
这种时候只有访问的地址最后有#target时才会给div添加边框
语言选择器
- E:lang(fr) 选取对应语言的文档
<style>
div:lang(en) {border: 1px solid #ff0000}
div:lang(zh) {border: 1px solid #00ff00}
</style>
<body>
<div lang="en">test</div>
<div lang="zh">测试</div>
</body>
UI元素声明选择器
- E:enabled,E:disabled 选取enabled或者disabled的元素
- E:checked 选取被选中的元素如checkbox
类选择器
- .warning 选中类是warning的元素
ID选择器
#myId选中id是myId的元素
否定伪类选择器
- E:not(s)
<style>
div:not(:first-child) {border: 1px solid}
</style>
<body>
<div >test</div>
<div >测试</div>
<div >测试</div>
<div >测试</div>
</body>
选择器可以结合使用,只有第一个div不被选中
后代选择器
- E F 选中所有E元素下的F元素
子元素选择器
- E > F 选中E 后面的直接子类F元素
相邻兄弟选择器
- E + F 选取离E最近的兄弟F元素
通用兄弟选择器
- E ~ F 选取所有E的兄弟F元素
伪元素补充
- E::first-line 选取第一行
- E::first-letter 选取第一个字母或中文的字
- E::before 在元素前面生成内容
- E::after 在元素后面生成内容
参考:
欢迎关注我的公众号:
