css进阶学习 选择符

来源:脚本之家  责任编辑:小易  

id选择器,class选择器,标签选择器,全局选择器,属性选择器,后代选择器,群组选择器,子代选择器

在我最早开始写css的时候,其代码上的高自由度就一直很令我困惑。这就是说,同一个设计,如果让不同的人来实现,最终的代码一定是有差异的。但这存在一个问题,如果不同的人通过不同的方法以及代码风格,都从外观上实现了一样的设计,将很难评价谁做得更好。想来也是,既然都实现了设计,达到了目的,css这种没有程序逻辑的代码中,又能找出什么来说明谁做得更出色呢?

[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。所有主流浏览器都

而如今,我认同的观念是,css这种描述性语言,仍然有着代码上的质量评判。评判标准就是可维护性(Maintainability)和性能(Performance),用比较通俗的话说,好的css,要对开发者的工作友好(dev-friendly),也要对浏览器友好(browser-friendly)。 本文将说明如何从css选择符的角度来提高css代码质量。

}2、类型选择符。是指以网页中已有的标签类型作为名称的选择符,例如body、div、p、span等。

关键选择符与浏览器的样式规则匹配原理

其实不用那么麻烦的理解,你只要记得用id命名的语句在CSS中用“#”选择符,而用CLASS命名的用类

