CSS选择器

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、运行如下代码，解析下输出样式的原因

Q8

item1中第一个元素为aaa,故颜色为红；
item1中一共有两个标签p与h3,p的第一个元素为aaa,h3的第一个元素为bbb,故两者背景色为蓝。

9、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

作用在块级元素上，让该元素下内链元素水平居中。

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

can I use

****本教程版权归Iswine和饥人谷所有，转载须说明来源**