CSS基础知识点（二）—

在这一篇中，主要总结一下CSS中的选择器。

参考：http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html

CSS中的选择器主要包括：

派生选择器：通过依据元素在其位置的上下文关系来定义样式。包括后代选择器，子元素选择器，相邻兄弟选择器。
id选择器：可以为标有特定 id 的 HTML 元素指定特定的样式。
类选择器：可以为class的 HTML 元素指定特定的样式。
属性选择器：为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

(1) 选择器分组：可以将任意多个选择器分组在一起，中间以 ',' 隔开。

　　例：body, h2, p, table, th, td, pre, strong, em { color : gray ; }

(2) 类选择器的几种用法

与元素选择器结合：

　　　例：p.important {color:red;}

　　　　匹配 class为 important 的所有 p 元素，但是其他任何类型的元素都不匹配。

多类选择器：(IE7之前不支持)

　　　例：.important.warning {background:silver;}

　　　　匹配同时具有这两个class的元素。

(3) 属性选择器：根据元素的属性匹配元素

简单属性选择

　　　　例：a[title] {color:red;} 只对有 title 属性的 a 元素应用样式。

根据具体属性值选择

　　　　例：input[name='basketball'] 只选择有特定属性值的元素。

属性与属性值完全匹配

　　　例：对于<p class="important warning">This paragraph is a very important warning.</p>，

　　　　　使用 p[class="important warning"] {color: red;}

根据部分属性值匹配

　　　例：对于<p class="important warning">This paragraph is a very important warning.</p>，

　　　　　使用 p[class~="important"] {color: red;} 根据属性值中的词列表的某个词进行选择。

子串匹配属性选择器

　　　　input[name^='foot']：匹配给定的属性是以某些值开始的元素。

　　　　input[name$='ball']：匹配给定的属性是以某些值结尾的元素。

　　　　input[name*='sket']：匹配给定的属性是以包含某些值的元素。

(4) 后代选择器

　　例：h1 em {color:red;}，匹配h1后代中所有em

　　例：h1 > strong {color:red;}，选择只作为 h1 元素（一级）子元素的 strong 元素。

(5) 相邻兄弟选择器

　例：h1 + p {margin-top:50px;}，匹配相同父元素下，h1之后出现的第一个p元素。

(6)同级选择器

　　例：h1 ～ p {margin-top:50px;}，匹配相同父元素下，h1之后出现的所有p元素。

(7) 伪类

　如a链接的 :visited, :hover等，input的:focus, :checked, :disabled 等，

　结构性伪类有 :first-child, :first-of-type, :nth-of-type, nth-child, :before, :after 等。

　 nth-child与nth-of-type的区别：

nth-child 指的是后代的所有元素
nth-of-type 指的是指定某种类型的后代元素

　　例如：

p:nth-child(2) { color: red; }  效果为第一个 p 变红色。要找的是：第二个子元素&&第二个子元素为p。当不满足任一条件时，失败。

p:nth-of-type(2) { color: red; } 效果为第二个 p 变红色（希望的效果）。因为找的是所有p标签中的第二个p。

p:nth-child(2) { color: red; }  不会染红任何元素。

p:nth-of-type(2) { color: red; } 效果为第二个 p 变红色（希望的效果）

(8) 伪元素

　　如 p:first-line;匹配元素p内容的第一行。p:first-letter;匹配p元素内容的首字母。还有before，after等。

　　使用伪元素／伪类设置placeholder的样式：

　　input::-webkit-input-placeholder { /* WebKit browsers */

　　}

　　input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

　　}

　　input::-moz-placeholder { /* Mozilla Firefox 19+ */

　　}

　　input:-ms-input-placeholder { /* Internet Explorer 10+ */

　　}

巴特西

CSS基础知识点（二）——选择器

最新文章

热门文章