css选择符的概念,在之前的新手学习css优先级的开头部分也有提到,是指每一条样式规则中,描述把样式作用到哪些元素的部分,也即{}之前的部分。在本文,还要额外介绍一个概念:关键选择符(Key selector)。关键选择符就是在每一条样式规则起始的{之前的最后一个选择符,如下图:

CSS选择器以及选择器优先级 需要掌握优先级的选择器种类 id选择器 类名选择器 标签名选择器 伪类

css选择符将确定后面的属性定义要作用到哪些元素,因此存在一个浏览器根据css选择符来应用样式到对应元素的匹配过程。关于浏览器的样式匹配系统,David Hyatt在Writing Efficient CSS for use in the Mozilla UI一文中提到了以下内容:

想必大家也都知道闫怀礼老师是因为肺部感染而逝世的,其实他们猜测这跟早年他拍戏也有关,因为当时他们总喜欢用带有很浓气味的农药驱赶蚊子,只是当时其他人总避开,只有嗅觉不是很好的沙僧没有躲避这气味,所以很多人都怀疑是这个原因造成的。闫怀礼老师去世那天,恰巧是六小龄童老师的生日,六小龄童老师表示以后再也不会过生日,会用这个日子来纪念闫怀礼。闫怀礼老师临走前,让妻子打电话给了西游记的其他三人,希望能师徒最后一次相聚。可惜扮演猪八戒的马德华老师遇到堵车,没能及时赶到。马德华老师后来回忆说:“当时我听他们说,他就是眼睛瞪着,就是不肯闭眼,不肯咽这口气,就在等我,我特别别扭,特别难受,后来他张着嘴,我说怀礼老

The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.

1去维基百科挖了一些材料,能够给咱们共享一下。克拉超级深钻孔首要,所谓的超级钻探指的是苏联的“科拉超深钻孔”:科拉超深井(Кольскаясверхглубокаяскважина)是苏联于1970年在科拉半岛邻近挪威国界的区域开端的一项科学钻探,其间最深的一个钻孔SG-3在1989年抵达12,262米,截止如今,以垂深核算,这个钻孔仍是抵达地球最深处的人造物。并且需求留意的是,这个“超级钻探”仅仅挖的深度离地上最深,可是不是最“长”的钻井,最“长”的两个钻井是卡塔尔的阿肖辛油井(12,289米)和俄罗斯在库页岛的OdoptuOP-11油井(12,345米),由于是有些钻井有也许是斜的。这个钻

意思是说,浏览器引擎在样式匹配时,以从右向左的顺序进行。在具体匹配某一条样式规则时,这个从右向左的过程会一直持续,直到读取完整个选择符序列并完成匹配,或因某一个地方的不匹配而取消(然后转到另一条样式规则)。

不知道各位平时喜欢什么样的纹身呢,美式,日式,小清新,不同的纹身风格各具特色,但是各位有没有想过植物纹身这种风格呢,把植物的形象化作纹身,好像是一个蛮有意义的想法,而在乌克兰的纹身艺术家RitKit,就把这种想法变为了现实,惊艳的植物纹身给你带来不一样的感觉。用花卉图案作为纹身素材,其实在其他风格的纹身上也经常会看到。比如OldSchool风格的纹身就比较常出现,玫瑰这样的素材。但是RitKit的花卉纹身,并不像其他风格的纹身那样,把花卉的形象概念化,而是更完整地还原了花卉本身的形象。热爱各种植物的RitKit,会把植物直接用作拓印,把染有染料的植物标本,贴在你的纹身部位上让植物的大体轮廓出现

至于为什么浏览器会选择这样的匹配顺序,你可以看看Stack Overflow上的相关讨论。大致上解释一下的话,由于最右边的关键选择符直接表示了样式定义应作用的元素,所以从右向左的顺序更利于浏览器在初始匹配的时候就确定有样式定义的元素集合,并更快地在找某一个元素的样式时避开大多数实际没有作用到的选择符。

最近小编接到很多装修小白来咨询新房的墙面装修是刷涂料好还是贴墙纸比较好的问题,于是今天整理出来这三种装修方式,都是专业油漆工的分析!大家看后就可以好好权衡一下选择怎么装啦~首先说乳胶漆,学术上来讲它的主要成分是由丙烯酸酯类、苯乙烯-丙烯酸酯共聚物以及醋酸乙烯酯类聚合物的水溶液加入多种辅助成分制成,最常见的有LT-1有光乳胶涂料。乳胶漆的优点是耐水性强,并且在湿擦洗后不会留痕迹,但它的色彩较少,遮盖力也不太好,而且还可能会出现开裂问题,所以性价比不高哒。然后是硅藻泥,硅胶泥可以完成个性化的复杂肌理制作,因为它是“固体”,可以定型出很多好看的纹路造型,而不是像“液体”一般无法固定形状。但换一个角度

更好的css选择符,是让浏览器在样式匹配过程中减少匹配查询次数,以更快的速度完成样式匹配,从而优化前端性能。这其中,也必须参考浏览器的对于样式从右向左的匹配顺序。

css选择符的正确使用方式更特定

更具体的关键选择符

关键选择符是浏览器引擎在样式匹配时最先读取到的部分,因此,如果你在某一条样式规则中使用更特定、具体的选择符,可以帮助减少浏览器的查找匹配次数。

比如说下边这样的选择符:

.content .note span{}

最后一个span是关键选择符,而span这个标签,在网页中使用是非常多的。浏览器从span开始读取选择符,就可能会为因此在样式匹配上做了一些额外工作。

如果你确定只是想为具体处于那一个位置的span元素定义样式,更好的做法是为span命名class,比如命名为span.note_text,然后简单写为:

.note_text{}

使用class选择符

class选择符(类选择符)是最利于性能优化的选择符。相对于class,ID的缺点是只允许定义给一个元素,无法重用。而此外,它在使用上没有任何比class更好的地方。很多时候,你很难确定某一个元素是否是唯一的。另外,使用class来定义样式,而保留ID给javascript,一直是一个较好的实践。如果可以,不使用ID来定义样式。

而相对于class,标签在html中的重复性要更大,因此同样可能让浏览器在样式匹配时做更多的额外工作。如果可以,除css样式清零(reset)外,不使用标签选择符(也叫元素选择符)。

缩短选择符序列

继承写法(准确地说,这里指css关系选择符中的包含选择符)是css中很常用的写法。继承写法的初衷是,如果有两个元素,都是同样的标签或有相同的class命名,加入父元素的选择符组成选择符序列,就可以避免在不需要的时候两个元素的样式互相影响。比如.confirm_layer .submit_btn就是指,class名为submit_btn,且有一个class名为confirm_layer的父元素的元素,才应用样式。

但是,避免元素样式相互影响,并不代表可以随意地使用继承选择符。前面提到,浏览器会从右向左读取整个选择符序列,直到读取完毕并匹配完成,或者因不匹配而取消。因此,短的选择符序列更有利于浏览器更快地完成匹配过程。相对的,冗长的选择符序列则认为是低效的,比如:

.header ul li .nav_link{}

建议写为:

.header .nav_link{}

一般来说,不超过3层的继承层级就可以满足实际中的开发要求。因此,应减少不必要的继承层级,使用更短的选择符序列。

此外,较长的选择符序列还有一个问题。有较长选择符的样式规则,css优先级的计算值也较大,因此,如果在以后需要写新的样式来覆盖掉它,就需要写更长的选择符(或者使用ID)以获得更高的css优先级。这对性能和代码可读性都是不利的。

避免链式选择符

链式选择符(Chaining selectors)是对单个元素同时写了多个选择符判定的情况。比如p.name是指class名为name,且标签是p的元素,才应用样式。这些判定组合可以是ID选择符,标签选择符,class选择符的任意组合。

但是,链式选择符是过度定义(over qualified)的,不利于重用,也不利于性能优化。如:

a#author{}

建议写为:

#author{}

这里的a是不必要的。一个ID只对应一个元素,没有必要再强调这个元素的标签是什么(同理,class也不必)。另外有

.content span.arrow{}

建议写为:

.content .arrow{}

这里的span.arrow中的span也是不必要的。一方面,这为浏览器在样式匹配时增加了一项额外工作:检查class名为arrow的元素的标签名是不是span,也因此降低了性能。另一方面,如果去掉了这个限定,.arrow的样式定义,就可以用在更多的元素上,也就有着更好的重用性。否则,就还得告诉别人,使用这个的时候只能用在span标签上。

同理,多个class的链式写法,如

.tips.succuss{}

建议更改命名,写为:

.tips_succuss{}

这样可以帮助浏览器减少额外的样式匹配工作。

此外,IE6还存在一个链式选择符的问题,多个class选择符写在一起时,例如.class1.class2.class3,正常情况是只有同时有这全部的class的元素,才应用样式。但IE6只认最后一个,也就是符合.class3这个选择符的元素,就应用样式。

例外情况

前面所述的选择符的写法的建议,只是从浏览器渲染性能优化,及代码的重用性方面分析得到的理论结果。在实际使用中,你并不需要严格按照这些内容来做。例如,如果你确实是准备为class名为intro的元素内的所有a标签元素都加上某样式,那么.intro a这样的选择符是明智的。

结语

关于高效的css选择符的指南,你还可以阅读google developer中的Use efficient CSS selectors。

如今,现代浏览器在样式匹配上也逐渐有了更多的优化(参考CSS Selector Performance has changed!),有些方面的内容我们已经不再需要再担心了。但是,这并不意味着不需要考虑写合理的css选择符了。css选择符性能优化是依然存在的事,你的选择符应该更好地体现你的意图,而不是随心所欲地使用。更重要的是,以这样一种稍细腻的,经过思考的想法来写css选择符,并不是一件困难的事。只要你想,形成这样的一种习惯,你就可以自然地在这方面做得更好,何乐而不为呢?

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

css选择符的选择符模式

模式/含义/内容描述

*

匹配任意元素。(通用选择器)

E

匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)

