- 浏览: 1434175 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果。
1、标记选择器
<style> h1{ color:red; font-size:25px; } </style>
2、类别选择器
<html> <head> <title>class选择器</title> <style type="text/css"> <!-- .one{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */ } .two{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } --> </style> </head> <body> <p class="one">class选择器1</p> <p class="two">class选择器2</p> </body> </html>
很多时候页面中几乎所有的<p>标记都使用相同的样式风格,只有1-2个特殊的<p>标记需要使用不同的风格来突出,这时可以通过class选择器与上一节提到的标记选择器配合使用。
<html> <head> <title>class选择器与标记选择器</title> <style type="text/css"> <!-- p{ /* 标记选择器 */ color:blue; font-size:18px; } .special{ /* 类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ } --> </style> </head> <body> <p>class选择器与标记选择器1</p> <p>class选择器与标记选择器2</p> <p>class选择器与标记选择器3</p> <p class="special">class选择器与标记选择器4</p> <p>class选择器与标记选择器5</p> <p>class选择器与标记选择器6</p> </body> </html>
另外类别选择器还有一种很直观的使用方法,就是直接在标记声明后接类别名称,以此来区别该标记。
<html> <head> <title>标记选择器.class</title> <style type="text/css"> <!-- h3{ /* 标记选择器 */ color:blue; font-size:18px; } h3.special{ /* 标记.类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ } .special{ /* 类别选择器 */ color:green; } --> </style> </head> <body> <h3>标记选择器.class1</h3> <h3>标记选择器.class2</h3> <h3 class="special">标记选择器.class3</h3> <h3>标记选择器.class4</h3> <h3>标记选择器.class5</h3> <p class="special">使用于别的标记</p> </body> </html>
在HTML的标记中,还可以同时给一个标记运用多个class类别选择器,从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用,可以适当减少代码的长度。
<html> <head> <title>同时使用两个class</title> <style type="text/css"> <!-- .one{ color:blue; /* 颜色 */ } .two{ font-size:22px; /* 字体大小 */ } --> </style> </head> <body> <h4>一种都不使用</h4> <h4 class="one">同时使用两种class,只使用第一种</h4> <h4 class="two">同时使用两种class,只使用第二种</h4> <h4 class="one two">同时使用两种class,同时使用</h4> </body> </html>
3、ID选择器
ID选择器的使用方法跟class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强。
<html> <head> <title>ID选择器</title> <style type="text/css"> <!-- #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } --> </style> </head> <body> <p id="one">ID选择器1</p> <p id="two">ID选择器2</p> <p id="two">ID选择器3</p> <p id="one two">ID选择器3</p> </body> </html>
从显示效果可以看到第2行与第3行都显示了CSS的方案,换句话说在很多浏览器一,ID选择器也可以用于多个标记。但这里需要指出的是,将ID选择器用于多个标记是错误的,因为每个标记定义的ID不只是CSS可以调用,JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同ID的标记,那么将导致JavaScript在查找ID时出错。
正因为JavaScript等脚本语言也能调用HTML中设置的ID,因此ID选择器一直被广泛地使用。网站建设都在编写CSS代码时,应该养成良好的编写习惯,一个ID最多赋予一个HTML标记。
另外从最后一行可以看到没有任何CSS样式风格显示,这意味着ID选择器不支持像class选择器那样的多风格同时使用,类似"ID="one two"是完全错误的语法。
4、选择器声明
集体声明
<style type="text/css"> <!-- h1, h2, h3, h4, h5, p{ /* 集体声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } --> </style>
希望页面中所有的标记都使用同一种CSS样式,但又不希望逐个来加入集体声明列表。这时可以利用全局声明符号“*”。
<style type="text/css"> <!-- *{ /* 全局声明 */ color: purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } --> </style>
5、选择器的嵌套
在CSS选择器中,还可以通过嵌套的方式,对特殊位置的HTML标记进行声明,例如当<p>与</p>之间包含<b></b>标记时,就可以使用嵌套选择器进行相应的控制。
<html> <head> <title>CSS选择器的嵌套声明</title> <style type="text/css"> <!-- p b{ /* 嵌套声明 */ color:maroon; /* 颜色 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> <body> <p>嵌套使<b>用CSS</b>标记的方法</p> 嵌套之外的<b>标记</b>不生效 </body> </html>
(经验之谈:选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记(父标记)定义class或者id,内层标记(子标记)能通过嵌套表示的则利用嵌套的方式,而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时,才单独进行声明,例如一个<ul>标记中包含多个<li>标记,而需要对其中某个<li>单独设置CSS样式时才赋给该<li>一个单独id或者类别,而其他<li>同样采用"ul li(...)"的嵌套方式来设置。)
选择器兼容图表
发表评论
-
cubic-bezier 模拟实现
2013-01-05 16:34 14017cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
css reset revisit
2012-07-25 00:32 4161正如 javascript 兼容库的作用, css r ... -
兼容 ie 的 transform
2012-02-23 14:00 6340css 2d transform 是 css3 引入的一个新的 ... -
write html parser
2011-12-01 02:48 2852首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2789简介 如果你经 ... -
fixed 定位 auto 问题
2010-12-02 11:58 2045当一个元素被 fixed 定位 ... -
css的优先级与继承
2010-11-08 12:30 3652起因: 很早就听 ... -
浏览器渲染
2010-10-12 21:07 0http://snook.ca/archives/html_a ... -
背景图样式回顾
2010-09-30 13:51 1747正式点叫 background-image recap ,最近 ... -
mhtml datauri 与 css expression
2010-09-29 18:17 2357mhtml ,datauri ,css expressio ... -
margin合并整理
2010-06-23 11:25 4149多个段落为了美观,浏览器会将它们的垂直距离变得统一,这是一种很 ... -
编写跨浏览器兼容的 CSS 代码的金科玉律
2010-06-09 13:26 0作为 Web 设计师,你的 ... -
图片优化 and dataURI and mhtml for ie<8
2010-04-28 10:00 0http://www.phpied.com/data-uris ... -
W3C XML Schema 与文档类型定义 (DTD) 比较
2010-02-01 23:50 0http://www.ibm.com/developerwor ... -
xtml与html
2010-02-01 23:26 0HTML与XHTML 二者有什么区别,你觉得 ... -
获取css属性计算值问题
2010-01-29 23:11 3746都知道标准浏览器可以用 getComputedStyle 以及 ... -
垂直居中问题解释整理
2009-12-06 01:19 2244垂直居中曾经很热的话题,也转过网络一些好的解决方案: ... -
有趣的z-index
2009-12-01 00:25 2799实践 : 注:firefox 示例1 ... -
css列布局整理
2009-11-27 01:14 1650对一些经典的布局进行整理,以及修改去除不必要的hack,兼容 ... -
ebay ppt.rar
2009-11-18 15:23 0ebay ppt.rar
相关推荐
React组件的css选择器
CSS选择器的介绍和使用,什么是CSS选择器?CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一,一对多或者多对一的控制,就得要使用css选择器,css选择器进控制着HTML页面中的元素。
每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素
CSS选择器-.pdf
CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS基础选择器 基础选择器: 针对...
css选择器里面有css的几十种选择、获取、什么都有.
前端必须掌握的css选择器方法
1.常用选择器 2. 子选择器与相邻同胞选择器 3. 属性选择器 4. 浏览器对CSS选择器的支持情况
讲解了css选择器的要点和应用,分别写出了在什么场景用什么选择器,每个选择都有他自己书写规范和应用。
jQuery 遍历css选择器 学习
各类css选择器的应用及代码效果展示,字体属性和文本属性的应用。
理解css属性选择器
上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器
包含CSS1~CSS3的所有选择器,同时说明各选择器的浏览器支持情况
30个最常用css选择器解析 CSS
详解CSS选择器标签HTML 选择器 类别CLASS 选择器
div h1~div: 应返回一个节点,但是Sizzle没有找到节点另外div.querySelectorAll("body *")会返回节点所以在以元素为context的查询中不使用querySelectorAll进行优化3, 性能将选择器编译成函数再进行查询,除了第一次...