掌握常见 CSS 选择器的用法
对选择器优先级有一定认识

学习建议

从学 CSS 开始，课程视频里的代码需要边听、边暂停、边跟着写。

问答

一、CSS选择器常见的有几种?

  • 基础选择器
  1. 通用元素选择器*{}
  2. id选择器#id-selecter{}
  3. 类选择器.class-selecter{}
  4. 标签选择器p{}
  • 组合选择器(E F为元素)
  1. 多元素选择器E,F
  2. 后代选择器E F
  3. 子元素选择器E>F
  4. 直接相邻选择器E+F
  5. 普通相邻选择器（弟弟选择器）E~F
  6. id和class选择器连写.class1.class2
  • 属性选择器(以某个属性作为选择依据)
    如input[type="button"]
  • 伪类选择器
  1. .box>h1:nth-child(n){}看*box下第n个元素是不是匹配到h1，匹配到则选择到。
  2. E:first-child{}同上需要校验第一个元素是否匹配E
  3. E:nth-last-child(n){}同上需要校验倒数第n个元素是否匹配E
  4. E:last-child{}同上需要检验最后一个元素是否匹配到E
  5. .box>h1:nth-of-type(n){} *box下面第n个h1被选中。
  6. E:nth-last-of-type(n){}直接选中下面第n个E
  7. .box>h1:first-of-type{}*box下面第1个h1被选中
  8. E:last-of-type{}下面第1个E被选中
  9. E:active
  • 伪元素选择器
  1. E::after 在E元素之后插入生成的内容
  2. E::before 在E元素之前插入生成的内容

二、选择器的优先级是怎样的?

  1. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素标签上的内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器自定义
    简易看css语句优先级方案

三、class 和 id 的使用场景?

  • 单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。
  • id 选择符为什么要少用，它有有什么局限性？
    单一使用的样式用id，需要程序、js动态控制的样式用id，id在页面只能使用一次！提供少用id，因为id可能和页面嵌的程序冲突（比如名称相同等）！
    在水依方

四、使用CSS选择器时要划定适当的命名空间的原因

  • 为了更好的匹配我们特定需要匹配的元素，只对匹配的元素生效，保证代码样式在合理的控制内不出现不必要的错误。
  • 在团队合作中提供良好的代码阅读，能够更好的合作，同时避免选择器命名的混乱，拥有更好代码维护性。
  • 在产品迭代中，给新的功能提供空间。

五、以下选择器分别是什么意思?

0_1478571455921_upload-b839c562-3258-47fd-9c3e-35bf2636c8af
  1. id="header"
  2. class="header"
  3. class="header"内的class="logo"
  4. class里有"header mobile"这俩就被选择。
  5. class="header"里面的所有p标签和h3标签
  6. id="header"里面的class="nav"的子代li标签
  7. id="header"里面的a:hover伪类选择器
    stackoverflow

六、列出你知道的伪类选择器

  • E:first-child 父元素的第一个子元素E。
  • E:root:选择文档的根元素。
  • E:last-child:最后一个子元素E。
  • E:only-child:仅有的一个子元素E。
  • E:only-of-type:只有一种类型的子元素。
  • E:nth-child(n):元素的第n个子元素E。
  1. 可以直接用数值：比如2
  2. 可以用奇数（odd）偶数(even)
  3. 可以用公式3n
  • E:nth-last-child(n):匹配父元素的倒数第n个子元素E。
  • E:first-of-type :匹配同类型中的第一个同级元素E。
  • E:last-of-type:匹配同类型中的最后一个同级元素E。
  • E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
  • E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
  • E:empty :匹配没有任何子元素（包括text节点）的元素E。
  • E:active 向被激活的元素添加样式。
  • E:hover 当鼠标悬浮在元素上方时，向元素添加样式。
  • E:link 向未被访问的链接添加样式
  • E:visited 向已被访问的链接添加样式。
  • E:focus 向拥有键盘输入焦点的元素添加样式。
  • E:lang向带有指定 lang 属性的元素添加样式。
  • E:checked 选择每个被选中的input元素。
  • E:disabled 选择每个禁用的input元素
  • E:enabled 选择每个启用的input元素。
  • E:target 选择当前活动的元素(某个被链接的元素)。
  • E:not(E) 选择E元素之外的每个元素。

七、:first-child和:first-of-type的作用和区别
例子一
例子二

八、运行如下代码，解析下输出样式的原因。
样式

  • first-child使得item1类的第一个标签得到css样式
  • first-of-type使得每种item1类的标签的第一个标签得到css样式。

九、text-align:center的作用是什么，作用在什么元素上？能让什么元素水平居中
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。作用在块级元素上，让行内元素水平居中
MDN解释

十、如果遇到一个属性想知道兼容性，在哪查看?
caniuse.com