CSS选择器 CSS Selectors

一、普通选择器（Common Selectors）

最普通的CSS选择器有类型选择器（Type Selectors）、后代选择器（Descendant Selectors）、ID选择器和Class选择器等等；

 

1、 类型选择器：

类型选择器用于匹配一种特定类型的元素，例如段落元素（p）或标题元素（h1）；

p {color: black;}
h1 {font-weight: bold;}

 

2、后代选择器：

后代选择器用于匹配特定元素的后代元素（零或多个）；

blockquote p {padding-left: 2em;}

 

3、ID选择器和Class选择器：

ID选择器利用哈希字符（#）标识，Class选择器利用点（.）标识；

#intro {font-weight: bold;}
.date-posted {color: #ccc;}

 

可以组合上面四种选择器给特定元素添加样式，如下：

#main-content h2 {font-size: 1.8em;}
#secondaryContent h2 {font-size: 1.2em;}

<div id="main-content">
    <h2>Articles</h2>
    ...
</div>
<div id="secondary-content">
    <h2>Latest news</h2>
    ...
</div>

 

4、伪类选择器（Pseudo-classes）:

利用伪类选择器可以标识某些元素不同状态的不同样式，例如a元素:

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

/* makes all visited links green */
a:visited {color:green;}

/* makes links red when hovered or activated. focus is added for keyboard support */
a:hover, a:focus, a:active {color:red;}

/* makes table rows red when hovered over */
tr:hover {background-color: red;}

/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}

 

　　:link 和 :visited 属于link伪类选择器，只能用于锚点元素。:hover, :active 和 :focus 属于动态伪类选择器，可以应用于任何元素，大多数现代浏览器都支持伪类选择器。但是IE6只支持 :active 和 :hover 伪类选择器，不支持 :focus。IE7支持 :hover 伪类选择器，但是不支持 :active 和 :focus 伪类选择器。

　　还有一点需要指出的是伪类选择器可以组合使用，例如鼠标悬在访问过的a元素上：

/* makes all visited linkes olive on hover */
a:visited:hover {color:olive;}

 

二、通配符选择器（The universal selector）

通配符选择器是所有选择器中功能最强大的并且使用最少的一种选择器，通配符选择器能匹配所有的元素。

/* remove the default browser padding and margin on every element */
* {margin: 0; padding: 0;}

 

 三、高级选择器（Advanced Selectors）

 

1、子选择器和（相邻）兄弟选择器：

后代选择器会匹配当前元素的所有后代元素，子选择器只会匹配当前元素的直接后代元素。

#nav>li {
　　background: url(folder.png) no-repeat left top;
　　padding-left: 20px;
}

<ul id="nav">
    <li><a href="/home/">Home</a></li>
    <li><a href="/services/">Services</a>
        <ul>
            <li><a href="/services/design/">Design</a></li>
            <li><a href="/services/development/">Development</a></li>
            <li><a href="/services/consultancy/">Consultancy</a></li>
        </ul>
    </li>
    <li><a href="/contact/">Contact Us</a></li>
</ul>

这个例子中直接子元素会添加文件夹图标，但是直接子元素中的子元素就不会应用文件夹图标。

注意：IE7及以上浏览器支持子选择器，但是在IE7中有一个bug，如果父元素和子元素之间有注释会导致问题。

IE6中可以利用通配符选择器模拟子选择器：

#nav li {
    background: url(folder.png) no-repeat left top;
    badding-left: 20px;
}
#nav li * {
    background-image: none;
    padding-left: 0;
}

 

有时候，需要通过一个元素作为代理给另一个元素应用样式，前提是这两个元素同属于同一个父元素，这时候就需要用到兄弟选择器。

h2 + p {
    font-size: 1.4em;
    font-weight: bold;
    color: #777;
}

<h2>Peru Celebrates Guinea Pig festival</h2>
<p>The guinea pig festival in Peru is a one day event to celebrate
these cute local animals. The festival included a fashion show where
animals are dressed up in various amusing costumes.</p>
<p>Guinea pigs can be fried, roasted, or served in a casserole. Around
65 million guinea pigs are eaten in Peru each year.</p>

 

2、属性选择器（Attribute selectors）

利用元素是否有某个特定的属性来匹配元素应用特定的样式；

HTML:

<p>The term <acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as a word.</p>

CSS:

acronym[title] {
    border-bottom: 1px dotted #999;
}
acronym[title]:hover, acronym[title]:focus {
    cursor: help;
}