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 ...
随机推荐
- 英语听力,如何成为更好的交谈着https://www.bilibili.com/video/av4279405?from=search&seid=5889429711390689339
and how many of you know at least one person that you because you just do not want to talk to them.y ...
- mysql 左联结与右联结
mysql> select * from test; +----+------------+-------+-----------+ | id | name | score | subject ...
- 「APIO2018」选圆圈
传送门 Description 有\(n\)个圆,每次找到这些圆中半径最大中的编号最小的圆,删除ta及与其有交集的所有圆. 对于每个圆,求出它是被哪一个圆删除的. Solution K-D Tree ...
- windows批量删除当前目录以及子目录的所有空文件夹
在桌面创建一个记事本,将以下内容复制粘贴到记事本中,将记事本的拓展名修改为bat即可,然后将该文件放到需要执行的目录双击. @echo off setlocal enabledelayedexpans ...
- 20189220 余超《Linux内核原理与分析》第九周作业
理解进程调度时机跟踪分析进程调度与进程切换的过程 本章的基础知识总结 一般来说,进程调度分为三种类型:中断处理过程(包括时钟中断.I/O 中断.系统调用和异常)中,直接调用schedule,或者返回用 ...
- CSS背景和精灵图
如何设置背景图片? 1.在CSS中有个叫做background-image:url():的属性,就是专门用于设置背景图片的. 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地 ...
- SSM项目实战 之 Maven
目录 Maven 简介 Maven是什么 Maven下载安装 Maven使用 Maven规定了一套默认的项目格式 创建第一个Maven项目 Maven仓库 Maven常用命令 Maven作用范围(sc ...
- 【转】Fiddler抓包和修改WebSocket数据,支持wss
记录一下用Fiddler对WebSocket收发的数据进行抓包分析和篡改数据,只找到这么一个方法,能用就行吧.时间:2019-3-29环境: win7 + Fiddler 5.0 Fiddler抓取W ...
- (二)OpenCV-Python学习—对比度增强
·对于部分图像,会出现整体较暗或较亮的情况,这是由于图片的灰度值范围较小,即对比度低.实际应用中,通过绘制图片的灰度直方图,可以很明显的判断图片的灰度值分布,区分其对比度高低.对于对比度较低的图片,可 ...
- openstack错误问题定位及调试