本文作者：开课吧无忧
图文编辑：开三金
三金有话说：
为了满足前端萌新粉丝的需求，这篇文章依然非常非常的接地气，很适合新手前端阅读~
前端基础较为扎实的“老前端”玩家不要心灰意冷，三金会继续为大家带来实用有效的深层前端干货！
感谢各位小伙伴的关注，给大家打call~
前几弹回顾↓
这是真正属于的0基础小白的前端干货(一)
真正属于小白的前端基础(二)
真正属于前端萌新的基础干货【第三弹】
真正属于前端萌新的基础干货【第四弹】
真正属于前端萌新的基础干货【第五弹】
前端零基础入门【第八弹】
(对，就是从五跳到八，因为三金把数标错了....?)
接上回，在第八弹里面我给大家介绍了css最基础的几个选择器：
ID选择器；
类选择器；
标签选择器；
包含选择器；
群组选择器。
这几个都是我们开发过程中会经常用到的选择器，比如css reset一般会用到群组选择器，正常的布局都用类选择器以及标签选择器，当然中间会出现包含关系。
然后某些特殊情况会用到群组选择器，至于ID选择器的话用得比较少一点，我们来看一段正常的css代码：
.menu { width: 100vw; height: 3.33333333rem; background: #d8f3ef; position: absolute; bottom: 0; display: flex; align-items: center; flex-wrap: wrap; transition: 0.5s;}.menu.active { height: 11.33333333rem; background: rgba(216, 243, 239, 0.79);}.menu .nav { width: 100%; height: 2.66666667rem; align-self: flex-start; display: flex; justify-content: space-between; box-sizing: border-box; padding: 0 0.66666667rem;}.menu .nav input { display: none;}.menu .nav span { display: inline-block; width: 2.66666667rem; color: #39363d; line-height: 2.66666667rem;}在这里面用得最多的就是类选择器了，然后还有标签选择器，当然它们之间存在包含关系。
大家看完之后应该要能理解 “.menu .nav{}”这个选择器的意思，它代表着在menu这个类的子级里面去查找所有的nav类。
不过 “.menu.active{}” 这个选择器大家可能会有点疑惑，包含选择器中间都是有空格的，这中间没有空格什么意思？
这其实也是包含选择器的一种，不过它的意思是找到一个同时具有menu类名和active类名的这么个元素：
今天我们要讲的是后面几种选择器：
属性选择器；
伪类选择器；
毗邻元素选择器；
先来看第一个，属性选择器。
属性选择器
其实属性选择器和类选择器的用法差不多，class是元素身上的一个属性，而元素具有很多属性，比如ID也是一个属性，其他的还有title、name等通用属性。
甚至还可以自定义属性，在HTML5中明确定义标签可以有自定义属性，并且对其格式做出了限制：
那就是任何自定义属性名称前面都必须加上data-前缀，也就是说如果我想要给一个元素加一个index自定义属性，那么我应该写成这样：
class="box" data-index="2">div>
这时候在这个div身上就具有了一个自定义属性，这一块也是一个可以拓展的话题，我们后面再说，今天先说选择器。
那么属性选择器，顾名思义其实就是通过属性来去选择一个元素，它的写法是这样的：“[attr]” 或者 “[attr='value']”，
我们可以仅通过属性名称去选择一个元素，也可以通过属性名称以及属性值来选择一个元素，大家视情况而定就好了，
比如：
html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style> [class]{ color: #0c5460; }style>head><body> <div class="box">CSDN---webpilotdiv> body>html>得到的效果是这样的：
直接利用class属性，也可以选择这个元素，当然也可以用其他属性，大家不用限定在原有的属性里面。
伪类选择器
在css的定义中，伪类是用来添加一些选择器的特殊效果。
在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。比如当我们把鼠标移动到一个元素身上的时候，这个元素会获得一个 “:hover” 的伪类。
而同样，当鼠标移开的时候这个元素讲失去这个伪类，所以我们就可以利用这个伪类来为这个元素添加一个特殊的效果。最简单的就是鼠标移动到文字上然后文字变颜色之类的了。
还有一些伪类如":first-child"能通过文档树推断出来。这些伪类在css3中有了一个新的名字，叫伪元素，不过在css2中统一叫做伪类。
由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
最基础的伪类有：
:hover 当元素被鼠标悬停的时候；
:active 当元素被激活时(鼠标在这个元素身上按下)；
:link 当一个超链接没有被访问的时候；
:visited 当一个超链接被访问过后；
:chedked 当一个选择类型的表单控件被选中时...
在这里就不一一列举了，网上一搜一大堆。而它的作用也很简单。就是可以为我们的页面加上一些小特效，这里我写了一些小案例，大家有兴趣的话可以去看看。
http://lexseven.github.io/example/blog/cssSelect/hover.html
那么伪类选择器的写法也很简单，当然，它的主要目的是给某个选择器加上特殊的效果，所以前面肯定要有一个其他的选择器，任何选择器都可以 如“.menu:hover{}”。
主要来说就是在其他选择器后面跟上一个冒号，然后写上伪类的名称，这就是伪类选择器的写法了。比如上图中鼠标悬停变色的代码我们可以来看看：
<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style> .box{ color: #999; } .box:hover{ color: #e15671; }style>head><body> <div class="box">CSDN---webpilotdiv> body>html>伪类选择器的妙用有很多，不过在这里就不再一一赘述了，后面我会写专门的文章来介绍它，接着往下来看。
毗邻元素选择器
最后，毗邻元素选择器。通过前面介绍的这么多选择器，如果稍微用了一段时间之后应该不难发现，之前的选择器只能选择一个或者一些元素，或者通过某一个元素选择这个元素的后代元素。
比如 "div p" 这就能选择所有div中的P标签，而毗邻元素选择器则可以让我们变得更加强大，它可以选择一个元素后面的所有兄弟元素。比如有这样一个结构：
<div class="box"> <span>span> <span>span> <span class="active">span> <span>span> <span>span> <span>span>div>要求是选择所有.active之后的span元素，如果用之前的选择器我们是没有办法做到的，而毗邻元素选择器则很简单：
.active~span{ color: #f1b0b7;}在这里要注意，".active" 和 "span" 之间是用“~”连接起来的，这个符号是按Shift 加 数字 1前面那个键按出来的，其实它就是毗邻元素选择器本身了。得到结果：
好了，选择器这一块就先给大家介绍到这里，最后总结一下：
#select ID选择器；
.select 类选择器；
tagName 标签选择器；
:select 伪类选择器；
selectA~selectB 毗邻元素选择器；
[attr] / [attr='value'] 属性选择器；
selectA selectB 包含选择器；
selectA,selectB 群组选择器。
The end.
你“在看”我吗？
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
