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。它会覆盖页面内任何位置定义的元素样式；
- 第一 html文档中的
style样式； - 第二级 id选择器；
- 第三级 属性选择器、class类选择器、伪类选择器；
- 第四级 标签选择器；
- 通用选择器。
<style type="text/css">
*{
color: green;
}
p{
color: yellow;
}
.one{
color: blue;
}
#one{
color: red;
}
</style>
</head>
<body>
<h1>这不是演习</h1>
<div id="one" class="one">
这不是演习
</div>
<p class="one" name="nuanluo">这不是演习</p>
</body>
效果展示：
task8-1.PNG
而同优先级的选择器后出现的会覆盖先前的,比如下段代码：
<style type="text/css">
[name]{
color: red;
}
.one{
color: green;
}
</style>
</head>
<body>
<h2 class="one" name="biaoti">这不是演习</h2>
</body>
显示字体为绿色，而要是[name]{color: red;}在下面，那么字体为红色；如果[name]{color: red;}改为这样写p[name]{color: red;}，那么字体为红色，这是因为在属性[name]前有加了个p标签，这涉及到了选择器的优先级的算法。
（优先级的优先级和各选择器的个数有关。12）
3. class和id的使用场景？
- id： id有标识的功能，同一个ID在一个页面中只能出现一次，可以利用ID进行页面的宏观布局；
- class：class具有重复性，用于结构内部样式的设计。
4. 使用CSS选择器时为什么要划定适当的命名空间？
5. 以下选择器分别是什么意思？
#header{ /*id="header"的元素*/
}
.header{ /*class="header"的元素*/
}
.header .logo{ /*class="header"中的所有class="logo"的元素*/
}
.header.mobile{ /*class="header"且class="mobile"的元素*/
}
.header p, .header h3{ /*class="header"的p元素和h3元素*/
}
#header .nav>li{ /*id="header"中class="nav"的直接子元素li*/
}
#header a:hover{ /*鼠标置于id="header"的链接*/
}
6. 列出你知道的伪类选择器。
a:linka:visitedE:hovera:activeE:first-childE:first-of-typeE:nth-child()
7. ：first-child和:first-of-type的作用和区别
-
:first-child：表示某父元素的第一个子元素。
<div>
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<span>第三个子元素</span>
<span>第四个子元素</span>
</div>```
- `p:first-child` 匹配到的是p元素，因为p元素是div的第一个子元素；
``` <style>
p:first-child{
background-color: red;
}
</style>
</head>
<body>
<div>
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<span>第三个子元素</span>
<span>第四个子元素</span>
</div>
</body> ```
- `h1:first-child`匹配不到任何元素，因为在这里h1不是div的第一个子元素。
``` <style>
h1:first-child{
background-color: red;
}
</style>```
* `:first-of-type`：表示某父元素下相同类型的第一个元素。
- ` p:first-of-type`：匹配到的是p元素，因为p是div的类型为p的子元素中的第一个；
- `h1:first-of-type`：匹配到的是h1元素，因为h1是div中类型为h1的子元素的第一个；
- `span:first-of-type`：匹配到的是第三个子元素span，这里div有两个为span的子元素，匹配到的是第一个。[引用](http://www.cnblogs.com/2050/p/3569509.html)
<style>
p:first-of-type{
background-color: red;
}
h1:first-of-type{
background-color: green;
}
span:first-of-type{
background-color: blue;
}
</style>
###8. `text-align: center`的作用是什么，作用在什么元素上？能让什么元素水平居中？
`text-aligen: center`属性作用在块元素上，能让块元素里的**文本**、**行内元素**、**图片**居中显示。
<style type="text/css">
.father{
border: 1px solid red;
width: 500px;
height: 300px;
text-align: right;
margin: 0 auto;
}
.son {
text-align: center;
}
</style>
</head>
<body>
<div class="father">
很长的一段文字很长很长的，没了!（图片格式被换了）
<p><a href="#" class="inline">这样挺好</a>我继承了父元素</p>
<p class="son"><a href="#" class="inline">我要做自己</a>我自己设置了对齐方式，不再继承</p>
</div>
</body>
效果图：
###9. 如果遇到一个属性想知道兼容性，在哪查看？
[can I use](http://caniuse.com/)
**本文著作权归作者所有；如需转载请联系饥人谷，并注明原文出处。**
网友评论