掌握常见 CSS 选择器的用法
对选择器优先级有一定认识
学习建议
从学 CSS 开始，课程视频里的代码需要边听、边暂停、边跟着写。
问答
一、CSS选择器常见的有几种?
- 基础选择器
- 通用元素选择器
*{} - id选择器
#id-selecter{} - 类选择器
.class-selecter{} - 标签选择器
p{}
- 组合选择器(E F为元素)
- 多元素选择器E,F
- 后代选择器E F
- 子元素选择器E>F
- 直接相邻选择器E+F
- 普通相邻选择器（弟弟选择器）E~F
- id和class选择器连写.class1.class2
- 属性选择器(以某个属性作为选择依据)
如input[type="button"] - 伪类选择器
- .box>h1:nth-child(n){}看*box下第n个元素是不是匹配到h1，匹配到则选择到。
- E:first-child{}同上需要校验第一个元素是否匹配E
- E:nth-last-child(n){}同上需要校验倒数第n个元素是否匹配E
- E:last-child{}同上需要检验最后一个元素是否匹配到E
- .box>h1:nth-of-type(n){} *box下面第n个h1被选中。
- E:nth-last-of-type(n){}直接选中下面第n个E
- .box>h1:first-of-type{}*box下面第1个h1被选中
- E:last-of-type{}下面第1个E被选中
- E:active
- 伪元素选择器
- E::after 在E元素之后插入生成的内容
- E::before 在E元素之前插入生成的内容
二、选择器的优先级是怎样的?
- 在属性后面使用
!important会覆盖页面内任何位置定义的元素样式 - 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
简易看css语句优先级方案
三、class 和 id 的使用场景?
- 单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。
- id 选择符为什么要少用，它有有什么局限性？
单一使用的样式用id，需要程序、js动态控制的样式用id，id在页面只能使用一次！提供少用id，因为id可能和页面嵌的程序冲突（比如名称相同等）！
在水依方
四、使用CSS选择器时要划定适当的命名空间的原因
- 为了更好的匹配我们特定需要匹配的元素，只对匹配的元素生效，保证代码样式在合理的控制内不出现不必要的错误。
- 在团队合作中提供良好的代码阅读，能够更好的合作，同时避免选择器命名的混乱，拥有更好代码维护性。
- 在产品迭代中，给新的功能提供空间。
五、以下选择器分别是什么意思?
0_1478571455921_upload-b839c562-3258-47fd-9c3e-35bf2636c8af
- id="header"
- class="header"
- class="header"内的class="logo"
- class里有"header mobile"这俩就被选择。
- class="header"里面的所有p标签和h3标签
- id="header"里面的class="nav"的子代li标签
- 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。
- 可以直接用数值：比如2
- 可以用奇数（odd）偶数(even)
- 可以用公式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
网友评论