css中常用的选择器和选择器优先级
css常用的选择器:类选择器,id选择器,元素选择器,伪类选择器,伪元素选择器,属性选择器.
选择器的优先级由四个部分组成:0,0,0,0
一个选择器的具体优先级如下规则确定:
- ID选择器 加 0,1,0,0
- 类选择器,伪类选择器,属性选择器 加0,0,1,0
- 元素和伪元素选择器 加0,0,0,1
- 结合符和通配符对优先级没有贡献
例子
- h1{color:red;} /* 优先级为 0,0,0,1 */
- p em{color:purple;} /* 优先级为 0,0,0,2 */
- p.bright em.dark{color:maroon;} /* 优先级 0,0,2,2 */
id2 {color:blue;} /* 优先级 0,1,0,0 */
一些常用的选择器
类 id 元素选择器
<li class="red">1</li>
<li id="blue">2</li>
<li class="red">3</li>
<li>4</li>
<style>
.red{color:red;}
#blue{color:blue;}
li{color:green;}
*{font-size:16px;}
</style>
伪类选择器
<a href="https://www.baidu.com">链接</a>
<style>
a:link{color:blue;}
a:visited{color:grey;}
a:hover{color:red;}
a:active{color:yellow;}
</style>
且
E:focus
E:not()
E:empty
E:checked
E:enabled
E:disabled
E:first-child 同一层排行第一
E:nth-child(n)
E:nth-last-child(n)
E:last-child
E:only-child
E:first-of-type 同一层细分领域第一
E:nth-child(n)
E:nth-last-child(n)
E:last-of-type
E:only-of-type
伪元素选择器
内的
E::first-letter E内的第一个字母
E::first-line E内的第一行
E::before E内的最前面
E::after E内的最后面
属性选择器
^开始 $结尾 *包含
E[att]
E[att="val"]
E[att^="val"]
E[att$="val"]
E[att*="val"]
包含val并用空格分隔
E[att~="val"]
以val开头并用连接符"-"分隔
E[att|="val"]
css中常用的选择器和选择器优先级的更多相关文章
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- js函数实现转换css中常用的颜色编码
//转换css中常用颜色编码 var toRGB = function (val){ var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; ...
- 是的,是你的BFC - CSS中常用
是的,是你的BFC - CSS中常用 是的,是你的BFC - CSS中常用 CFC 全称:(Block Formatting Contexts)含义是块级格式化上下文),就是一个块级元素的渲染 ...
- css中最基本几个选择器
css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器 ...
- CSS中的选择器之html选择器和伪类选择器
1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...
- CSS最常用的三种选择器
标签选择器 样式的名称和标签的名称相同,如示例中的p标签,则对应名称为p的样式,若页面中有多个p标签,则这些p标签共同享用该样式 p{ color:blue; } <p>标签选择器< ...
- CSS中常用的字体单位:px、em、rem和%的区别
在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...
- CSS中常用属性之字体属性
1,以下是CSS中常用字体属性: font-family 字体样式 font-size 字体大小 font-size-adjust 为元素规定 ...
- CSS 中常用的选择器(选择符)
一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:l ...
随机推荐
- JavaScript基础04——数组的创建及方法
数组的概念及定义 数组的概念: 一组数据,数据的组和 哪些数据的组和,只要是数据(所有数据),就可以放在数组中 数组的意义: 可以同时操作多个数据 数组 ...
- SVN 常用 还原项目
1.先修改本来两个文件,然后再提交到SVN 2.在日志界面,查看提交的文件,找到对应的版本号 3.找到对应的版本号(这里的版本号是1995,我提交生成的版本号 的前一个版本 才是我未作出修改的版本), ...
- RookeyFrame bin 目录
如果把bin目录删掉,重新生成的话,还需要加载很多东西哦,具体可以对比一下下载下来的文件
- CSPS_110
永远不要相信出题人诸如“保证图联通”之类的鬼话. T1 最优情况一定为从LR最高的不同位以下全是1 T2 折半搜索 T3 1.我算法不是mlog^2m,最坏情况下mlogm再乘个根号m, 考试的时候没 ...
- 洛谷 P5146 最大差值 题解
P5146 最大差值 题目描述 HKE最近热衷于研究序列,有一次他发现了一个有趣的问题: 对于一个序列\(A_1,A_2\cdots A_n\),找出两个数\(i,j\),\(1\leq i< ...
- 洛谷P2432 zxbsmk爱查错
题目 DP,需要注意边界上的问题. 状态定义\(dp[i]\)为句子第i位去除字母的最小值,答案就是\(dp[len]\). 易得状态转移方程为: \[dp[i]=min(dp[i-1]+1,dp[l ...
- GoCN每日新闻(2019-10-07)
GoCN每日新闻(2019-10-07) 国庆专辑:GopherChina 祝大家国庆节快乐(假期最后一天) GoCN每日新闻(2019-10-07) 1. Go 不好的点:JSON 解析的探 ...
- 2015-2016-2《Java程序设计》团队博客1
项目内容 经过一些讨论之后决定了最终的项目:简易画图板项目设计与开发 目标 制作一个能够画各种图形的画板,并能有多种颜色可以选择:输入文本时也可以选择字体:能够保存,新建,和导入图片 实现计划 十一周 ...
- IE安全限制
在安全级别下面设置置进行如下调整: A.ActiveX控件自动提示:启用 B.对标记为可安全执行脚本的ActiveX控件执行脚本:启用 C.对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本 ...
- 第06组 Beta冲刺(3/4)
队名:福大帮 组长博客链接: 作业博客 : https://edu.cnblogs.com/campus/fzu/SoftwareEngineeringClassAofFuzhouUniversity ...