在开始学习的时候,只是简单的了解了一下 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时会找不到问题在哪,那就有可能是自己想要的效果被更为优先的样式给覆盖掉了。