Chinaunix首页 | 论坛 | 博客
  • 博客访问: 549050
  • 博文数量: 233
  • 博客积分: 2221
  • 博客等级: 大尉
  • 技术积分: 3184
  • 用 户 组: 普通用户
  • 注册时间: 2010-02-16 14:01
个人简介

瓜瓜派的瓜瓜

文章分类

全部博文(233)

文章存档

2013年(28)

2012年(197)

2011年(8)

分类: Html/Css

2013-02-28 17:30:58

CSS的选择符还是很多的,特别是CSS3里又新增了些,为了方便记忆,特将(图灵出版)有关选择符章节的阐述做个归纳汇整。 
顺带夸一下本书:第二版我就看过,这次的第三版针对HTML5和CSS3的最新发展,进行了全面更新,内容更出彩,组织更合理,思路更清晰,逻辑更突出,是一本循序渐进式的掌握CSS3知识的好书。

1. 上下文选择符 
p em {color:green;} 
标签1 标签2 {声明},标签2就是我们想要选择目标,而且只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中。

2. 子选择符> 
section >h2 {font-style:italic;} 
标签1 > 标签2 {声明},标签1必须是标签2的父元素。

3. 紧邻同胞选择符+ 
h2 +p {font-variant:small-caps;} 
标签1 + 标签2 {声明},标签2必须紧跟在其同胞标签1的后面。

4. 一般同胞选择符~ 
h2 ~a {color:red;} 
标签1 ~ 标签2 {声明},标签2必须跟(不一定紧跟)在其同胞标签1后面。

5. 通用选择符* 
* {color:green;} 
* {声明},通用选择符*常被称为星号选择符,是一个通配符,它匹配任何元素,杀伤力巨大。 
不过,一般在使用选择符时,都会同时使用另一个选择符,比如: 
p * {color:red;} 
这样只会把p包含的所有元素的文本变成红色。 
还可以用它构成非子选择符,比如: 
section * a {font-size:1.3em;} 
任何是section孙子元素,而非子元素的a标签都会被选中。至于a的父元素是什么,没有关系。

6. 类选择符 
.specialtext {font-style:italic;} 
.类名 {声明},类选择符就是在HTML类名前面加一个点(英文句号)。

7. 标签带类选择符 
p.specialtext {color:red;} 
标签.类名 {声明},如上,只选择带specialtext类的段落,设置红色。 
p.specialtext span {font-weight:bold;},带specialtext类的段落->span里的内容为粗体。

8. 多类选择符 
什么是多类?!: 

 
这好像不常用哦? 
HTML的class属性可以有多个空格分隔的值。要选择同时存在这两个类名的元素,可以这样写: 
.specialtext.featured {font-size:120%;} 
注意,CSS选择符的两个类名之间没有空格。


9. ID属性 
ID与类的写法相似,而且表示ID选择符的#(井号)的用法,也跟表示类选择符的.(句号)类似。 
如果有一个段落像下面这样设定了ID属性: 

This is the special text.

 
那么,相应的ID选择符就是这样的: 
#specialtext {声明} 
或者这样的: 
p#specialtext {声明}


10. 广告插播时间:什么时候用ID?什么时候用类?以及若干注意点 
ID的用途是在页面中唯一地标识一个元素。ID值的唯一性对JavaScript尤其重要,通过ID,JavaScript就能与某个标签关联起来,并玩出动感花样出来。经常会给页面中每个顶级区域都添加一个ID,从而得到非常明确的上下文,以便编写CSS时只选择嵌套在相应区域内的标签。 
类的目的是为了标识一组具有相同特征的元素。你不要像使用 ID 一样,每个类都指定一个不同的类名,然后再为每个类编写规则。

11. 属性名选择符 
img[title] {border:2px solid blue;} 
会导致像下面这个带有title属性的HTML img元素显示2像素宽的蓝色边框,至于title属性有什么值,无关紧要,只要有这个属性在就行啦。 
yellow flower 
标签名[属性名] {声明}。

12. 属性值选择符 
img[title="red flower"] {border:4px solid green;} 
标签名[属性名="属性值"] {声明},这个一看就懂了。

13. 预热一下:“伪类” 
伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上。伪类分两种。

  • UI(User Interface,用户界面)伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式。
  • 结构化伪类会在标记中存在某种结构上的关系时(如某个元素是一组元素中的第一个或最后一个),为相应元素应用CSS样式。

14. 链接伪类 - UI伪类 
针对链接的伪类一共有4个,因为链接始终会处于如下4种状态之一。

  • Link。此时,链接就在那儿等着用户点击。
  • Visited。用户此前点击过这个链接。
  • Hover。鼠标指针正悬停在链接上。
  • Active。链接正在被点击(鼠标在元素上按下,还没有释放)。

以下就是这些状态对应的4个伪类选择符(使用了a选择符和一些示例声明): 
a:link {color:black;} 
a:visited{color:gray;} 
a:hover{text-decoration:none;} 
a:active{color:red;}

由于这4个伪类的特指度相同,如果不按照这里列出的顺序使用它们,浏览器可能不会显示预期结果。为了好记,我建议大家可以这么想:“LoVe? HA!”大写字母就是每个伪类的头一个字母。 
选择符中与众不同的:(冒号)好像在向我们宣示:“我是一个伪类!”。一个冒号(:)表示伪类,两个冒号(::)表示CSS3新增的伪元素。尽管浏览器目前都支持对CSS 1和CSS 2的伪元素使用一个冒号,但希望你能习惯于用双冒号代替单冒号,因为这些单冒号的伪元素最终可能都会被淘汰掉。

15. :focus伪类 - UI伪类 
input:focus {border:1px solid blue;} 
会在光标位于input字段中时,为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。 
e:focus {声明}。

16. :target伪类 - UI伪类 
More Information 
位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的: 

This is the information you are looking for.

 
那么,如下CSS规则 
#more_info:target {background:#eee;} 
会在用户单击链接转向ID为more_info的元素时,为该元素添加浅灰色背景。 
e:target {声明}。

17. 结构化伪类 
结构化伪类可以根据标记的结构应用样式,比如根据某元素的父元素或前面的同胞元素是什么。

:first-child和:last-child 
e:first-child 
e:last-child 
:first-child代表一组同胞元素中的第一个元素,而:last-child则代表最后一个。 
比如,把下面的规则 
ol.results li:first-child {color:blue;} 
应用给以下标记: 

  1. <ol class="results">
  2.     <li>My Fast Pony</li>
  3.     <li>Steady Trotter</li>
  4.     <li>Slow Ol Nag</li>
  5. </ol>

文本“My Fast Pony”就会变成蓝色。

:nth-child 
e:nth-child(n) 
e表示元素名,n表示一个数值(也可以使用odd或even)。 
li:nth-child(3) 
选择一组列表项中的每个第三项。

18. 伪元素 
伪元素就是你的文档中若有实无的元素。 
注意:搜索引擎不会取得伪元素的信息(因为它在标记中并不存在)。因此,不要通过伪元素添加你想让搜索引擎索引的重要内容。

::first-letter 
p::first-letter {font-size:300%;} 
段落首字符放大。 
e::first-letter {声明}

::first-line 
选中文本段落(一般情况下是段落)的第一行。

::before和::after伪元素 
可用于在特定元素前面或后面添加特殊内容。 
以下标记 

25

 
和如下样式 
p.age::before {content:"Age: ";} 
p.age::after {content:" years.";} 
能得到以下结果: 
Age: 25 years.



阅读(3516) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~