HTML5与CSS3基础教程-第9章 定义选择器

《HTML5与CSS3基础教程（第8版）》 第9章读书笔记

• 2020/03/04

• CSS选择器： CSS 选择器参考手册-w3school

• 编写CSS的一个重要的目标 就是让选择器尽可能简单 ，仅保持必要的特殊性。应该充分利用样式会传递给后代的特性（继承）。同时，应该将页面中的通用设计元素挑选出来，编写选择器，从而可以在全站共享。（p152）

• 通配符的局限： 因为匹配范围太广，会让浏览器页面加载变慢，谨慎使用。

• 可用于:first-letter的属性： font, color, background, text-decoration, vertical-align, text-transform, line-height, margin, padding, border, float, clear 。（p162）

  第一个字母前的标点符号，在IE8+，会被当做第一个字母的一部分， 会一起被:first-letter 选择；但是IE8之前会将符号本身当做第一个字母。

• 伪类和伪元素： （p162）

  • 伪元素： 是HTML中并不存在的元素，有::first-line, ::first-letter, ::before和::after，他们会在HTML中插入或改变具体的内容，但又不是HTML元素。
  • 伪类： 应用于一组HTML元素，不需要在HTML代码中用类来标记他们。
  • 关于双冒号： 为了区分伪类和伪元素，伪元素开头使用双冒号代替单冒号（IE8+），双冒号是伪元素语法的推荐写法，使用单冒号也可以识别；但在IE9之前不支持双冒号。

• a标签伪类的顺序问题： （p164）

  由于一个a标签可能会同时处于多种状态（如处于visited和hover状态），且晚出现的规则会覆盖前面的规则。所以，a标签的伪类需要按照link、visited、focus、hover、active （LVFHA）的顺序来定义（LVHFA也可以）。越普通的状态、持续时间越长的状态越靠前。

• 关于属性选择器： （p164 - 167）

  • [attribute~="value"]： 匹配属性值是以空格分隔的多个单词，且其中一个的值为value。
  • [attribute|="value"]： 匹配value、value-或value-开头的属性值。
  • [attribute^="value"]： 匹配任何以value开头的属性值。

  示例： p166