CSS选择器,选择器的优先级
CSS选择器
CSS基本语法
- 选择器 + 声明块
- 选择器 - 通过CSS选择器选中页面中的指定元素,下面会重点写。
声明块 - 选择器后面跟着的是声明块,使用{}括起来,由一个个声明组成,声明由名值对组成,每一个声明使用;结尾。
常用选择器
1.元素选择器
语法:标签名{}
eg:p{} //为所有的p元素设置样式。
2.ID选择器
语法:#id{} //id值唯一,不能重复
ed: #box{} //为id为box的元素设置样式。
3.类选择器
语法:.class{}
eg: .box{} //为所有的class值为box的元素设置样式。
4.分组选择器(也叫并集选择器)
语法:选择器1,选择器2,选择器N{}
eg: #box1,.box2,p{} //为为id为box1,class为box2和p的元素共同设置样式。
5.交集选择器
语法:选择器1选择器2选择器3{}
eg:p.box1{} //为class值为box1的p元素设置样式,注意id为唯一值,一般id选择器不会存在于交集选择器中(没必要)。
6.后代选择器
语法:选择器1 选择器2{}
eg:p .box{} //选中指定祖先元素p的指定后代.box。
7.子元素选择器
语法:父元素>子元素{}
eg:p>.box{} //选中制定父元素p的制定子元素。box。注意与后代元素选择器的区别
8.伪类选择器
- 伪类可以用来表示一些特殊的状态:
:link - 未访问过的超链接。
:visited - 已访问过的超链接。
:hover - 鼠标移入的元素。
:active - 正在点击的元素。
由于选择器优先级的问题,给超链接a设置伪类时,需要注意他们的顺序,一般的顺序是:
love hate 记作(爱与恨),方便记忆
:link>:visited>:hover>:active
选择器的优先级
为同一个元素设置多个样式时,此时哪个样式生效由选择器的优先级确定:
- 选择器的优先级(权重):
· | 内联样式 | id选择器 | 类和伪类选择器 | 元素选择器 | 统配选择器 | 继承的样式 |
---|---|---|---|---|---|---|
优先级 | 1000 | 100 | 10 | 1 | 0 | 无 |
- 当一个选择器中含有多个选择器时,需要将所有的选择器的优先级进行相加,然后再进行比较,优先级高的优先显示,选择器的计算不会超过其最大的数量级(10个id选择器的优先级不能达到1000)
分组选择器(并集选择器)的优先级单独计算,不会相加。 - 样式后面加!important,该样式获取最高优先级,内联样式不能加!important属性。
- 样式相同的谁在下面执行谁(样式的覆盖)。
CSS选择器,选择器的优先级的更多相关文章
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)
选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { fon ...
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- CSS系列------选择器和选择器的优先级
1.1.基本选择器 通配符选择器(*) 通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...
- CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- CSS 从入门到放弃系列:CSS的选择器和优先级
CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...
- python 46 css组合选择器 及优先级 、属性选择器
一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器: d ...
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- CSS中选择器优先级与!important权重使用
CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...
- 【CSS】选择器优先级
CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...
随机推荐
- 在WPF中使用FontAwesome图标字体
原文:在WPF中使用FontAwesome图标字体 版权声明:原创内容转载必须注明出处,否则追究相关责任. https://blog.csdn.net/qq_36663276/article/deta ...
- Hybrid小程序混合开发之路 - 数据交互
HTML+CSS是历史悠久.超高自由度.控制精准.表现能力极强.编码简单.学习门槛超低.真跨平台的一种UI界面开发方式. 本文介绍的是微信小程序和H5混合开发的一种数据交互方式. 很多应用在原生界面中 ...
- kvm虚拟机日常操作命令梳理
KVM虚拟机的管理主要是通过virsh命令对虚拟机进行管理.废话不多说,下面列出kvm日常管理中的命令 1)查看KVM虚拟机配置文件及运行状态 KVM虚拟机默认配置文件位置: /etc/libvirt ...
- systemctl添加开机启动
我们对service和chkconfig两个命令都不陌生,systemctl 是管制服务的主要工具, 它整合了chkconfig 与 service功能于一体. systemctl is-enable ...
- php 中 opendir() readdir() scandir()
opendir(path,context)若成功,则该函数返回一个目录流,否则返回 false 以及一个 error.可以通过在函数名前加上 “@” 来隐藏 error 的输出. readdir() ...
- M1/M2项目阶段总结
1.M1/M2总结 我们这学期完成了学霸项目. 在M1阶段,我们首先进行了分工,完成了一个系统的计划,然后是对学长代码的移植和优化.在优化代码的过程中,我们遇到了不少问题,比如一些代码的冗余以及指向性 ...
- 【实践报告】Linux基础实践一
[chmod 命令] chmod命令是非常重要的,用于改变文件或目录的访问权限.用户用它控制文件或目录的访问权限. 该命令有两种用法.一种是包含字母和操作符表达式的文字设定法:另一种是包含数字的数字设 ...
- Linux内核分析作业第五周
系统调用的三个层次(下) 一.给MenuOS增加time和time-asm命令 1.克隆并自动编译 MenuOS rm menu -rf 强制删除原menu文件 git clone https://g ...
- Leetcode——171.宝石与石头
水题: 给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头. S 中每个字符代表了一种你拥有的石头的类型,你想知道你拥有的石头中有多少是宝石. J 中的字母不重复,J 和 S中的所有字符 ...
- PostgreSQL、SQL Server数据库中的数据类型的映射关系
PostgreSQL 8.1 轰动发布,我也打算将原来使用 SQL Server 的一些应用迁移到 PostgreSQL 上,首先需要迁移的是表,那么这就必须要先搞清楚这两个数据库中的数据类型的映射关 ...