首页 > 其他分享 >CSS选择器优先级顺序

CSS选择器优先级顺序

时间:2022-08-29 22:01:39浏览次数:51  
标签:优先级 选择器 选择符 css li id CSS

css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。
在看css选择器优先级顺序前,我们先来简单说说css基本选择器有哪些?
1.标记选择器(如:body,div,p,ul,li)
2.id选择器(如:id=“name”,id=“name_txt”)
3.类选择器(如:id=“name”,id=“name_txt”)
4.后代选择器(如:#head.nav ul li从父集到子孙集的选择器)
5.子元素选择器(如:div>p,带大于号>)
6.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)
看完了基本的css选择器类型后,我们接着来看一下css优先级的概念。
当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,用到谁的值谁的优先级就高。
我们来看一下css选择器优先级的算法:
每个规则对应一个初始"四位数":0、0、0、0
若是行内选择符,则加1、0、0、0
若是ID选择符,则加0、1、0、0
若是类选择符/伪类选择符,则分别加0、0、1、0
若是元素选择符,则分别加0、0、0、1
算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。
看完了上述内容,那我们就来看看css选择器优先级的具体排序。
css选择器优先级最高到最低顺序为:
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.子选择器(ul<li)
5.后代选择器(li a)
6.伪类选择(a:hover,li:nth-child)
最后,需要注意的是:
!important的优先级是最高的,但出现冲突时则需比较”四位数“;
优先级相同时,则采用就近原则,选择最后出现的样式;
继承得来的属性,其优先级最低。

标签:优先级,选择器,选择符,css,li,id,CSS
From: https://www.cnblogs.com/bkycnd/p/16637578.html

相关文章

  • 简单的Css动画--闪烁的文字效果
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"c......
  • TDesign组件库 小程序组件怎么自定义CSS样式
    不知道有没有人跟我有同样的疑问,看了几遍文档后我懂了Html代码<t-searchclass="searchBox"model:value="{{searchVal}}"placeholder="请输入要查询的商品名称"/......
  • 在 HTML 和 CSS 中隐藏元素有哪些不同的方法?
    在HTML和CSS中隐藏元素有哪些不同的方法?这些是使用HTML或CSS在网页中隐藏内容的一些主要方法。这些是使用HTML或CSS在网页中隐藏内容的一些主要方法。安......
  • 前端CSS的简单学习
    1:什么是CSSCascadingstyleSheet:层叠级联样式表CSS:字体,颜色,边距,宽度,背景图片。。。2:CSS的快速入门语法(推荐引入css的样式)建议使用独立的css文件,方便项目的维......
  • Vue引入CSS样式的方法
    Vue引入CSS样式的方法https://blog.csdn.net/pick_ears/article/details/122214627......
  • CSS 行内几种样式
    什么是行内样式行内样式,其实从它的名字就可以看出来它的特点,就是直接在HTML标签中使用style属性设置CSS样式。例如像下面这样的:<pstyle="font-size:18px;">行内样式</......
  • CSS三中样式(简单的代码)
    三中的使用方法的简单实例如下:行内样式:<!doctypehtml><html><head><metacharset="UTF-8"><title>css行内样式</title></head><body><divstyle="width:100px;h......
  • css
    <!--这个是html的注释,而/**/这个是css的注释,不同注释使用于不同的地方--><!--link标签专门用来引入css样式代码-->  <!--style标签专门用来定义css样式代码-->......
  • 在 CSS 中使用媒体查询
    在CSS中使用媒体查询CSS中的媒体查询改变了网站的整体功能和响应能力。它们有点像“if”语句,例如,如果视口宽度是这个大小或更低,那么就改变它。媒体查询主要用于使网站......
  • uniapp使用css实现固定横屏
    由于h5无法使用app-plus的属性,只好通过样式实现直接上代码html<view:class="islandscape?'preview-maintrans':'preview-main'"><u-iconname="arrow-left"......