1.CSS选择器常见的有几种?
- id选择器
#name{color:red;} - class选择器
.name{color:red} - 伪类选择器
a:hover{color:red;} - 标签选择器
h1{color:red;} - 派生选择器
.class p{color:red} - 子选择器
.class>p{color:red}
派生选择器和子选择器的区别在于是否为直系子元素。 - 属性选择器
img[alt]{color:red;}：只针对特定的属性更改 - 通用选择器
*{padding:0;margin:0;}（最常用的使用方式，改变浏览器默认布局） - 分组选择器
h1,h2,h3{color:red;}：严格意义上来说它不属于类型，而属于使用方法
2、选择器的优先级是怎样的?
广义上来说：浏览器样式<开发者样式<用户自设样式<!important
狭义上来说：优先级判断有一个权值分布，id选择器100分，class选择器10分，标签选择器1分，如：
#idname .classname p{color:red}权值为100+10+1=111；
.classname p{color:blue}权值为10+1=11;
所以最终p的颜色为红色。
当权值相等时，采用就近原则，即离HTML越近，优先级越高。
3、class 和 id 的使用场景?
id 选择器一般都是在页面布局的时候使用，因为 id 只能用一次；
class 选择器一般都是用在重复多次利用的样式上，一个 class 可以被多个标签使用。
4、使用CSS选择器时为什么要划定适当的命名空间？
于人方便，于己方便，方便阅读与维护。
5、以下选择器分别是什么意思?
#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
1.id="header"的id选择器。
2.class="header"的class选择器。
3.class="header"中一个class="logo"的派生选择器。
4.同时拥有 class="header"与class="mobile" 的 class 选择器。
5.class="header"下的所有p标签与class="header"下所有h3标签的分组选择器。
6.id="header"下class="nav"直系li子标签的子选择器。
7.id="header"下所有链接滑过时的伪类选择器。
6、列出你知道的伪类选择器
- :hover（鼠标滑过的元素）
- :link （未访问的元素）
- :visited（已访问的元素）
- :active（选定的元素）
- :focus（让元素成为焦点）
- :blur(释放焦点)
- :first-child(选择某个元素的第一个子元素)
- :last-child(选择某个元素的最后一个子元素)
- :nth-child()(选择某个元素的一个或多个特定的子元素) ！和一般数据结构从0开始计数不同的是，它是从1开始计数
- :nth-last-child()（选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算）
- :nth-of-type()（选择指定的元素）
- :nth-last-of-type()（选择指定的元素，从元素的最后一个开始计算）
- :first-of-type（选择一个上级元素下的第一个同类子元素）
- :last-of-type（选择一个上级元素的最后一个同类子元素）
- :only-child（选择的元素是它的父元素的唯一一个了元素）
- :only-of-type（选择一个元素是它的上级元素的唯一一个相同类型的子元素）
- :empty（选择的元素里面没有任何内容）
这篇文章详细讲述了CSS3新伪类
7、:first-child和:first-of-type的作用和区别
问题6中已经说明了：
:first-child是匹配当前元素的第一个子元素；
:first-of-type是匹配当前元素同类的第一子元素。
8、运行如下代码，解析下输出样式的原因
item1中第一个元素为aaa,故颜色为红；
item1中一共有两个标签p与h3,p的第一个元素为aaa,h3的第一个元素为bbb,故两者背景色为蓝。
9、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用在块级元素上，让该元素下内链元素水平居中。
10、如果遇到一个属性想知道兼容性，在哪查看?
****本教程版权归Iswine和饥人谷所有，转载须说明来源**
