第一二章－－CSS和选择器

摘自CSS权威指南（第三版）

Import 和 ref的区别？

xhtml与html的区别？

 

CSS的好处：它允许创作人员将网站的所有表现都放在一个位置，将所有文档指向这个位置，这不仅使网络的更新和维护相对容易，还有助于节省带宽．

 

CSS全局性修改借助－－选择器和结构

 

选择器分组：

h1, h2, h3, h4 {color: purple}

 

声明分组：

fond: 18px Helvetica;

 

通配选择器：

* {color: red;}

 

类选择器：

须将class属性指定为一个适当的值．

<p class=”warning”>This is content</p>

* .warning {font-weight: bold;}

p.warning {font-weight: bold;}

可以组合使用通用类选择器和元素特定类选择器．

 

ID选择器：

<p id=”lead-para”>This paragraph will be boldfaced.</p>

*#lead-para {font-weight: bold;}

 

属性选择器：

h1[class] {color: silver;}，选择有class属性的所有h1元素

img[alt] {border: 3px solid red;}

*[title] {font-weight: bold;}

a[href][title] {font-weigh: bold;}

 

部分选择器：

<p class=”urgent warning”>When handling plutonium, …...</p>

p[class~=”warning”] {font-weight: bold; }

 

后代选择器：

h1 em {color: gray; }

这个规则会把作为h1元素后代的em元素的文本变成灰色．

 

选择子元素：

h1 > strong {color: red;}

这个规则会把第一个h1下面出现的strong元素变成红色，但是第二层出现的strong元素不会受到影响．

 

选择相邻兄弟元素：

h1 + p {margin-top: 0;}

选择器紧接在一个h1元素后出现的所有段落，h1与p有共同的父元素．

 

伪类和伪元素：

静态

a:link {color: blue;} /*unvisited links are blue*/

a:visited {color: red;} /*visited links are red*/

 

动态伪类：

: focus

: hover

: active

可以应用到任何元素．

 

要点：深入了解选择器与文档结构的关系，并了解继承和层叠机制在确定如何为元素设置样式时有怎样的作用．