E F

匹配元素 E 的任意后代元素 F 。(后代选择器)

E > F

匹配元素 E 的任意子元素 F 。(子选择器)

E:first-child

当元素 E 是它的父元素中的第一个子元素时,匹配元素 E 。(:first-child 伪类)

E:link E:visited

如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)

E:active E:hover E:focus

在确定的用户动作中匹配 E 。(动态伪类)

E:lang(c)

如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的),则匹配该元素。(:lang() 伪类)

E + F

如果一个元素 E 直接在元素 F 之前,则匹配元素 F 。(临近选择器)

E[foo]

匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)

E[foo=warning]

匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)

E[foo~=warning]

匹配其“foo”属性值为空格分隔的值列表,并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)

E[lang|=en]

匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)

DIV.warning

仅 HTML。用法同 DIV[class~=warning]。(类选择器)

E#myid

匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)

引用:

--------------------------------------------------------------------------------

From:http://www.w3.org/TR/CSS2/selector.html

--------------------------------------------------------------------------------

我们用下面的例子来解释“[s]父元素[/s]”、“[s]子元素[/s]”、“[s]父/子[/s]”及“[s]相邻[/s]”这几个概念。

<div title=这是一个div>

<h1>这是是h1的内容</h1>

<p>这是一个段落p的内容!<strong>这里是strong的内容</strong>这是一个段落p的内容!</p>

</div>

从以上代码中,我们可以找出这样的关系:

[list]

[*] h1 和 p 同为 div 的“儿子”,两者分别同 div 形成“父/子”关系。

[*] h1,p,strong 都是 div 的“子元素”。(三者都包含在 div 之内)

[*] div 是 h1 和 p 的“父元素”。

[*] strong 和 p 形成“父/子”关系,strong 的“父元素”是 p 。

