CSS3—选择器总结

在开始学习的时候，只是简单的了解了一下 id和类选择器，同样这两个选择器个人用的也是最多的。因为前期嘛，主要是学习，不考虑负担和CSS代码冗余的问题，多半会看着元素就像用类选择器和id选择器。再往后学习的时候，会遇到稍微复杂一点的练习就会用到其他一些更好的选择器来实现。

所以就想着，把CSS中的所有的选择器都总结总结，也方便后期自己复习看嘛。

早起的第二天、打卡！！！！！

 

 

基本选择器及其扩展

基本选择器

类选择器： .       class=“类名”

ID选择器：  #     id=“id名”

元素选择器： 元素名      

后代选择器： 空格隔开

分组选择器：    ，  （这里的‘，’是结合符）

通配符：     *

这些基本选择器的使用很常见，基本的规则都知道，简单的介绍下就好。

扩展的选择器

子元素选择器  ：   >         它只匹配子元素（只找儿子，不找孙子）

相邻兄弟选择器：  +         它只匹配紧跟着的兄弟

通用选择器 ：   ~              它只匹配所有的兄弟元素（不需紧跟）

 

 

属性选择器

属性选择器分为两种：存在和值选择器、子串值选择器

属性选择器是使用 [ ] 

存在和值选择器

存在就是存在这个属性,值就是属性值

[atrr] ：该选择器选择包含atrr属性的所有元素

[atrr=val]：该选择器选择包含atrr属性且atrr属性值为val的所有元素

[atrr~=val]：该选择器选择atrr属性值中包含val，且以空格分隔，且拥有多个值的元素   

eg： div[id~="box set red"]  符合这个选择器

        div[id~="box_set"]    和  div[id~="boxset"] 不符合

 

子串值选择器

[atrr |= val]：该选择器选择atrr属性值是val，或者属性值以val-开头的元素

[atrr ^= val]：该选择器选择atrr属性值以val开头（包括val）的元素

[atrr $= val]：该选择器选择atrr属性值以val结尾（包括val）的元素

[atrr *= val]：该选择器选择atrr属性值包含val的元素

 

属性选择器到这就解释完毕啦！

 

伪类选择器

其实常用的超链接的伪类有四个 link、visited、hover、active。

1.  顺序的问题link和visited必须在hover和active的前面。否则hover和active会失效，样式会出不来的。

2.  还有就是link、visited只能用超链接是静态；hover和active可以用在其他元素身上，是动态伪类

链接伪类

链接伪类也叫锚点伪类，是只能作用再超链接上面的。

：link   超链接，未被访问的地址的所有锚

：visited  超链接，已经被访问过的地址的多有锚

：target  代表一个特殊的元素，它的id是URL的片段标识符（也就是#后面的内容）

               表示选中有id的元素，并且这个元素的id是URL的片段标识符

动态伪类

：hover  当鼠标悬浮在元素上时

：active   当元素被点击时

表单伪类

：enabled     匹配可编辑的表单

：disable      匹配被禁用的表单 （禁用用表单  disable=“disable”）

：checked    匹配被选中的表单

：focus         匹配获焦点的表单

结构性伪类

结构性伪index类分为，：nth-child（index）、：nth-of-type（index）、：not、：empty四种。

但是最常用的是：：nth-child（index）、：nth-of-type（index）它两者的区别也是很重要并且容易混淆的点。

注：index的值是从1开始计数！！！

 

：nth-child（index）系列

ele：first-child     选中所有子元素中第一个子元素，并且这个子元素必须是ele

ele：last-child     选中所有子元素中最后一个字元素，并且这个子元素必须是ele

ele：nth-last-child（index）   （与nth-child相反，即倒序）

ele：only-child  （：first-child与：last-child） 独生子—是所有子元素中的第一个元素也是最后一个子元素

 

eg：#wrap ele:nth-child(1)   

表示：找到#wrap 下的所有子元素，并且找到第一个子元素，并且这个子元素必须是ele

 

：nth-of-type（index）系列

ele：first-of-type     选中所有子元素中第一个ele子元素

ele：last-of-type     选中所有子元素中最后一个ele子元素

ele：nth-last-of-type（index）   （与nth-of-type相反，即倒序）

ele：only-of-type  （：first-of-type与：last-of-type） 是所有子元素中的第一个元素也是最后一个子元素

 

eg：#wrap ele:nth-of-type(1)   

表示：找到#wrap 下的所有子元素，并且选中第一个ele元素（找到#wrap下第一个ele子元素）

：nth-child（index）和：nth-of-type（index）的重要区别

：nth-of-type（index）是以元素为中心。

以元素为中心是什么意思呢？就是浏览器在解析时，会把类名、id名等选择器自动匹配到带有这些选择器的元素本身上。

换句话说就是通过选择器找到元素。

 

 

伪元素选择器

 

伪元素最最常用的就是before和after

：：before

：：after  （通常用来清除浮动）

：：first-letter   选中首字母（结构问题）

：：first-line     选中首行

：：selection    表示页面有文本时，当鼠标选中文本，体现出来的文本颜色和文本的背景色。通过该伪元素可以改变二者的颜色。

伪元素是不存在DOM树中的。具体再深入一点的我还不知道，等我学到了在补充哈。

选择器声明的优先级

是的，之前学习选择器时，总是说选择器的优先级，其实不是的，优先级是选择器声明的优先级并不是选择器优先级。今天纠正过来了。

选择器的特殊性

选择器的特殊性用四个值来表示 0000

ID选择器                            0100

类、伪类、属性选择器      0010

元素、伪元素选择器          0001

行内样式                            1000

通配符                                0特殊性

继承性                                没有特殊性（0比它来的要强一些）

选择器的特殊性 1000是最高的，没有比1000更特殊的了。还有特殊性的数值是不进位的。

重要声明

平时我们写的都是正常声明，正常声明会和重要声音分开放的。

重要声明是在正常声明结束的“；”前加“！important”。

eg： color：red！important；

 

选择器的来源以及权重问题

CSS的来源大致为三类：

创作人员—开发人员

读者—所谓读者自然就是浏览网页的用户

用户代理—用户代理也就是我们通常所说的浏览器（IE、Firefox等等）

这些用户（读者）里可能会有人不满意网页的配色，或者字体大小，这时他们可以通过浏览器提供的接口为网站添加读者样式。

权重（由上到下越来越低）

a.  读者的重要声明

b.  创作人员的重要声明

c.  创作人员的正常声明

d.  读者的正常声明

e.  用户代理的正常声明

选择器的层叠

1.  找出所有相关的规则，这些规则都包含一个选择器

2.  计算声明的优先级

     a. 先按来源排序

     b. 再按选择器的特殊性排序

     c.  最终按css代码中的顺序

 

选择器的层叠就是看谁的优先级高就使用谁，有时候代码写多了就容易出错，debug时会找不到问题在哪，那就有可能是自己想要的效果被更为优先的样式给覆盖掉了。