zoukankan      html  css  js  c++  java
  • CSS优先级

    一.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<selector.priority:
    						attrTable[attrbute]=selector[attrbute]
    						attrTable[attrbute].priority=selector.priority
    		render(element,attrTable)
    

    通用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)})
    
  • 相关阅读:
    jquery 代码搜集
    Windows Server 2008中安装IIS7.0
    javascript 判断两个日期之间的天数 兼容ie,firefox
    jquery选择器大全
    原始ajax方式调用asp.net后台方法
    JavaScript及C# URI编码详解
    利用JQuery直接调用asp.net后台方法
    C#操作XML小结_转载
    从bnbt tracker源码分析bt客户端与traker的通信
    传说中的神器: shared_ptr/weak_ptr/scoped_ptr
  • 原文地址:https://www.cnblogs.com/weiyinfu/p/6056585.html
Copyright © 2011-2022 走看看