CSS选择器知识梳理

CSS选择器结构逻辑图

接下来按照结构逻辑图具体讲解各个选择器的作用及用法；

基本选择器

基本选择器主要有以下5类：

* : 通配选择器；匹配html中的所有Html元素；
E : 元素选择器；选中html中指定的某一类Html元素，如 h1 将选中所有的“h1”元素；
#id : ID选择器；选中html中id属性为特定值的所有元素；
.class : 类选择器；选中html中class属性为特定值的所有元素；
s1,s2,s3 : 组群选择器；对多个选择器进行组合，同时定义相同的css样式，定义组群选择器主要是为了减少代码的冗余；

层次选择器(相对选择器)

层次选择器通过Html的DOM元素间的层次关系选择元素；我也喜欢把层次选择器称为相对选择器，就是找一个html元素作为基准，寻找相对于它的后代、孩子、兄弟等元素；

E F : 后代选择器；选中所有E容器所包含的类型为F的后代元素；
E>F : 子选择器；选择所有E容器中所有类型为F的子元素；

注意：”E的子元素F“是指F的父元素就是E，而”E的后代元素“是指F的父元素可能是E，或者F的父元素的父元素是E，或者F的父元素的父元素的父元素是E，... ；因此，"子"是"后代"的一个子集；
E+F : 相邻弟选择器；看了很多的教材都说这是相邻兄弟选择器，但是，它只能选择紧靠E的，之后的F元素，而紧靠E的，之前的F元素不被选择，所以，窃以为相邻弟选择器更加贴切，虽然不太学术；
E~F : 同辈弟选择器；学术叫法是“通用选择器”，实际上只能选择与E具有相同父元素的、位于E之后的、符合F条件的所有元素；“同辈”即指与E具有相同父元素，“弟”即指位于E之后；eg.

<head>
  <style media="screen">
    #p2~p{color:red;}
  </style>
</head>
<body>
  <p id="p0">This paragraph 0</p>
  <article id="div1">
    <p id="p1">This is paragraph 1</p>
    <p id="p2">This is paragraph 2</p>
    <p id="p3">This is paragraph 3</p> <!--选中-->
    <p id="p4">This is paragraph 4</p> <!--选中-->
    <div>
      <p id="p5">This is paragraph 5</p>
    </div>
    <p id="p6">This is paragraph 6</p> <!--选中-->
  </article>
  <p id="p7">This is paragraph 7</p>
</body>

只有id为p3、p4、p6的元素颜色变为红色；

伪类选择器

伪类选择器语法书写时，与其他的CSS选择器写法有所区别，其格式为：

E:pseudo-class{property:value;}

其中，E为html元素，pseudo-class是CSS的伪类选择器名称；即 伪类一定是依附于某个具体的元素的 ；伪类可以分为以下6类：

动态伪类选择器

动态伪类体现了用户和网站的交互状态，动态伪类又分为两类：

1. 链接伪类

因为只有a (anchor) 元素才具有的伪类，所以也称为锚点伪类；

a:link : 定义链接未被访问时的样式；

a:visited: 定义链接被访问后的样式；

浏览器如何判断锚点a是否访问过？

答：经过在chrome上的测试，如果一个页面的两个a指向同一个url，那么如果点击其中一个a，另一个a也将变为visited状态，说明浏览器是通过检测缓存来统一设置a的颜色的；

“ a#id:link ” 和 “ a:link#id是否等效 ” ？

答：等效，对于选择器的摆放顺序没有特殊要求，只是元素选择器必须放在第一个；

为什么有时候设置 a:link 的样式会无效

答：a的状态设置需要遵循 爱恨原则 ，即LoVe,HAte；即对锚的4个状态的样式定义需要按照先定义a:link，再定义a:visited，再定义a:hover，最后定义a:active的顺序进行；否则可能样式不能生效；

2. 用户行为伪类

之所以不把这几种状态的伪类归入锚点伪类，是因为这几个伪类不仅仅针对a元素；

E:hover : 当鼠标移动到某个元素上时，该元素所显示的样式，适用于所有元素；

E:active : 当某个元素被激活时，所显示的样式，通常表现为a元素或按钮元素被点击时；

E:focus : 当某个元素获得焦点时所显示的样式，适用于所有元素；

目标伪类选择器

E:target :选择匹配E的所有元素，且匹配元素被相关URL指向；

要了解“目标伪类选择器”，首先要了解url的组成结构：

<protocol>://<user>:<password>@<host>:<port>/<path>;<param>?<query>#<fragment>

protocol表示使用的传输协议，如htttp、ftp、smtp等；

有些url需要用户名和密码才能登陆，如ftp，则可以在url中直接指定user:password，如果没有指定用户名与密码，将在浏览器端弹出用户名-密码输入对话框；

host可以通过域名指定，也可以通过一个ip地址直接指定；

port表示提供服务的端口号，如http服务通常开80端口，ftp服务通常开21端口；

path表示服务器上资源的路径；

param用于指定特殊参数的可选项；

query：当表单以Get方式提交给服务器时，表单元素的键值对将被放在query中；

