1、CSS选择器常见的有几种?
标签选择器：直接将HTML标签作为选择器，a {text-decoration: none;}
id选择器：#nav {}
类选择器：.content {}
群组选择器：body,h2,p,table,th,td {}
后代选择器（派生选择器）：后代选择器可以选择某个元素的后代元素，p em{}
子元素选择器：h1 > em {}
属性(值)选择器：根据元素的属性及属性值选择元素，[title] {}、a[href][title] {}、a[title="hunger"] {}
伪类选择器：a:hover {}、p:last-child {}
2、选择器的优先级是怎样的?
在属性后面使用 !important,会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素标签上的内联样式。
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
总的来说，定位的越精准，优先级就越高。优先级高的样式会覆盖优先级低的
3、class 和 id 的使用场景?
id： id有标识的功能，同一个ID在一个页面中只能出现一次，可以利用ID进行页面的宏观布局；
class：class具有重复性，用于结构内部样式的设计。
4、使用CSS选择器时为什么要划定适当的命名空间？
使用语义化的命名可以使代码容易读懂
便于代码管理和多人协作
浏览器可能会因为不规范的命名产生不同的样式
提高页面渲染速度
5、以下选择器分别是什么意思?
#header{}：选择id名为header中的元素
.header{}：选择header类中的元素
.header .logo{}：选择header类中logo类的元素
.header.mobile{}：选择header类且mobile类的元素
.header p, .header h3{}：选择header类中的p元素和header类中的h3元素
#header .nav>li{}：选择id为header中nav类的直接子元素li
#header a:hover{}：选择id为header的后代中所有a链接是悬停状态的伪类选择器
6、列出你知道的伪类选择器
E:first-child：匹配元素E的第一个子元素
E:hover：匹配鼠标悬停其上的E元素
E:active：匹配鼠标已经其上按下、还没有释放的E元素
E:checked：匹配表单中被选中的radio或checkbox元素
E:nth-child(n)：匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)：匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)：与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)：与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child：匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type：匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
7、：first-child和:first-of-type的作用和区别
:first-child选择某父元素下第一个子元素，也可以说是结构上的第一个子元素，这个子元素可以是同种类型或不同类型的。
:first-of-type选择某父元素下所有相同类型的子元素，其中排第一的那个子元素，也可以说是是父元素下相同类型子元素中的第一个。
Paste_Image.png
Paste_Image.png
8、运行如下代码，解析下输出样式的原因。
QQ截图20160803065255.jpg
first child选择的是父元素的第一个子元素，第一个子元素为p，所以选择aa
first-type-of选择的是各类子元素的第一个，p元素的aa和h3元素的bb是第一个，所以选择aa和bb。
9、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-aligen: center属性作用在块元素上，能让块元素里的文本、行内元素、图片居中显示。
Paste_Image.png
网友评论