整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者：陈大鱼头
转发链接：https://mp.weixin.qq.com/s/tLD4Rfr2c-MAXXtbC7nEwQ
文介绍了如何在网页中使用css及css的常用知识点，今天首先介绍css 的选择器，所谓选择器就是通过一定的规则语法查找html元素节点，只有找到这些元素才能应用样式。
css 选择器从不精确到最精确，可分以下几种：
tag 是html 标签关键字，一般小写。
在html标签上使用 class="" 属性应用css 样式，可以写多个class，空格隔开，如：<p class="cls1 cls2">。
属性值html标签上的各种属性，如 [alt], [type="text"], [lang="en"]。
id 必需是唯一的，不能重复。
语法如下：
* {
/* 通用选择器*/
}
tag {
/* 标签选择器 */
}
tag::before {
/* 标签选择器和伪元素 */
}
.class {
/* 类选择器 */
}
.class:hover {
/* 类选择器和伪类 */
}
[attr] {
/* 属性选择器 */
}
#id {
/* ID 选择器 */
}伪元素有两个冒号 ( ::, 比如 ::before)，伪类有一个冒号 ( :, 比如 :hover)。
后面学习JavaScript 时，会学习到通过js也可以查找html元素，查找规则就是通过css 选择器查找，如下示例：
此查询用于获取与选择器匹配的所有元素：
document.querySelectorAll('article h2')如上代码获取到一个html 节点集合，每个html节点都有子节点，孙子节点，依次类推.....
在网页中 html 是一个树状的结构，每个html 元素是一个节点，且每个节点下面又有子节点。
如下图：
css 选择器就是在这样的一个树结构里面查找html元素节点，找到后浏览器渲染对应的样式。
选择器除了可以单个使用，也可以组合使用，比如 #id p, #id >.class,p+h3等，按功能可分以下几种：
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div span{
color:red;
}
</style>
</head>
<body>
<div>黑色<span>红色</span></div>
<div>
<p>黑色<span>红色</span><span>红色</span></p>
</div>
<span>不是红色</span>
<span>不是红色</span>
</body>
</html>显示效果：
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div > span{
color:red;
}
</style>
</head>
<body>
<div>黑色<span>红色</span></div>
<div>
黑色<span>红色</span><span>红色</span>
<p><span>不是红色</span></p>
</div>
<span>不是红色</span>
<span>不是红色</span>
</body>
</html>显示效果：
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p + span{
color:red;
}
</style>
</head>
<body>
<p>黑色</p>
<span>红色</span>
<span>不是红色</span>
<span>不是红色</span>
</body>
</html>显示效果：
这里一定注意span必须紧跟在p标签后面，它们2个之间有任何标签都不会起作用了。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p~span{
color: red;
}
</style>
</head>
<body>
<p>黑色</p>
<span>红色</span><br>
<span>红色</span><br>
<h1>标题</h1>
<span>红色</span>
</body>
</html>显示效果：
如下示例：
h1,h2,h3{
background-color: red;
}整个页面中的h1、h2、h3的背景色都是红色，无论在哪个层次的节点中都会起作用。
不同的选择器如果作用于同一个html元素，浏览器会根据优先级规则渲染样式。
优先级高的选择器会覆盖优先级低的样式，如下表从上到下优先级依次变高：
选择器 | 例子 | 级别 |
标签选择器 | h1 | 1 |
类，属性选择器 | .class, [type="text"] | 2 |
ID选择器 | #contact | 3 |
内联样式 | <div style="background: purple"> | 4 |
!important关键词 | div { color: green !important } | 覆盖所有 |
请谨慎地使用!important，它变得非常难以维护。!important 仅在绝对必要时才应使用，例如为某些您无法控制的第三方设置样式，使用内联样式，以及在少数情况下使用 JavaScript 切换显示。
css 选择器是一种查询html元素节点的语言，当css选择器互相组合时，会变得很复杂，所以平时尽量减少使用组合选择器。
关于优先级，总而言之，从标签选择器到!important的每层级别都比前一个级别强一个数量级。
学习css，切记死记硬背，理解它很重要，结合之前学习的html 知识多练习，感谢关注。
上篇：前端入门——css 样式表简介
一篇文章我们把「Web前端开发进阶篇」CSS定位和浮动讲解完了，接着我们来讲解下一篇文章，关于CSS选择器的内容知识，小伙伴们跟上我的节奏，动起来，Let's go！
【引言】
在学习CSS的过程中，选择器的便捷使用会让你在开发的过程中游刃有余，节省大量js代码的同时，让你的CSS代码变得精简，页面灵活度也会提高很多。
在CSS中，选择器是一种模式，就是选择你想添加样式的元素。选择器的类型居多，需要熟练使用才能让页面更加灵活，兼容性才不会出现很大的差异。
接下来让我详细的给大家介绍一下。
这是最常见的CSS元素选择器，就是拿文档的元素来作为最基本的选择器，说白了就是拿HTML标签来做选择器。例如：
元素选择器
如上图所示，我们直接拿文档的元素作为选择器来添加我们想要的样式。
使用类型选择器来匹配语言元素类型的名称，它会匹配文档树中该元素类型的每一个实例，说白了就是给文档树下选择的每一个元素添加一个统一的样式。不管是XML文档还是CSS文档都可以使用类型选择器来添加样式。例如：
XML文档
CSS文档
如上图所示，我们直接选择给某一个类型的语言元素来添加我们想要的样式。
假设我们对不同的文档元素添加同一样式，要想达到这个目的，我们就可以用选择器分组来实现这个目的。例如：
选择器分组
我们可以将众多的选择器用逗号分开，就定义了一个规则，可以将任意多个选择器分组在一起，对此没有任何的限制，省去了大量的代码，也方便管理。就不用像下面这么写了。
没有进行选择器分组
1、通配型选择器
这是选择器分组里面的一种选择器 - 通配选择器，显示为一个星号（*）。该选择器可以与任何元素匹配，就像一个通配符。例如：
id*{margin:0；padding:0；}2、声明分组
我们既可以对选择器进行分组，也可以对声明分组。说白了就是给选择器分开来写添加不一样的样式而已。就是说我给h1添加个字体颜色，在别的地方我给它添加个字体大小，这样有利于管理，在实际开发中用的也比较多。但是效率不高。我们将采用结合选择器和声明的分组的写法来写CSS，例如：
结合选择器和声明的分组
类选择器允许以一种独立于文档元素的方式来指定样式，可以单独适应，也可以结合其他元素结合使用。注意：只有适当地标记文档后，才可以使用这些选择器，这是最常用的，说白了就是只有给文档添加class才可以使用类选择器。
为了将类选择器的样式与元素关联，必须为Class制定一个适当的值，就是添加一个class。然后用class来指定样式。
可以为不同的元素指定同一个Class。然后通过选择器来添加样式，例如：
CSS类选择器
1、CSS多类选择器
就是说Class值里有多个Class值，我们用空格分开，用不同的值指定不同的样式。
注意：里面的值不分顺序。如果把两个类选择器连接在一起，仅可以选择同时包含这些类名的元素（顺序也不限）。例如：
CSS多类选择器
ID选择器跟类选择器差不多，就是给元素添加相应的ID才可以使用ID选择器，类选择器是引用Class值进行绑定添加样式，ID选择器是通过引用ID值进行绑定添加样式。例如：
ID选择器
1、与类选择器不同，需要区别注意：
区别1：ID只能在一个HTML文档中使用一次，ID选择器也会使用一次，而且仅一次。
区别2：不能使用ID词列表，就是说id="只能一个值"，不允许有以空格分割的词列表。
区别3：ID能包含更多含义，就是说能对不同文档中的同一个ID进行元素匹配。相当于给所有的文档定义一个ID选择器，给他们添加样式。
2、区分大小
类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
属性选择器可以根据元素的属性值来选择元素。比如图片的title属性，a标签的href，也可以是同时有title和href的拆链接，都可以用属性选择器添加样式。例如：
根据元素的属性值来选择元素
1、根据具体属性值选择
你也可以缩小选择范围，选择特定属性值的元素。可以是一个属性值也可以是多个特定的属性。可以是标签属性，也可以是XML文档的语言属性，更可以是元素的属性值，例如：
根据具体属性值选择
2、根据部分属性值
就像正则表达式一样，可以匹配相似的元素，比如说匹配属性值中的词列表的某个词，使用（~）号就可以匹配到，说白了，就是在众多的属性值中选择一个，然后进行匹配。
根据部分属性值
3、子串匹配属性选择器
这个更像正则表达式一样，去匹配我们相匹配的元素。
子串匹配属性选择器
例如：如果希望对指向百度的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需这样写：
a[href*="w3school.com.cn"] {color: red;}4、特定属性选择类型
我们可以用特定属性选择类型来匹配语言值。例如：
特定属性选择类型
在比如说你在文档中插入了一系列图片，其中图片的命名形如：picture-1、picture-2等等，就可以像这样进行匹配了，
[attribute|=value]
总结一下属性选择器：灵活多运，用多了才不会出错。
属性选择器
简单说后代选择器可以选择作为某元素后代的元素。就是拿文档元素的层级关系作为选择器来添加样式，比如说，我先找div属性为Class值为important的元素，在找到它下面的h1元素，给他添加样式，例如：
后代选择器
后代选择器功能强大，也是最常用的，也是最简单易用的，实现了很多选择器不能实现的任务。
如果你不希望选择任意的后代元素，只是某个元素的子元素，就可以使用它，如果有多个相同子元素，都能匹配到父元素里相同的子元素。我们通常用（>）大于号来表示。注意符号的两边允许有空格。例如：
选择作为 h1 元素子元素的所有 strong 元素：
子元素选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。就可以使用相邻兄弟选择器，还可以结合其他结合符，例如：
相邻兄弟选择器
CSS 伪类用于向某些选择器添加特殊的效果。
1、锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。例如：
锚伪类
2、:first-child伪类
2.1 可以使用 :first-child 伪类来选择元素的第一个子元素。
2.2 可以使用 :nth-child(n) 伪类来选择元素的第n个子元素。n也可以作为表达式，例如：n+1、2n、等数学表达式
2.3 可以使用 :first-of-type 伪类来选择元素的第一个子元素。（CSS3选择器，等同2.1）
2.4 可以使用 :nth-of-type(n) 伪类来选择元素的第n个子元素。n也可以作为表达式，例如：n+1、2n、等数学表达式，（CSS3选择器，等同2.2）
3、:lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。
例如：
伪类
CSS 伪元素用于向某些选择器设置特殊效果。
1、:first-line 伪元素：用于向文本的首行设置特殊样式
2、:first-letter 伪元素：用于向文本的首字母设置特殊样式：
3、多重伪元素：可以结合多个伪元素来使用。
4、:before 伪元素：可以在元素的内容前面插入新内容。
5、:after 伪元素：可以在元素的内容之后插入新内容。
例如：
CSS 伪元素
CSS选择器灵活多运，用法也是相当的多，可以使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制。多多使用练习，在开发中效率会提高不少，这也是前端开发必备的技能。
CSS选择器今天就讲解到这里了，下一篇讲解CSS高级语法，希望大家不要放弃学习哦！
PS：
本文为‘Web前端进阶指南’原创，手动码字不易，小伙伴们别忘了顺手点个赞加个关注哈，有什么不懂的下方留言评论或私信。谢谢大家哈！
*请认真填写需求信息，我们会在24小时内与您取得联系。