fragment：通常是html中的元素的id号，当一个html文件非常长时，通过直接指定frag，可以让浏览器定位到对应id的元素上，并显示在浏览器视口中；

当我们通过指定fragment进行页面访问时，该fragment对应的元素就是目标伪类选择器选中的元素；eg.有以下代码：

<!--该文件的url为http://localhost/test.html-->
<head>
  <style type="text/css">
    #div1,#div2,#div3{height: 800;}
    #div1,#div3{background-color: red;}
    #div2{background-color: black;}
    #div2:target{
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</body>

则以http://localhost/test.html访问该页面时，div2的背景是黑色，而以http://localhost/test.html#div2访问该页面时，页面自动定位到div2上，并且div2的背景变为绿色；

语言伪类选择器

E:lang(language) : 当某个元素指定了lang属性时，所需要显示的样式，eg. ：

<html>
<head>
    <style type="text/css">
      :lang(zh){
        background: yellow;
      }
      :lang(en){
        background: green;
      }
      div{height: 100px;}
    </style>
</head>
<body>
  <div id="div1" lang="en"></div>
  <div id="div2"></div>
  <div id="div3" lang="zh"></div>
</body>
</html>

div1的背景色为绿色，div2的背景色为白色，div3的背景色为黄色；

UI元素状态伪类选择器

UI元素状态伪类选择器主要作用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整体美观，使表单页面更具有个性与品味；

E:checked : 选中状态伪类选择器；匹配选中的复选按钮(checkbox) 或单选按钮(radio)；

E:enabled : 启用状态伪类选择器；匹配所有启用的元素；

E:disabled : 禁用状态伪类选择器；匹配所有禁用的元素；

结构伪类选择器

:first-child ： 选择第一个元素;

注意：E:first-child 和 E :first-child的效果是不同的，E:first-child是指E在某个容器中是第一个元素，则采用指定的样式，这里的容器包括body、div等等；E :first-child是指容器E中的第一个元素，无论其什么类型，采用指定的样式；

:last-child : 选择最后一个元素;同理，E:last-child 和 E :last-child也是不同的；

:root : 因为在html文档中，所有元素的根元素都是html，所以以下两句是等价的

<style type="text/css">
  html{color:red;}
  :root{color:red;}
</style>

E F:nth-child(n) : 选中所有容器E中，从第一个元素开始数，序号为n的F元素；并且n可以是一个常数或者是an+b类型的数(其中a、b为常数，n从0开始计数)，还可以是even或odd，even表示偶数，等价于2n，odd表示奇数，等价于2n+1；还是举个具体的栗子吧：

<head>
    <style type="text/css">
      div h1:nth-child(3n+1){
        color:red;
      }
    </style>
</head>
<body>
  <div>
    <h1 id="h_1">This is h_1</h1> <!--第1个元素-->
    <h1 id="h_2">This is h_2</h1> <!--第2个元素-->
    <h1 id="h_3">This is h_3</h1> <!--第3个元素-->
    <h2 id="h_4">不是h1</h2>    <!--第4个元素-->
    <h1 id="h_5">This is h_5</h1> <!--第5个元素-->
    <h1 id="h_6">This is h_6</h1> <!--第6个元素-->
    <h1 id="h_7">This is h_7</h1> <!--第7个元素-->
    <h1 id="h_8">This is h_8</h1> <!--第8个元素-->
    <h1 id="h_9">This is h_9</h1> <!--第9个元素-->
  </div>
</body>

上述代码将会使在容器div中的、类型为h1的、序号为3n+1的元素被选中，所以id为h_1、h_7两个元素选中，h_4因为不是h1元素而不被选，如果选择器为div :nth-child(3n+1)，则h_4也将被选中；

:nth-last-child : 与nth-child相似，只是元素序号从后往前数，若将上述代码中的nth-child改为nth-last-child，则倒数第1、4、7个元素，即id为h_9、h_6、h_3的元素被选中；

E F:nth-of-type(n) : nth-of-type与nth-child非常类似，只是只将类型为F的元素纳入计序，而不是把所有E的子元素都进行计序；还是以上述代码为栗子，若将nth-child改为nth-of-type,则id为h_1、h_5、h_8元素将被选中，因为它们分别是第0×3+1、1×3+1、2×3+1个h1元素；

E F:nth-last-of-type(n) : 与nth-of-type类似，只是从后往前对E元素进行计数；

E F:first-of-type :等价于 E F:nth-of-type(1) ；

E F:last-of-type : 等价于 E F:nth-last-of-type(1) ；

E F:only-child : 当容器E只有一个子元素F时，F被选中；

E F:only-of-type : 当容器E中，没有与F类型相同的元素时，即F的元素类型在容器E中惟一，F被选中；

E:empty : 当E元素没有任何内容(包括空格也没有)时所使用的样式；

否定伪类选择器

:not() : 起到过滤的效果，过滤掉具有某些属性的元素，举个栗子：

<head>
    <style type="text/css">
      div h1:not(:nth-child(odd)){
        color:red;
      }
    </style>
