一.CSS选择器常见的有几种?
1.基础选择器
| 选择器 | 含义 |
|---|---|
| * | 选中所有的元素，一般使用的较少，像margin、padding之类的还偶尔可以用一下 |
| #id | id选择器，用来匹配设定了的id的元素，它具有唯一性，一般在页面大的区块就会使用id选择器 |
| .class | 类选择器，用来匹配class包含的特定类的元素，不具有唯一性 |
| element | 适用于一般的标签选择器 |
下面写了一个小的例子：JS bin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器</title>
<style>
*{
margin：0px;
padding: 0px;
}
#logo img{
height: 45px;
}
.nav, .main{
border: 1px solid #ccc
}
p{
color: red;
}
</style>
</head>
<body>
<div id="header">
<a id="logo" href="#"></a>
<ul class="nav">
<li>视频</li>
<li>导师</li>
<li>课件</li>
<li>报名</li>
</ul>
</div>
<div id="content">
<P>最有爱的前端互助社区</p>
<ul class="main">
<li>导师棒棒哒</li>
<li>课程最实用</li>
</ul>
</div>
<div id="footer">欢迎加入我们</div>
</body>
</html>
基础选择器示例
2.组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用,分隔，任何形式的选择器都可以作为其中的一部分，表示同时匹配元素E或者元素F，适用于当某些选择器具有相同的样式，可以简化代码 |
| E F | 后代选择器，中间用空格隔开，用于匹配元素E所有的后代F |
| E>F | 直接子元素选择器，中间用>隔开，用于匹配E的最外层子元素，也就是直接子元素 |
| E+F | 直接相邻选择器，匹配E元素之后的相邻的同级元素F |
| E~F | 普通兄弟选择器，用于匹配E元素之后的所有的同一级的元素F |
还是要动手去实践，看了许久没有搞懂，自己动手写一写豁然开朗，还是要改掉眼高手低的坏毛病。下面给出一个小的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<style>
h3[class="title 1"], p{
color:red;
}
#content a{
text-decoration: none;
}
#header > p{
text-align: center;
}
#content + a{
background: #ff0;
}
#header ~ p{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="header">
<h3 class="title 1">我是标题1</h3>
<h3 class="title 2">我是标题2</h3>
<p class="paragraph 1">我是段落1</p>
<div>
<p>我是段落2</p>
</div>
</div>
<div id="content">
<a href="#">按钮1</a>
<div class="button">
<a href="#">按钮2</a>
</div>
</div>
<a href="#">按钮3</a>
<p>我是段落3</p>
</body>
</html>
组合元素选择器示例
3.属性选择器
属性选择器比较常用的就是element[attribute="value"]，用于匹配属性为value的元素。下面写一个它的一个最简单的使用场景，就是应用于input输入。这样可以不用再对其设置class名称，直接选中需要的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
input[type='text']{
outline: none;
}
</style>
</head>
<body>
<form name="myForm" method="post">
用户名：<input name="username" type="text" placeholder="用户名"> <br/>
密码：<input name="pwd" type="password" placeholder="密码" > <br/>
</form>
</body>
</html>
属性选择器使用场景之一
4.伪类选择器
为什么叫伪类呢？状态是动态变化的，当一个元素达到一个特定状态的时候，它可能得到一个伪类的样式；当状态改变的时候，它又会失去这个样式。所以说它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
伪类选择器和一般的DOM中的元素样式不一样，它并不会改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说却是不可见的。
| 选择器 | 含义 |
|---|---|
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:hover | 匹配鼠标放置的E元素，必须要位于link和visited之后才能生效 |
| E:active | 匹配鼠标已经按下、但是还没有释放的E元素，必须要位于hover之后才能生效 |
| E:lang(c) | 匹配lang属性等于c的E元素，lang伪类可以为语言定义特殊的规则 |
| E:focus | 匹配获得当前焦点的E元素，比如说应用于form表单的输入框 |
| E:first-child | 匹配元素E的第一个子元素 |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| 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:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
a:link{
color: #0f0;
}
a:visited{
color: #ccc;
}
a:hover{
color: red;
}
a:active{
background: #00f;
}
q:lang(no){
quotes: "~" "~"
}
input[type="text"]:focus{
background: yellow;
}
p:first-child{
font-weight: bold;
}
li:first-child{
text-transform:uppercase;
}
span:last-child{
color: red;
}
.programming span:nth-child(2n){
background-color: #ccc;
}
p:nth-of-type(2n+1){
color: #ddee00;
}
.preference > span:first-child{
border: 1px solid #44dd88;
}
.fruit > span:first-of-type{
background: #00f;
}
</style>
</head>
<body>
<a href="http://book.jirengu.com" target="myPage">饥人谷</a>
<a href="http://www.w3cschool.com" target="myPage">w3cshool</a>
<p>超人<q lang="no">会飞</q></p>
<form name="myForm" method="post">
姓名：<input name="username" type="text" placeholder="用户名" /><br/>
密码：<input name="pwd" type="password" placeholder="密码" enable/><br/>
</form>
<div>
<p>学习步骤：</p>
<ul>
<li>听课</li>
<li>做<strong>作业</strong></li>
<li>总结</li>
</ul>
<p>记住<em>不要</em> 眼高手低</p>
</div>
<div class="programming">
<span>前端</span>
<span>java</span>
<span>c++</span>
</div>
<div class="preference">
<span>旅游</span>
<span>交<span>知心</span>朋友</span>
<span>运动</span>
</div>
<h1 class="fruit">
<p>香蕉</p>
<p>西瓜</p>
<p>葡萄</P>
<span>橙子</span>
</h1>
</body>
</html>
结果截图
代码github地址
结果预览
在上面的代码中，大部分的伪类选择器应该都举了例子。关于E:first-child这一类和E:first-of-type这一类需要注意的地方，在我的另外一篇博客里有详细的说明。因为写的比较长，就分开写了，需要看看的可以点击伪类选择器之E:first-child系列和E:first-of-type系列。这里就不作详细说明了。
5.伪元素选择器
伪元素就是用于向某些选择器设置特殊效果。如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，那就是伪类。在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号作区分。
| 选择器 | 含义 |
|---|---|
| E:first-line/E::first-line | 匹配E元素内容的第一行，仅能被用于块级元素 |
| E:first-letter/E::first-letter | 匹配E元素内容的第一个字母或者第一个字，仅能被用于块级元素 |
| E:before/E::before | 在E元素之前插入生成的内容 |
| E:after/E::after | 在E元素之后插入生成的内容 |
这里重点讲一下E::before和E::after这两个伪元素。他们特有的属性 content，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容，不会出现在DOM当中。除此之外还有：
- [String] 使用引号包括一段字符串，将会向元素内容中添加字符串。
- attr() 调用当前元素的属性，可以方便地将图片的 Alt 提示文字或者链接的 Href 地址等等显示出来。
- url() / uri() 用于引用媒体文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素选择器</title>
<style>
a:after { content:"(" attr(href) ")"; }
a::before { content: url(http://www.jirengu.com/data/upload/2016/0321/16/56efb29eadb87.png); }
h1:before { content: "↗";
}
p::first-line{
color: red;
}
p::first-letter{
border: 1px solid #ccc
}
</style>
</head>
<body>
<a href="http://book.jirengu.com">饥人谷</a>
<h1>前端</h1>
<p>学习</p>
</body>
</html>
</body>
</html>
二.选择器的优先级是怎样的?
优先级从高到低依次为：
- 在属性后面使用 !important,会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素标签上的内联样式。
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
总的来说，定位的越精准，优先级就越高。优先级高的样式会覆盖优先级低的。
三.class 和 id 的使用场景?
- class名称是可以重复的，所以它一般用于给多个元素赋予同样的样式。如果还需要同样的样式，添加一个同名的class类就可以，这样能简化代码。
- 在一个页面中id名称不能重复，它一般用于划分大的区块。
四.使用CSS选择器时为什么要划定适当的命名空间？
- 使用语义化的命名可以使代码容易读懂。
- 便于维护和多人协作。
- 浏览器可能会因为不规范的命名产生不同的样式。
五.以下选择器分别是什么意思?
#header{
} /* id选择器，选择id名称为header的元素 */
.header{
} /* class选择器，选择class名称为header的元素 */
.header .logo{
} /* 后代选择器，选择class名称为header元素的后代元素中class名称为logo的所有元素 */
.header.mobile{
} /* 类选择器，选择class类同时具有header和mobile的元素 */
.header p, .header h3{
} /* 多元素选择器，选择header中的p和h3元素 */
#header .nav>li{
} /* 后代选择器，选择id为header的后代元素中class为nav的直接子元素（也就是nav的最外层子元素，即第一代子元素）li */
#header a:hover{
} /* 后代元素选择器，选择id为header的所有后代元素a的鼠标悬停的效果 */
六.运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
这部分在上面提到的另外一篇博客中已经做了详细说明。
结果分析
七. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中。
text-align: center是让块级元素居中，只能作用在块级元素，比如说一个div或者段落上面，对内部行内元素（比如文字或者图片）生效。
示例
八.如果遇到一个属性想知道兼容性，在哪查看?
可以在Can I use上面查看。比如说输入inline-block，对应的在各个浏览器的兼容性就会显示出来。
截图
啊啊啊，这两篇博客真的花了我好长时间，还好一些常用选择器的基本含义是差不多理解了。学习的速度可以不追求那么快，但基础一定要打牢。继续加油吧，菇凉。
