饥人谷-任务8
2016-08-25 本文已影响0人
饥人谷_罗伟恩
一、CSS选择器常见的有几种?
- 标签选择器
- 属性选择器
- class选择器
- id选择器
- 伪类选择器
- 后代选择器&直接后代选择器
- 分组选择器
- 通配符选择器
二、选择器的优先级是怎样的?
优先级从高到低：
- 在属性后面添加!important
- 作为style属性写在元素标签上的内联样式
- id选择器
- class选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
三、class 和 id 的使用场景?
- class：用于概念上相似的元素，可以出现在同一页面上的多个位置。CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。在结构内部使用，通常用于样式定义。
- id：具有唯一性，用于不同的唯一的元素，在结构外围使用，通常用于页面布局。
四、使用CSS选择器时为什么要划定适当的命名空间？
- 使用语义化的命名便于阅读
- 便于代码的管理与多人协作
- 规范的命名有助于页面渲染
五、以下选择器分别是什么意思?
#header{} /*选中id属性为header的元素*/
.header{} /*选中class属性为header的元素*/
.header .logo{} /*选中class属性为header的元素下的后代中class为logo的元素*/
.header.mobile{} /*选中class属性同时为header和mobile的元素*/
.header p, .header h3{} /*选中class属性为header的元素下的后代为p的元素 和 class属性为header的元素下的后代为h3的元素*/
#header .nav>li{} /*选中id属性为header的元素下的子元素class为nav的元素下的一级子元素为li的元素*/
#header a:hover{} /*选中id属性为header的元素下的子元素a的hover伪类*/
六、列出你知道的伪类选择器
- :first-child
- :last-child
- :hover
- :link
- :active
- :focus
- :visited
- :nth-child(n)
- :nth-of-type(n)
- :first-of-type
- :last-of-type
七、:first-child和:first-of-type的作用和区别
- :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
- :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
八、
代码运行
-
.item1:first-child{color: red;}这个说明选中的child是结构上第一个class为item1的，因此被选中的就只有内容为aa的item1元素，所以aa显示红色； -
.item1:first-of-type{background: blue; }这个说明被选中的child是所有同类型的第一个class为item1的元素，因为p和h3是不同类型，所以会选择不同类型的第一个，因此aa和bb的背景都为蓝色；
九、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- 作用就是使文本水平居中，作用在块级元素上
- 可让文字、图片、a链接等行内元素居中
