css选择题（共9篇）
css选择题 篇1
...
③ 伪元素和伪类选择器
样例代码如下：...p:first-letter{ font-size: x-large; color: red;}:nth-of-type(2){ background-color: red; color: #000000;}...
④ 联合选择器和反选择器
利用选择器组合实现联合选择和反选择，
电脑资料
样例代码如下：...h1, h2{ background-color: red; color: #000000;}:not(html):not(body):not(:first-child){ border: medium double #000000;}...
css选择题 篇2
按照浏览器对CSS选择符书写规则带来的页面开销 (从小到大) 的顺序, 下面将列举CSS选择符的各种类型, 并作简要的说明。
(1) ID选择符, 示例:
#top{margin-top:50px;}。这类选择符最为简单和高效, 它根据指定的id匹配页面中的唯一的元素。上面这个例子浏览器为页面匹配了id属性为top 的元素。
(2) 类选择符, 示例:
.idx{font-size:12px;}。类选择符的规则是通过点 (.) 和紧跟其后的类名来匹配所有类属性class等于该类名的元素。由于允许多个页面元素拥有相同的类, 匹配类选择符所带来的开销可能会大些。
(3) 类型选择符, 示例:
a{text-decoration:none;}。类型选择符用于指定元素类型的页面中所有元素, 这是一种给指定类型元素添加样式的简便方法。上面的例子中浏览器为页面中所有链接去除了下划线。由于页面中不同类型的元素出现的几率可能很不相同, 所以这种选择符带来的开销可大可小。
(4) 相邻兄弟选择符, 示例:
h1+h2{margin-top:30px;}。这种选择符是用加号 (+) 把两个简单选择符组合起来, 它匹配的是加号两端标签、id或类别相邻时加号后面的选择符对应的页面元素。在这个例子中, 匹配的是与h1标签紧紧相邻的h2标签元素。这种选择符带来的开销大于没有使用连接符的简单选择符。
(5) 子选择符, 示例:
#top>li{font-weight:bold;}。这种选择符是用大于号 (>) 把两个或多个简单选择符组合起来, 它匹配的是以大于号左侧为父元素右侧为子元素的页面元素。在这个例子中匹配的是标识为top的元素的子元素li。这种选择符带来的开销同样大于简单选择符。
(6) 后代选择符, 示例:
#top a{ text-decoration:none;}。这种选择符是用空格 (“ ”) 把两个或多个简单选择符组合起来, 当后面选择符的对象是前面选择符对象的后代 (子、孙等) 时, 后代选择符会进行匹配。这种选择符可能带来的开销是最大的, 其使用应格外小心, 其原因将在下文论述。
还有通配选择符, 属性选择符, 伪类和伪元素选择符, 因其无关本文讨论的重点, 就不一一而述了。
2 最右边优先原则
CSS选择符对性能的影响, 源于浏览器匹配选择符和文档元素时所耗费的时间, 网页前端程序员可通过编写更高效的选择符来控制匹配的耗时, 那就需要深入理解选择符到底是如何匹配的。
我们大多数人, 包括具有一定开发经验的网页前端程序员, 从小就养成了从左到右的阅读习惯和思维习惯, 这本无可厚非, 但几乎每个CSS样式学习者都会猜想甚至认定浏览器也是按照从左到右的规则进行选择符匹配的, 例如这条规则:#top>li{ font-size:12px;} , 在脑海中, 会想象浏览器是这样工作的:找到唯一标识为top的元素, 然后把样式应用到其直系子元素中的li元素上, 我们知道Id标识在文档中是唯一的, 想当然会认为这个CSS样式规则会相当高效。事实上, CSS样式选择符是从右到左进行匹配的, 了解了这个原则后, 之前这个看似高效的CSS样式规则实际开销相当高, 浏览器必须遍历页面上每个li元素, 并确定其父元素的id是否为top。如果将其写成后代选择符:#top li{ font-size:12px;} , 情况会更加糟糕, 浏览器首先会遍历页面中的每个li元素, 然后检查它们的父元素id标识是否为top, 不论是否匹配, 还要继续遍历DOM文档树去查找所有li元素的祖先元素的id标识是否为top, 如此周而复始直至DOM文档的根节点。
因此, 作为经常要处理CSS样式规则的网页前端程序员, 必须要深入理解:样式系统从最右边的选择符开始向左匹配样式规则, 只要当前选择符的左边还有选择符, 样式系统就会不停向左移动, 直到找到和规则匹配的元素, 或因为找不到匹配而中止。
3 编写高效的CSS选择符
在正确理解了选择符从右到左的匹配规则后, 就可以从另一个角度看待CSS选择符, 并将其调整得更加高效。在某些情况下, 如果可以排除其它原因导致网页性能下降, 就应该审视一下CSS选择符的编写是否存在低效的问题, 在这里总结几个应用规则以供借鉴, 在兼顾代码可读性的基础上, 做一点小小的改动或许会带来更出色的用户体验。
(1) 避免使用不必要的兄弟相邻选择符、子选择符, 特别应避免使用后代选择符。
(2) 不要限定id选择符, 因为id标识在页面中是唯一的。例如:#top #nav是没有必要的, 应该简化为 #nav, 以避免毫无意义的遍历匹配。
(3) 不要限定类选择符, 而是根据实际情况扩展类名。例如:将li.nav改成 .list-nav更好, 这同样是为了减少匹配次数。
(4) 让规则越具体越好, 不要编写像ol li a 这样的选择符, 它带来的匹配开销往往难以想象, 而应该创建一个像 .list-anchor 这样的具体类, 并把它应用到适当的元素上。
(5) 尽量依靠选择符继承以简化规则, 例如, 对列表元素而不是每个列表项指定list-style-image 属性。仔细研究一下CSS官方文档中关于继承属性的说明, 将会达到事半功倍的效果。
以上提到的是一些CSS选择符优化的大致方向, 具体到每个页面时, 要根据该页面的特点适当取舍, 将优化重心放在可能会匹配到的大量关键元素上。
可以预见, 在富互联网应用如火如荼的当下, 浏览器的用户体验被提到了前所未有的高度, 诸如CSS样式规则的效能等网页前端技术问题将越来越被人关注。
摘要：当前, 浏览器的用户体验被提到了前所未有的高度, 网页前端技术问题越来越为人所关注。CSS选择符的编写方式决定了浏览器必须执行的匹配次数, 若不对其深入理解, 可能会写出十分低效的样式规则, 严重影响网页性能。重点关注CSS选择符的匹配方式, 希望对广大网页前端技术人员提供一些参考。
关键词：CSS选择符,匹配方式,网页性能
参考文献
[1]CHRISTOPHER SCHMITT.CSS Cookbook中文版 (第2版) [M].北京:电子工业出版社, 2007.
css选择题 篇3
【关键词】CSS 选择器 基础语法规则 工作原理
一、引言
CSS是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术，是网页设计者必须掌握的技术之一。在HTML文档中加入CSS样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。
二、CSS选择器的基础语法规则
选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类选择器等。
（一）标签选择器。一个XHTML文档中有许多标签，例如p标签、h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。如代码“h1 {color：red； font-size：14px；}”，这行代码的作用是将 h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。在这个例子中，h1是选择器，color和 font-size是属性，red和14px是值。标签选择器可以直接改变该标签的所有样式。
（二）类选择器。使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式，但是在实际运用中，XHTML文档中的同一个标签会被反复使用，若要为相同的标签赋予不同的CSS样式就应使用类选择器。以下是使用类选择器定义CSS样式的步骤：（1）编写合适的类选择器名，然后定义CSS样式声明，例如定义类选择器名为news的CSS样式代码.news{ font-size：20px；color：green }。（2）把以news为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下：新闻，其中，在
中写入class=“news”的语句。Class和等号都是固定的写法，在双引号中写入类选择器的名称。
css选择题 篇4
由于浏览器版本的不同，对CSS里某些元素的解释也不一样，针对浏览器版本不同而选择不同CSS的代码，
其实我们还可以利用条件注释的方法来达到类似的目的，什么是条件注释，在此简单介绍一下，无非就是一些if判断啦，呵呵，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，下面来介绍一下使用方法吧，
代码如下: