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选择器如 ...
随机推荐
- 开启mac上印象笔记的代码块
Mac 印象笔记左上角菜单栏:偏好设置-->软件更新-->开启代码块 (Preferences -> Software Update -> Enable code block) ...
- [开源 .NET 跨平台 Crawler 数据采集 爬虫框架: DotnetSpider] [五] 如何做全站采集?
[DotnetSpider 系列目录] 一.初衷与架构设计 二.基本使用 三.配置式爬虫 四.JSON数据解析与配置系统 五.如何做全站采集 如何做全站采集? 很多同学加群都在问, 如何使用Dotne ...
- C# 8中的Async Streams
关键要点 异步编程技术提供了一种提高程序响应能力的方法. Async/Await模式在C# 5中首次亮相,但只能返回单个标量值. C# 8添加了异步流(Async Streams),允许异步方法返回多 ...
- dpkg:错误:正在解析文件 '/var/lib/dpkg/updates/0014' 第 0 行附近:在字段名 #padding 中有换行符问题的解决方法
解决方案如下: sudo rm /var/lib/dpkg/updates/* sudo apt-get update python@ubuntu:~/Desktop/_Welcome_.jpg.ex ...
- kvm虚拟化管理平台WebVirtMgr部署-完整记录(1)
公司机房有一台2U的服务器(64G内存,32核),由于近期新增业务比较多,测试机也要新增,服务器资源十分有限.所以打算在这台2U服务器上部署kvm虚拟化,虚出多台VM出来,以应对新的测试需求.当KVM ...
- 访谈:BugPhobia’s Brief Communication
0x01 :采访的学长简介 If you weeped for the missing sunset, you would miss all the shining stars 梁野,北京航空航天大学 ...
- 软件工程项目之摄影App
摄影app 开发人员:Ives & Dyh 开发功能: 摄影师注册与认证,为年轻摄影师提供成长的空间,发挥一技之长的平台. 用户注册与验证,为有摄影需求的人提供选择摄影师进行个性化拍摄的平台. ...
- 『编程题全队』Scrum 冲刺博客
1.介绍小组新加入的成员,Ta担任的角色 Answer: 我们小组的倪兢飞同学决定跳槽到团队あ,我们小组开了一个简短而又严肃的会议,满足倪兢飞同学的意愿,并感谢他为团队做出的巨大贡献.虽然我们遗失了一 ...
- MyBatis 集合操作语法范例:配合SQL的in关键字
Java语法: private String[] tagIds; MyBatis语法 <delete id="deleteByIds" parameterType=" ...
- Java的JDK下StringBuffer与StringBuilder的区别
下载JDK的源码,咱自己分析下: 用Beyond Compare打开看一下吧 1.他俩的历史问题: StringBuffer:* Copyright (c) 2003, 2008, Oracle an ...