css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先
CSS选择器:
基本可以分为通配选择器,标签选择器,类选择器,ID选择器,简单属性选择,具体属性选择,根据部分属性值选择,特定属性选择,从结构上来分还有后代选择器,子元素选择器,相邻兄弟选择器以及伪类。
详细一些请见下表:
类型选择符 E{}
属性选择符
E[attr]{}
E[attr=value]{}选择具有attr属性且属性值等于value的E
E[attr~=value]{}选择具有attr属性且属性值为用-连字符分隔的字词列表,由value开始的E.例如
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p[class~="important"]
{
color: red;
}
</style>
</head> <body>
<h1>可以应用样式:</h1>
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a> <hr /> <h1>无法应用样式:</h1>
<p class="warning">This is a paragraph.</a>
</body>
</html>
除了上面的三个,还有部分请见下表包含选择符(又称后代选择符) E1 E2{} 子对象选择符 E1>E2{} ID选择符 #ID{} 类选择符 E.className{} 选择符分组 E1,E2,E3{} 结合后代选择器,类选择器和子选择器 例如:table.company td>p
上面的选择器会选择作为td元素子元素的所有P元素,这个td元素本身从table元素继承,并且该table元素有一个包含company的class属性。 相邻兄弟选择器 E1 + E2{}这里需要注意的是用一个选择符只能选择两个相邻兄弟中的第二个元素,举个例子 li + li {font-weight:bold;}只会把第二项和第三项加粗,第一个列表项步受影响
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head> <body>
<div>
<ul>
<li>List item </li>
<li>List item </li>
<li>List item </li>
</ul>
<ol>
<li>List item </li>
<li>List item </li>
<li>List item </li>
</ol>
</div>
</body>
</html>
结果为还有一点要注意的是,顾名思义,相邻兄弟一定要有相同的父元素。 伪类及伪对象选择符:
伪类
伪元素
举例如下:
<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head> <body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body> </html>
元素p中的内容颜色和字体就都变成了这样哪些可以继承呢
可以的有 font-size font-family color
不可以的有 border padding margin background-color width height等
优先级算法计算的问题:
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:规则:
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则;
2.!important声明的Specificity值最高;
3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;
4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。
算法:当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加,
{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity,
然后在比较取舍时按照从左到右的顺序逐位比较。
实例分析:
1.div { font-size:12px;} 分析: 1个元素{ div},Specificity值为0,0,0,1
2.body div p{color: green;} 分析:3个元素{ body div p },Specificity值为0,0,0,3
3.div .sjweb{ font-size:12px;} 分析: 1个元素{ div },Specificity值为0,0,0,1 1个类选择符{.sjweb},Specificity值为0,0,1, 0 最终:Specificity值为 0,0,1,1
4.Div # sjweb { font-size:12px;} 分析: 1个元素{ div },Specificity值为0,0,0,1 1个类选择符{.sjweb},Specificity值为0,1,0, 0 最终:Specificity值为 0,1,0,1 5.html > body div [id=”totals”] ul li > p {color:red;} 分析:
6个元素{ html body div ul li p} Specificity值为0,0,0,61个属性选择符{ [id=”totals”] } Specificity值为0,0,1,0 2个其他选择符{ > > } Specificity值为0,0,0,0 最终:Specificity值为 0,0,1,6
用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外在同级样式按照申明的顺序后出现的样式具有高优先级。
css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先的更多相关文章
- css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先
通配选择符* { sRules } 类型选择符E { sRules } td { font-size:14px; width:120px; } 属性选择符 E [ attr ] { sRule ...
- CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?
CSS 选择符有哪些? 1.id选择器(#id) 2.类选择器(.class) 3.标签选择器(div,h1,p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器 ...
- 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
- Css中的两个重要概念:块状元素和内联元素
一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
- 508,css优先级算法如何计算?
优先级就近原则,同权情况下样式定义最近者为准 载入样式以最后载入的定位为准 优先级:!important>id > class >tag; !important比内联优先级高 (百 ...
- css选择器,选择指定属性的值
选择属性为href的值: <a class='test' href='www.baidu.com' >test</a> response.css('.test::attr(hr ...
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
随机推荐
- UVA 11426 GCD - Extreme (II) (欧拉函数+筛法)
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=70017#problem/O 题意是给你n,求所有gcd(i , j)的和,其中 ...
- input type=“submit”屏蔽自带的提交事件
<p><input type="submit" class="submit" value="确认支付" onclick=& ...
- Enterprise Library 服务问题
在使用Enterprise Library而没有注册服务的时候会出现这样的问题,"Editing Post "Failed to create instances of perfo ...
- 根据powerdesigner的OO模型生成C#代码
2007-05-15 08:34:11| 分类: 转贴部分 | 标签:学习帖子 |字号 订阅 习惯了用Powerdesigner设计数据库模型,XDE设计类图.因此我一般的设计方法是用PD做分析模 ...
- Oracle超出最大连接数问题及解决
用过Oracle的应该都熟悉如何查看和设置Oracle数据库的最大连接数.这里就再啰嗦一遍. 查看当前的连接数,可以用select count(*) from v$process;设置的最大连接数(默 ...
- asp.net中使用swfupload上传大文件
转载:http://www.cnblogs.com/niunan/archive/2012/01/12/2320705.html 花了一天多时间研究出来的,其实也就是网上下别人的代码然后再自己修修改改 ...
- Actions 动作集
--> 移动鼠标到指定位置(先触发onMouseOver动作) Actions action = new Actions(driver); WebElement th ...
- 【OSG】osgText::Text 研究
由于需要在3D坐标轴上显示刻度值,所以要用到osgText::Text,这里简单记录一下其常见用法. 一.基本知识 常见设置 设置字体:setFont 设置内容:setText,这里输入参数需要是os ...
- C#实现汉诺塔问题
汉诺塔的由来:汉诺塔是源自印度神话里的玩具.上帝创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上安大小顺序摞着64片黄金圆盘.上帝命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上.并且 ...
- SQL Server压缩日志及数据库文件大小
请按步骤进行,未进行前面的步骤时,请不要做后面的步骤,以免损坏你的数据库. 一般不建议做第4,6两步,第4步不安全,有可能损坏数据库或丢失数据.第6步如果日志达到上限,则以后的数据库处理会失败,在清理 ...
包含选择符(又称后代选择符) E1 E2{}
子对象选择符 E1>E2{}
ID选择符 #ID{}
类选择符 E.className{}
选择符分组 E1,E2,E3{}
结合后代选择器,类选择器和子选择器 例如:table.company td>p
还有一点要注意的是,顾名思义,相邻兄弟一定要有相同的父元素。
伪类及伪对象选择符:

哪些可以继承呢