CSS选择器(二)

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 在元素后面生成内容

参考:

www.w3.org

MDN

欢迎关注我的公众号:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页