【CSS】CSS选择器及其权重
基本选择器
- id 选择器 - - -
#id {}
- - - 唯一标识,只能有一个。尽量少用 id 选择器,影响权重 - 类名选择器 - - -
.class {}
- - - class 类名,可以有多个,可以重复使用 - 标签选择器 - - -
tagName {}
- 通配符选择器 - - -
* {}
属性选择器
- 存在选择器 - - -
[attr] {}
- 相等选择器 - - -
[attr="value"] {}
- 前缀选择器 - - -
[attr^="str"] {}
- - - 选中所有属性 attr 里面以字符串 str 开头的元素 - 后缀选择器 - - -
[attr$="str"] {}
- 子串选择器 - - -
[attr*="str"] {}
- - - 选中所有属性 attr 里面包含字符串 str 的元素 - 包含选择器 - - -
[attr~="word"] {}
- - - 选中所有属性 attr 里面包含单词 word 的元素
并列选择器
Selector1Selector2
- - - eg:p[class^="head"]
、div.className
、ul#wrap
…
选择器组合
- 选择多个元素 - - -
selector1, selector2 {}
- 选择后代 - - -
selector1 selector2 {}
- 选择子元素 - - -
selector1 > selector2 {}
- 选择兄弟元素 - - -
selector1 ~ selector2 {}
- 选择相邻兄弟元素 - - -
selector1 + selector2 {}
- 组合选择器的
selector1
必须在selector2
前面,因为 CSS 样式是从上往下渲染的 selector
可以是任意一种选择器
伪类选择器
普通伪类选择器
selector:hover {}
- - - 当鼠标悬停在当前元素上方时触发selector:active {}
- - - 当鼠标点击当前元素时触发selector1:not(selector2) {}
- - - 反选; eg:li:not([class^="super"])
selector:checked {}
- - - 当前元素被勾选时触发 - - - 一般配合单选框、复选框使用selector:focus {}
- - - 光标在当前元素上聚焦时触发 - - - 一般配合文本框使用selector:focus-within {}
- - - 光标在当前元素或其后代上聚焦时触发selector:link {}
- - - 作用于未被访问过的超链接selector:visited {}
- - - 作用于被访问过的超链接
- 对于超链接,伪类必须按
link
,visited - hover - active
的顺序设置。当然,不需要设置的可以不写
结构性伪类选择器
selector:nth-child(n) {}
- - - 所有兄弟元素中的第 n 个(如果被选中的元素不满足选择器的条件,则不生效)selector:nth-of-type(n) {}
- - - 所有兄弟元素中、满足选择器selector
的第 n 个(就是说,一定会生效)selector:nth-last-child(n) {}
- - - 所有兄弟元素中的倒数第 n 个selector:nth-last-of-type(n) {}
- - - 所有兄弟元素中、满足选择器selector
的倒数第 n 个selector:first-child {}
- - - 所有兄弟元素中的第 1 个selector:first-of-type {}
- - - 所有兄弟元素中、满足选择器selector
的第 1 个selector:last-child {}
- - - 所有兄弟元素中的最后 1 个selector:last-of-type {}
- - - 所有兄弟元素中、满足选择器selector
的最后 1 个
selector:nth-child(even) {}
- - - 所有兄弟元素中,序号为偶数的兄弟(如果被选中的元素不满足选择器的条件,则不生效)
selector:nth-child(2n) {}
selector:nth-child(odd) {}
- - - 所有兄弟元素中,序号为奇数的兄弟(如果被选中的元素不满足选择器的条件,则不生效)
selector:nth-child(2n + 1) {}
区分 nth-child(n)
& nth-of-type(n)
:简而言之,nth-of-type()
的计算条件比较苛刻
无论是否满足选择器的条件,nth-child(n)
都会计算。只是 不满足条件的元素,不会生效选择器的样式
而 nth-of-type(n)
只会计算满足选择器条件的元素。所以 被选中的元素,一定会生效选择器的样式
p:nth-of-type(2n+1) { /* 奇数段 */color: blue;font-weight: 700;
}p:nth-child(2n+1) { /* 奇数段 */background: lightpink;
}
<div> 这段不参与 nth-of-type 的计数、却是 nth-child 的第一段 </div>
<p> nth-of-type 的第一段、nth-child 的第二段 </p>
<p> nth-of-type 的第二段、nth-child 的第三段 </p>
<div> 这段不参与 nth-of-type 的计数、却是 nth-child 的第四段 </div>
<p> nth-of-type 的第三段、nth-child 的第五段 </p>
<p> nth-of-type 的第四段、nth-child 的第六段 </p>
伪元素选择器
selector::after { content: " " }
- - - 用来创建一个伪元素,作为已选中元素的最后一个子元素selector::before { content: " " }
- - - 用来创建一个伪元素,作为已选中元素的第一个子元素
- 需要设置
content
属性,属性值为该元素的内容
即使该元素不需要内容,也要设置content
属性,此时属性值为空字符串""
- 伪元素默认是行内元素
display: inline
- 一个选择器中只能使用一个伪元素(
img::after::before
×)
其他伪元素选择器
::selection
:鼠标选中内容发生改变,目前支持字体颜色和背景色::first-letter
:用于向某元素的第一个英文字母或第一个汉字添加样式::first-line
:用于向某个元素的第一行添加样式::placeholder
:作用于文本框内的提示符
选择器的权重 (面试考点)
选择器权重,也叫 CSS Specifity
- id
#id
- - - 100 - 属性
[attr]
、伪类:hover
、类名.class
- - - 10 - 标签
div
、伪元素::after
- - - 1 - 通配符
*
、组合+ ~ >
、否定伪类:not()
- - - 0
同一行的选择器权重值相加,权重值较高的样式会覆盖权重值较低的样式
如果权重值相同,则看样式编写的方式:行间样式 > 内联样式 > 外联样式
如果样式编写的方式也一样,则看样式编写的位置:下面的 > 上面的
CSS 权重进制不是十进制。在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量
!important
修饰的样式,权重为 infinity (无穷大)
p {background: #ccc !important;
}
【CSS】CSS选择器及其权重相关推荐
- CSS基础、盒子模型、选择器与权重
CSS基础.选择器与权重.盒子模型 一.CSS的字体属性 CSS Fonts(字体)属性用于定义字体系列,例如大小.粗细.和文字样式(斜体之类). 1.字体 CSS使用font-family属性定义文 ...
- css3 复合选择器,CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...
- html5类选择器选择权重,Python Html5和CSS3的新增功能:CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
- 关于CSS选择器的权重计算
CSS选择器的权重计算公式大概如下: 内联样式表的权值最高为 1000: ID 选择器的权值为 100 Class 类选择器.属性选择器.伪类的权值为 10 HTML 元素选择器.伪元素的权值为 1 ...
- 0基础快速入门CSS技术栈(4)—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景,及最为重要的CSS三大特性附带权重计算笔试题(附详细案例源码解析过程)
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
- css中的选择器及其权重
在 css (层叠样式表)中对 html 中的元素设定具体的样式,主要由选择器和声明块两个部分组成.选择器是用于指定所设置样式对应的 html 标签.声明块由若干个用分号分开的样式声明组成,这些样式声 ...
- 房子装修工程师CSS(一)之盒子模型/选择器的权重计算/常见样式属性/浮动float
一.盒子模型 (一)CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:margin.border.padding.content(width.height). (二)盒子模型分两种: 1. ...
- css选择器及其权重
1. 类型选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- CSS伪类和伪元素以及选择器的权重
首先,在书写上: 伪元素既可以使用::,也可以使用:.但是伪类呢,只能使用一个冒号 :. 权重 伪类选择器的权重大于伪元素选择器.伪类选择器的权重和class,属性选择器相同,伪元素选择器的权重和标签 ...
- 面试总结(CSS 的盒模型?、CSS 中选择器的优先级以及 CSS 权重如何计算?、CSS 中哪些属性可继承,哪些不可以?、CSS 单位中 px、em 和 rem 的区别?、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际 内容这几个部分 第一种是 W3C 标准的盒子 ...
最新文章
- 为什么截屏不能分享微信_为什么腾讯可以在移动端QQ做到闪照,而在Windows桌面端做不到?...
- CSS 小结笔记之文字溢出处理
- 手机调试_手机充值不好用?因为正在调试期
- 第一届大数据科学与工程国际会议(2016)征文通知
- nodejs安装失败
- python函数体以冒号起始、并且是缩进格式的_函数体以冒号起始,并且是缩进格式的。(3.0分)_学小易找答案...
- Echarts鼠标悬浮样式
- 1.2.1 Milking Cows 挤牛奶
- CSS3下的菜单效果
- java复制文件拒绝访问权限_关于IO流在复制文件时出现java.io.FileNotFoundException: D:\xxx (拒绝访问。) 拒绝访问的问题...
- 计算机系统备份教案,系统备份教案推荐.doc
- 【React自制全家桶】九、Redux入手
- 关于生僻字乱码的问题
- Android逆向案例:干掉梆梆加固免费版的反调试检测
- 开篇 | 想成为技术牛人?先搞定网络协议!
- 六、【中级篇】看门狗(watch dog)
- java将html转pdf
- 检测器评价指标-IOU
- 洛谷-P1618 三连击(升级版)
- 计算机键盘打出来都是英语大写怎么办,电脑键盘切换大小写怎么变成CapsLock和Shift键...