</head>
<body>
  <div>
    <h1 id="h_1">This is h_1</h1> <!--第1个元素-->
    <h1 id="h_2">This is h_2</h1> <!--第2个元素-->
    <h1 id="h_3">This is h_3</h1> <!--第3个元素-->
    <h2 id="h_4">不是h1</h2>    <!--第4个元素-->
  </div>
</body>

该代码将会选中在div中，序号为非奇数的h1元素，则只有id为h_2的元素被选中；

伪元素

伪元素主要用于定位文档中的文本，而不是html元素；也是因为它们在html中没有对应的元素，所以被称为伪元素；

需要说明的是，伪元素并不是在CSS3中才出现的，比如

*:first-line 、:first-letter 、:before 、 :after *

CSS3为了区分伪元素和伪类，对伪元素进行了规范化，将单冒号变为了双冒号，即变为了

::first-line 、 ::first-letter 、 ::before 、 ::after

另外，伪元素增加了一个 ::selection ；浏览器为了兼容，如果伪元素前使用单冒号也能被解析为伪元素；

::first-letter : 用于定位元素文档中的第一个字母；eg.

<style type="text/css">
  h1::first-letter{
    background-color: grey;
    color: blue;
  }
</style>

上述代码将会使html中所有的h1元素第一个字符变为灰底蓝字；

::first-line : 用于定位元素文档中的第一行；eg.

<head>
    <style type="text/css">
      h1::first-line{
        background-color: grey;
        color: deepskyblue;
      }
    </style>
</head>
<body>
    <h1 id="h_1">line1<br>line2</h1>
</body>

上述代码中,"line1"和"line2"以换行<br> 换行分隔；在浏览器中，"line1"为灰底蓝字，而"line2"为正常显示；

::before : 在某元素的前面添加内容；

::after : 在某元素的后面添加内容；eg.

<head>
    <style type="text/css">
      p::before{content:"Before.";}
      p::after{content: "After.";}
    </style>
</head>
<body>
  <p>This is paragraph.</p>
</body>

将在页面中显示：

Before.This is paragraph.After.

查看页面源码如下：

before/after实验html源码

可见，伪元素::before和::after被添加到p 内部的前面和后面，并且内容与设置的content相同；

设置伪元素时，必须设置器content属性，否则伪元素将无效；

content属性可以有以下内容：

字符串: 作为伪元素的内容添加到主元素中；若字符串中有html代码，这些代码以文本形式显示，而不会转化为真正的html内容显示；
attr(attr_name) : 伪元素的某个内容跟主元素的某个属性进行关联；
url() : 引入外部资源；eg.

<style>
  p::before{content:url("./x.png")}
</style>

将在p中引入图片显示在最前面；

counter() : 调用计数器，可以不使用列表元素实现序号问题；

::selection : 用来匹配突出显示的文本，该伪元素仅接受两个属性--background和color；eg.

<head>
    <style type="text/css">
      p::selection{
        background: yellow;
        color:red;
      }
    </style>
</head>
<body>
  <p>This is paragraph.</p>
</body>

则在页面中通过鼠标选中p的某些文本，这些文本将会以黄底红字显示；

属性选择器

E[attr] : 选择含有属性attr的所有元素，E可以省略；attr不能加引号；

E[attr=val] : 选择属性attr为val的所有E元素；val不区分大小写

E[attr|=val] : 选择属性attr为val或以 val- 开始的E元素；

E[attr^=val] : 选择属性attr为val或以 val 开始的E元素；

E[attr$=val] ：选择属性attr为val或以val结尾的E元素；

E[attr*=val] : 属性attr的任意位置有val值的所有E元素；

E[attr~=val] : 属性attr中以空格分割为多个值后，其中有val的所有E元素；

选择器的优先级

多个选择器可能选中了同一个对象，那哪个选择器定义的样式真正起作用，这就需要定义选择器的优先级；

在某个属性后面添加!important,将会强制使用该处的属性覆盖其他地方的属性，eg.

<head>
    <style type="text/css">
      div :first-child{color:red !important;}
    </style>
</head>
<body>
  <div>
    <p style="color:green;">This is paragraph.</p>
  </div>
</body>

其中的p元素字体为红色，而不是内联样式指定的绿色；

结果chrome测试，选择器的优先级为：

有!important的属性
内联样式
id选择器
类选择器
层次选择器
伪类选择器
属性选择器
元素选择器
通配选择器

对于同一优先级的选择器，当它们选中同一元素，并对该元素的同一个属性进行定义而产生冲突时，后定义的样式将覆盖前定义的样式；

PS (PostScript) : 参考很多前人的文章，没有一一列出，敬请谅解；主要参考书籍为大漠老师的《图解CSS3--核心技术与案例实战》。有写的不好的地方或者错误的地方欢迎指正，感谢！

最后编辑于：2017.12.07 21:57:58

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,324评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,303评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,192评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,555评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,569评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,566评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,927评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,583评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,827评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,590评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,669评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,365评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,941评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,928评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,159评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,880评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,399评论 2赞 342