CSS常用的选择器和优先级的权重问题
CSS注释
CSS修改页面中的所有标签,必须借助选择器选中。
选择器中,可以写多对CSS属性,用{}包裹;
每个属性名与属性值之间用:分隔,多对属性之间,必须用;来分隔
选择器{
属性1:属性值1;
属性2:属性值2;
【选择器的命名规范】
1、只能有字母、数字、下划线、减号组成。
2、开头不能是数字,也不能是只有一个减号。
一般,起名要求有语义,使用英文单词与数字的组合。
1、标签选择器
写法:HTML标签名{}
作用:可以选中页面中,所有与选择器同名的HTML标签。
例如:
li{
color:red;
font-size: 48px;
}
2、类选择器(class选择器)
写法:.class名{}
调用:在需要调用选择器样式的标签上,使用class=“class名”调用选择器
优先级:class选择器>标签选择器
例如:
.first{
color: blue;
}
3、ID选择器
写法:#ID名{}
调用:需要调用样式的标签,起一个id=“ID名”
优先级:ID选择器>class选择器
注意:一个页面中,不能出现同名ID
例如:
#one{
background-color: yellow;
}
【class选择器和ID选择器的区别】
1、写法不同:class选择器用.声明,ID选择器用#声明;
2、优先级不同:ID选择器>class选择器;
3、作用范围不同:class选择器可以多次调用,ID选择器只能使用一次。
4、通用选择器
写法:*{}
作用:可以选中页面中所有的HTML标签。
优先级:最低!!
例如:
*{
color: orange;
}
5、并集选择器
写法:选择器1,选择器2,.....,选择器n{}
生效规则:多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。
例如:
li,.first{
color: red;
}
6、交集选择器
写法:选择器1选择器2......选择器n{} 所有选择器紧挨着,没有分隔
生效规则:多个选择器取交集,则必须满足所有选择器的要求,才能生效
例如:
li.first{
color:red;
}
7、后代选择器
写法:选择器1选择器2......选择器n{} 选择器之间空格分隔
生效规则:只要满足,后一选择器是前一个选择器的后代,即可生效。(后代包括子代、
孙代、重孙代 。。。)
例如:
div span{
color:orange
}
8、子代选择器
写法:选择器1>选择器2>......>选择器n{} 选择器之间用>分隔
生效规则:必须满足,后一个选择器是前一个选择器的直接子代,才能生效。(
中间不能间隔任何标签)
例如:
div>span{
color: orangered;
}
【优先级的权重问题】
1、css生效的第一原则是“近者优先”!即,哪个选择器作用于最里层标签,则这个选择器生效;
2、当选择器作用于同一层时,可以根据优先级权重,进行累加计算:
ID选择器为100 > class选择器为10 > 标签选择器为1
注意:并集选择器,相当于多个选择器拆开写,所以,并集选择器的优先级不能累加。
3、当选择器作用于同一层,且优先级权重相等时。则,写在最后的选择器生效。
转载于:https://www.cnblogs.com/rsj1/p/7402348.html
CSS常用的选择器和优先级的权重问题相关推荐
- css有哪些选择器,优先级如何计算?
这里是修真院前端小课堂,每篇分享文从 八个方面深度解析前端知识/技能,本篇分享的是: [css有哪些选择器,优先级如何计算?] 开场语: 大家好,我是IT修真院上海分院第10期的学员林璇,一枚正直纯洁 ...
- 【CSS笔记】CSS选择器的优先级(权重)
目录 1.1.选择器的优先级 1.2.CSS选择器权重 1.1.选择器的优先级 CSS选择器的优先级顺序如下所示: 内联样式(style) > id选择器 > class选择器 > ...
- css选择器的优先级和权重问题
CSS选择器的种类: 1.id选择器如:(id="name",id="name_txt)(*name) 2.class选择器(如:class="head&quo ...
- css简介与选择器(优先级)
CSS简介: html是对网页划分区域 css是对划分区域的美化 语法: 选择元素{ 属性1:属性值1, 属性2:属性值2 - } <div style="width: 100px; ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- CSS选择器的优先级的相关介绍
css选择器的优先级 使用不同的选择器,选中同一个元素并且设样式的时候, 这样样式就会产生冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示 优先级规则(权重值 ...
- html中p标签的伪类选择器,表单标签和css伪类选择器
一.表单标签和input标签 1.表单标签:form 这个标签作为一个容器,来收集和提交这个标签中其他相关标签的数据,一般不单独使用 active属性:设置提交路径(接口) method属性:设置请求 ...
- css基本语法选择器
1.css在html中使用方法 css 层叠样式表 a.行内样式 元素上定义一个style属性,将样式写在style属性当中 b.内联样式 ...
- CSS、CSS3选择器
1.css基础选择器 (1)标签选择器: (2)类选择器: (3)id选择器: 只能调用一次(一般和js搭配使用). (4)通配符选择器: 2.复合选择器 (1)后代选择器(包含选择器): (2)子选 ...
最新文章
- 数据备份软件,BackBone,NetVault,网络存储备份,系统集成
- python多久能上手_小白学习Python,怎样能够快速入门上手
- WinRar 代替之选:7-Zip+7zSfxTool
- 方法传递java_Java 程序将方法作为参数传递给其他方法
- FAX modem和传真协议简介
- 怎么把截屏的一部分内容涂掉_观影手帐怎么做?这里有妙招!
- skynet.fork_Apache Ant 1.10.6发布–用于junitlauncher的fork模式以及新的jmod和链接任务
- ArcPy处理土地利用类型数据
- OpenShift 4 之登录进 CodeReady Container 的 CoreOS
- DeFi 借贷协议 NAOS Finance 完成种子轮融资
- script标签中的crossorigin属性
- 干货干货:px和毫米之间的转换
- DOM之节点操作总结(附实例、图解)
- Apache虚拟主机的三种方式
- cocos2dx 3d开源项目 fantasyWarrior3D 从零走起 6完结 [AttackManagerGameMaster]
- python爬虫实例手机_10个python爬虫入门实例
- Layout室内设计施工图——PDF矢量图纸输出和显示模式区别
- 车联网开发板_车联网开发.PDF
- u盘插到电脑计算机里没有反应,U盘插入电脑没有反应 怎么查看是哪里坏了?
- 关于小程序获取手机号解密失败问题