本文共 4437 字，大约阅读时间需要 14 分钟。

1.CSS 元素选择器  name

h1 {color:blue;} 在 W3C 标准中，元素选择器又称为类型选择器（type selector）。 “类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。” 2.选择权分组 ( , ; ) (1)选择器分组  (,) h2, p {color:gray;} (2)通配符选择器(*) * {color:red;} 这个声明等价于列出了文档中所有元素的一个分组选择器。 利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。 (3)声明分组(;) h1 {font: 28px Verdana; color: white; background: black;} 对声明分组，一定要在各个声明的最后使用分号,浏览器会忽略样式表中的空白符。 提示：在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。 3.类选择器(.) (1)类选择器允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用，也可以与其他元素结合使用。 为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值 <h1 class="important"> This heading is very important. </h1> .important {color:red;} (2)结合元素选择器 p.important {color:red;} (3)CSS 多类选择器 通过把两个类选择器链接在一起，仅可以选择"同时"包含这些类名的元素 .important.warning {background:silver;} class里需要同时存在两个类名(顺序随意) <p class="important urgent warning">This paragraph is a very important warning.</p> 4.ID选择权(#) 在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。 (1)语法: 首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。 引用 id 属性中的值 #intro {font-weight:bold;} <p id="intro">This is a paragraph of introduction.</p> (2)类选择器还是 ID 选择器？ 区别 1：只能在文档中使用一次 与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。 区别 2：不能使用 ID 词列表 不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。 区别 3：ID 能包含更多含义 (3)区分大小写 5.属性选择器( [] ) (1)简单属性选择 *[title] {color:red;} a[href] {color:red;} 同时含有多个属性 a[href][title] {color:red;} (2)根据具体属性值选择 全匹配 a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} 请注意，这种格式要求必须与属性值完全匹配。 (3)根据部分属性值选择 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~） 假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点 p[class~="important"] {color: red;} (4)子串匹配属性选择器 类型                                  描述 [abc^="def"]    选择 abc 属性值以 "def" 开头的所有元素 [abc$="def"]    选择 abc 属性值以 "def" 结尾的所有元素 [abc*="def"]    选择 abc 属性值中包含子串 "def" 的所有元素 (5)特定属性选择类型 *[lang|="en"] {color: red;} 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。 <p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> 6.后代选择器 (空格) (1)根据上下文选择元素 h1 em {color:red;} <h1>This is a <em>important</em> heading</h1> (2)具体应用 有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。 7.子元素选择器 ( > ) 只选择某个元素的子元素 h1 > strong {color:red;} <h1>This is <strong>very</strong> important.</h1> 8.相邻兄弟选择器( + ) (1)相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 例如，如果要增加紧接在 h1 元素后出现的段落的上边距 h1 + p {margin-top:50px;} 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素 (2)结合其他选择器 相邻兄弟结合符还可以结合其他结合符： html > body table + ul {margin-top:20px;} 解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素， 该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。 9.CSS 伪类 (Pseudo-classes) CSS 伪类用于向某些选择器添加特殊的效果。 属性                                  描述                                                                                        CSS :active         向被激活的元素添加样式。                                        1 :focus          向拥有键盘输入焦点的元素添加样式。                2 :hover          当鼠标悬浮在元素上方时，向元素添加样式。 1 :link           向未被访问的链接添加样式。                                    1 :visited        向已被访问的链接添加样式。                                     1 :first-child    向元素的第一个子元素添加样式。                            2 :lang           向带有指定 lang 属性的元素添加样式。              2 (1)锚伪类 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示； 这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 a:link {color: #FF0000}     未访问的链接 a:visited {color: #00FF00}  已访问的链接 a:hover {color: #FF00FF}    鼠标移动到链接上 a:active {color: #0000FF}   选定的链接 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 提示：伪类名称对大小写不敏感。 (2)first-child 第一个子元素 第一个子元素指该元素下所有符合第一个子元素的元素（元素嵌套导致产生多个） p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;} 第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体，既是第一个子元素又是P元素； 第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。 提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。 注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。 (3)lang 伪类 :lang 伪类使你有能力为不同的语言定义特殊的规则。 :lang 类为属性值为 no 的 q 元素定义引号的类型 q:lang(no) { quotes: "~" "~" } <p>文字<q lang="no">段落中的引用的文字</q>文字</p> 10.伪元素 (Pseudo-elements) 伪元素的语法： selector:pseudo-element {property:value;} CSS 类也可以与伪元素配合使用： selector.class:pseudo-element {property:value;} 伪元素 W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。 属性                                      描述                                                                  CSS :first-letter   向文本的第一个字母添加特殊样式。    1 :first-line     向文本的首行添加特殊样式。                   1 :before         在元素之前添加内容。                                   2 :after          在元素之后添加内容。                                   2 (1):first-line 伪元素用于向文本的首行设置特殊样式。 p:first-line { color:#ff0000; font-variant:small-caps; } (2)"first-letter" 伪元素用于向文本的首字母设置特殊样式： p:first-letter{color:#ff0000;font-size:xx-large;} (3)伪元素和 CSS 类 p.article:first-letter {     color: #FF0000; } 所有 class 为 article 的段落的首字母变为红色 (4)多重伪元素 可以结合多个伪元素来使用 p:first-letter {     color: #ff0000;     font-size: xx-large; } p:first-line {     color: #0000ff;     font-variant: small-caps; } 段落的第一个字母将显示为红色，其字体大小为 xx-large; 第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示。 (5)CSS2 - :before 伪元素 ":before" 伪元素可以在元素的内容前面插入新内容。 在每个 <h1> 元素前面插入一幅图片： h1:before {     content: url(logo.gif); } (6)CSS2 - :after 伪元素 ":after" 伪元素可以在元素的内容之后插入新内容。 每个 <h1> 元素后面插入一幅图片 h1:after {     content: url(logo.gif); }

转载地址：http://voyci.baihongyu.com/