CSS选择器

css选择器种类

基本选择器:

  • 通配符选择器 *
  • id选择器 #id
  • 类选择器 .className
  • 元素选择器 E
  • 元素后代选择器  E F
  • 子元素选择器 E > F
  • 相邻兄弟元素选择器 E + F
  • 群组选择器  A,B,C

属性选择器:

  • E[attr] :只使用属性名,没有确定任何属性值
  • E[attr="value"]:指定属性名和属性值
    •   button[type="input"]

伪类选择器:

  • 动态伪类:

    • hover
    • active 用户点击元素瞬间的效果
    • focus
  • UI状态伪类:Form元素操作
  • CSS3 nth选择器:
    • first-child
    • last-child
    • nth-child(odd/even/2n+1...)

选择器的优先级别:!importantid > id > class = 伪类选择器 = 属性选择器  > 元素选择器 = 伪元素选择器 > 通配选择器

伪类和伪元素:

  • 伪类:伪类用于向某些选择器添加特殊的效果。 (通过添加一个类就可以达到效果)CSS选择器,优先级的总结-LMLPHP
  • 伪元素:伪元素用于将特殊的效果添加到某些选择器。(通过添加一个元素才能达到效果)CSS选择器,优先级的总结-LMLPHP
  • 伪类伪元素的单双引号:
    ::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)
    双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,比如:first-line、:first-letter、:before、:after等,
    而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
    想让插入的内容出现在其它内容前,使用::before,否者,使用::after;
    在代码顺序上,::after生成的内容也比::before生成的内容靠后。
    如果按堆栈视角,::after生成的内容会在::before生成的内容之上

@import和link引入的区别

区别:

  • 类别:@import属于CSS提供的语法规则,用于提供样式表;link是HTML提供的标签,不仅可以加载样式还可以定义rel连接属性等
  • 加载顺序:@import引入的样式在页面加载完毕以后再被加载;link标签引入的CSS被同时加载
  • 兼容性:@import是css2提供的语法,IE5+可以兼容
  • DOM可控性区别:@import属于css级别,无法用JS操作;link可以通过JS动态的操作

覆盖顺序:

同样优先级的样式,在样式表中出现顺序早的被覆盖。

href和src的区别:

  • href标识超文本链接,指明了网络资源的位置,用在link和a上。建立当前文档和外部资源的联系
  • src表示引用资源,将外部资源替换当前元素用在img,script,iframe上。当解析时页面下载和解析会暂停,直到浏览器接受、编译执行完。

  

05-26 17:28