博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS优先级
阅读量:6676 次
发布时间:2019-06-25

本文共 1982 字,大约阅读时间需要 6 分钟。

一.CSS代码出现的几个位置

多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。

一般情况下,优先级如下:(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style
还有一种不常用的CSS导入方式:@import url(mycss/haha.css),这种方式是页面显示出来之后在加载css,所以页面一开始没有css定义显示比较混乱,过了一会儿才加载css显示正常,页面会闪烁一下.

二.选择器的优先级

每个选择器都有一个优先级.这个优先级可以定义为五元组(a,b,c,d,e)

第一个数字(a)表示style属性,即内联样式。
第二个数字(b)表示id选择器,b表示id选择器的个数。
第三个数字(c)表示class选择器,c表示类及伪类的个数,包括class(.btn)和属性css选择器(比如li[id=red])。
第四个数字(d)表示tag选择器,d表示元素和伪元素(如first-child)的个数。
第五个数字(e)表示这个句子是整个css系统中的第几个选择器.

当判断一个选择器的优先级时,按照这五元组进行比较,第一个相同比较第二个,前两个相同比较第三个...第五个数字肯定不同,于是优先级就排出来了.其实比较时比较五个数字比较费力,不如直接将他们乘以权值映射为一个int.浏览器实现时到底采用什么方式并不重要,重要的是明白这个道理.下面给出浏览器解析css和渲染元素的伪代码.

def initSelectors():    for selector in css:        selector.priority=0        #这是第几个选择器        selector.priority+=css.indexOf(selector)        if selector is important:            selector.priority+=10000        if selector is inline:#内联样式至高无上,如果为内联样式,其它几个的值肯定是0            selector.priority+=len(css)**4        else:            for i in selector:                if i is idSelector:                    selector.priority+=len(css)**3                elif i is classSelector:                    selector.priority+=len(css)**2                elif i is tagSelector:                    selector.priority+=len(css)def renderElements():    for element in html:        attrTable={}        for selector in selectors:            if element is selector:                for attrbute in selector:                    if attrTable[attrbute]==null or attrTable[attrbute].priority

通用css选择器(*)是0优先级。

如果两个CSS选择器有同样的优先级,在样式表中后面的那个起作用。
CSS选择器只有4种:

  • 内联样式style='font-size:18px;'内联样式其实相当于无名选择器
  • id选择器
  • class选择器,伪类选择器
  • tag选择器,伪元素选择器

三.选择器与选择器之间的三种连接关系

  • 空格表示后代
  • +表示兄弟
  • >表示子代

四.最近jquery中用到的几个选择器

$('.answer input[value=0]').attr('checked',true)$(".question_answers").find('input:first').attr('checked',true)$("button[id^=peer]").click();$("label:contains('正确'):not(:contains('部分'))").each(function(){$(this).prev().attr('checked',true)})

转载地址:http://xerxo.baihongyu.com/

你可能感兴趣的文章
Example016实现下拉框
查看>>
[HDU]2092整数解
查看>>
SQL Server 附加数据库提示5120错误
查看>>
SPOJ 10570 LONGCS - Longest Common Substring
查看>>
Javascript图片轮播
查看>>
java 实现七大基本排序算法
查看>>
Single Number
查看>>
bat批量重命名文件
查看>>
Java使用对象流读取文件的问题
查看>>
Sublime Text 3 安装插件管理 Package Control
查看>>
移动web图片加载完获取img宽高
查看>>
线段树入门
查看>>
AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown
查看>>
牛客小白月赛14 -G (筛法)
查看>>
Java内存模型(JMM)
查看>>
守护进程
查看>>
mongodb之 oplog 日志详解
查看>>
Project Euler Problem 32 Pandigital products
查看>>
HDU1205 吃糖果【水题】
查看>>
扩展欧几里得算法与模乘逆元的程序
查看>>