CSS教程:优先级问题的考虑实例

2016-02-19 23:39 2 1 收藏

今天图老师小编要跟大家分享CSS教程:优先级问题的考虑实例,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

  如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规则来决定哪一个非常特殊而胜出。

  它可能不像其它那么重要,大部分案例你不需要担心冲突,但大型而且复杂的CSS文件,或有很多CSS文件组成的,可能产生冲突。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  选择器一样的情况下后面的会覆盖前面的属性。比如:

p { color: red; }
p { color: blue; }

  p元素的元素将是蓝色,因为遵循后面的规则。

  然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/) div p { color: red; }
p { color: blue; }

  也许你看起来p元素在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择器的特性却是红色。基本上,一个选择器越多特性,样式冲突的时候将显示它的样式。

  一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。它们加起来就可以计算出特性的值。

  p的特性是1(一个html选择器)
  div p的特性是2(两个html选择器)
  .tree的特性是10(1个class选择器)
  div p.tree的特性是1+1+10=12,(两个html选择器,一个class选择器)
  #baobab的特性是100(1个ID选择器)
  body #content .alternative p的特性是112(两个html选择器,一个ID选择器,一个类选择器)

  按照上面的规则,div p.tree的特性比div p高,body #content .alternative p又比它们两个都高。

来源:https://www.tulaoshi.com/n/20160219/1630308.html

延伸阅读
标签: Web开发
正则表达式从左到右进行计算,并遵循优先级顺序,这与算术表达式非常类似。   运算符 下表从最高到最低说明了各种正则表达式运算符的优先级顺序: 运算符 说明 \ 转义符 (), (?:), (?=), [] 括号和中括号 *, +, ?, {n}, {n,}, {n,m} 限定符 ^, $, \任何元字符、任何字符 定位点和序列 | 替换 ...
标签: Web开发
可以看出直接重定义标签样式的有效性是最低的, 其次是用"."定义的伪类, 再次是用重定义标签加伪类的方式(类似于H2.myclass{color:blue}的写法),级别最高的就是用id定义的CSS样式-- HTML HEAD STYLE H1{color:red; } .myclass{color:green} H2.myclass{color:blue} #myid{color:brown} /STYLE /HEAD BODY H1这是红色的一号标题。/H1 ...
import java.util.*; /**  * pTitle: 提高线程优先级/p  * pDescription: 通过修改线程的优先级,是线程获得优先处理。/p  * pCopyright: Copyright (c) 2003/p  * pFilename: upPRIThread.java/p  * @version 1.0  */ public class upPRIThread {  //主方法  public static void main(String[] ...
标签: Java JAVA基础
限制线程优先级和调度 Java 线程模型涉及可以动态更改的线程优先级。本质上,线程的优先级是从 1 到 10 之间的一个数字,数字越大表明任务越紧急。JVM 标准首先调用优先级较高的线程,然后才调用优先级较低的线程。但是,该标准对具有相同优先级的线程的处理是随机的。如何处理这些线程取决于基层的操作系统策略。在某些...
如何为win7设置网络优先级?   什么叫做网络优先级呢?咱们这里先说明一下,大家在使用win7旗舰版下载的时候,可能可以同时使用有线网络和无线网络两种,那么这个时候,就会有一个选择的问题,就有一个先后的问题,那么这个问tulaoShi.com题就是网络优先级了。也就是说,咱们让win7旗舰版优先选择哪个网络。那么这个网络优先级在win7旗...

经验教程

894

收藏

22
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部