[*] 但 strong 和 div 并非“父/子”关系,而是“祖孙”关系,但 strong 依然是 div 的“子(孙)元素”。

[*] div 是 h1 p strong 三者的“祖先”,三者是 div 的“子(孙)元素”。

[*] h1 和 p 两者是相邻的。

[/list]

继承上面的实例来具体演示一下E F的关系:假如,我们需要将 strong 内的内容二字变为绿色,我们可以有哪些方法呢?

div strong {color:green;} /* - 正确。strong 是 div 的“子元素”*/

p > strong {color:green;} /* - 正确。strong 和 p 是“父/子”关系*/

div > strong {color:green;} /* - 错误!strong 虽然是 div 的“子(孙)元素”,但两者乃是“祖孙”关系,而非“父/子”关系,因此不能用 > 符号连接*/

临近选择器和通用选择器:通用选择器以星号“*”表示,可以用于替代任何 tag 。

实例:

h2 + * { color:green }/*所有紧随 h2 的元素内的文字都将呈现红色*/

CSS主要有三种选择符,是什么

CSS选择器以及选择器优先级

需要掌握优先级的选择器种类

  1. id选择器

  2. 类名选择器

  3. 标签名选择器

  4. 伪类选择器

  5. 通配符选择器

除了上面提到的几种基本选择器之外,我们还需要了解由基本选择器组成的群组、后代选择器的计算方法。

css选择符类型有哪些?

1、标签选择符:

如p{color:#F00; font-size:36px;},使用<p>直接作用</p>

2、类选择符:

如 .red{color:#C00;},使用<p class="red">直接作用</p>

3、ID选择符:

如 #two{color:#600; font-family:'汉仪行楷简';},使用<p id="two">直接作用</p>

4、包含选择符:

如 p strong{color:#F00;},使用<p><strong>直接作用</strong></p>

5、通配选择符:

如 *{color:#0C0; font-size:18px;},可以控制所有的html元素作用范围很广,但是效率较低

6、选择符分组:

如p,h1,div{color:#F00;font-size:36px;},对p,h1,div都有效

7、标签指定式选择符:

如p#one{ color:#F00;font-size:36px;},只对id为one的p标签有效

8、组合选择符:

将所有选择符类型组合使用

CSS选择符有哪些?

一般包括通配、类型、属性选择符。

css选择符简介:

通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。

假如通配选择符不是单一选择符中的唯一组成,"*"可以省略。

具体介绍:

1.通配选择符

    语法:

    * { sRules }

    说明:

    通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。

    假如通配选择符不是单一选择符中的唯一组成,"*"可以省略。

    示例:

    *[lang=fr] { font-size:14px; width:120px; }

    *.div { text-decoration:none; }

    2.类型选择符

    语法:

    E { sRules }

    说明:

    类型选择符。以文档语言对象(Element)类型作为选择符。

    示例:

    td { font-size:14px; width:120px; }

    a { text-decoration:none; }

    3.属性选择符

    语法:

    E [ attr ] { sRules }

    E [ attr = value ] { sRules }

    E [ attr ~= value ] { sRules }

    E [ attr |= value ] { sRules }

CSS的选择符包括?

正确的是1,2,3,4

1、标签选择符,<selector>test</selector>,可以selector{}

2、常见的.selector class选择符

3、常见的#selector ID 选择符

4、属性选择符,如<h1 selector="1">可以写成h1[selector="1"]

5、value值作为标签属性,没法写选择符

  • 本文相关:
  • css基础 css选择符
  • 大家看了就明白了css样式中类class与标识id选择符的区别小结
  • css选择符说明
  • 第10天:自适应高度
  • html 30分钟入门教程
  • 第1天:选择什么样的doctype
  • 巧用css的mask滤镜
  • 资料:unicode 汉字内码对应表
  • html label标签的使用教程
  • bc1998录制的css视频教程推荐新手看下
  • lesson02_04 表单标签(2)
  • li的简单应用
  • lesson01_03 注释与特殊字符
  • css选择符的选择符模式
  • CSS主要有三种选择符,是什么
  • css选择符类型有哪些?
  • CSS选择符有哪些?
  • CSS的选择符包括?
  • CSS选择符有哪些?
  • CSS里面 ~选择符的功能是什么?
  • CSS选择符有哪些?
  • .CSS选择符有哪些
  • Css基本选择符、复合选择符的定义?
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved