CSS 教程（3）-选择器

1.Grouping Selectors 分组选择器
在样式表中有很多具有相同样式的元素。
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔.
在下面的例子中，我们对以上代码使用分组选择器：

h1,h2,p
{
color:green;
}

2.嵌套选择器
它可能适用于选择器内部的选择器的样式。

选择器的嵌套，在CSS中可以大大减少对class和id的声明，因此，在构建页面的HTML时，通常只给外层标记定义class或者id，内层标记能通过嵌套表示的则利用嵌套的方式，从而，不需要再定义新的class或者id，只有当子标记无法利用此规则时，才进行单独的声明

在下面的例子设置了三个样式：

为所有p元素指定一个样式
为所有class="marked"的元素指定一个样式
为所有class="marked"元素内的p元素指定一个样式

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

3.后代选取器
后代选取器匹配所有值得元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:
···
<style>
div p {
background-color: yellow;//只要div后面的p就会显示背景色，不管多靠后
}
</style>
<div>
<p>段落 1。在 div 中。</p>
<p>段落 2。在 div 中。</p>
<div>test<p>neibu PP</p></div>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
···

4.子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。(只有亲孩子一代才行)
···
<style>
div>p {
background-color: yellow;
}
</style>

<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span>
<p>I will not be styled.</p>
</span>
</div>
<p>My best friend is Mickey.</p>
···

5.相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

<style>
    div+p {
        background-color: yellow;
    }
</style>

<h1>Welcome to My Homepage</h1>
<div>
    <h2>My name is Donald</h2>
    <p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>//显示黄色
<p>I will not be styled.</p>

6.后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

<style>
    div~p {
        background-color: yellow;
    }
</style>

<p>之前段落，不会添加背景颜色。</p>
<div>
    <p>段落 1。 在 div 中。</p>
    <p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

7.** 伪类(Pseudo-classes)**
CSS伪类是用来添加一些选择器的特殊效果。

<style>
    a:link {
        color: #000000;
    }
    a:visited {
        color: #00FF00;
    }
    a:hover {
        color: #FF00FF;
    }
    a:active {
        color: #0000FF;
    }
    a.aaa:hover {//class也可以作为伪类的，这个时候，第二个链接，鼠标放上去显示蓝色而不会是红色，第一个会显示红色
        color: blue;
    }
</style>

<a href="/css/" target="_blank">这是一个链接</a>
<a class="aaa" href="/css/" target="_blank">这是一个链接</a>

CSS - :first - child伪类(:last-child)
您可以使用 :first-child 伪类来选择元素的第一个子元素
···
<style>
p:first-child {
color: blue;
}
</style>

<p>This is some text.</p>//只有它显示蓝色，匹配了p的第一个元素的选择器
<p>This is some text.</p>
···

选择相匹配的所有<p>元素的第一个 <i> 元素
p > i:first-child
{
color:blue;
}

选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素
p:first-child i
{
color:blue;
}

具体的伪类：

:checked 选择器
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）(选择上后，放大了选择框)

<style>
    input:checked {
        height: 50px;
        width: 50px;
    }
</style>

<input type="radio" checked="checked" value="male" name="gender" /> Male
<br>
<input type="radio" value="female" name="gender" /> Female
<br>
<input type="checkbox" checked="checked" value="Bike" /> I have a bike
<br>
<input type="checkbox" value="Car" /> I have a car

:disabled 选择器
:disabled 选择器匹配每个禁用的的元素（主要用于表单元素）
设置所有type="text"的禁用的输入元素的背景颜色为灰色

<style>
    input[type="text"]:enabled {
        background: #ffff00;
    }

    input[type="text"]:disabled {
        background: #dddddd;
    }
</style>

First name:
<input type="text" value="Mickey" />
<br> Last name:
<input type="text" value="Mouse" />
<br> Country:
<input type="text" disabled="disabled" value="Disneyland" />
<br>

:empty 选择器
:empty选择器选择每个没有任何子级的元素（包括文本节点）

p:empty
{
background:#ff0000;
}

:first-of-type (:last-of-type)选择器
:first-of-type选择器匹配元素其父级是特定类型的第一个子元素。

<style>
    p:first-of-type {
        background: #ff0000;
    }
</style>

<h1>This is a heading</h1>
<p>The first paragraph.</p>//这是第一个匹配P的
<p>The second paragraph.</p>
<p>The third paragraph.</p>

:in-range 选择器
:in-range 选择器用于标签的值在指定区间值时显示的样式。
注意： :in-range 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性。

<style>
    input:in-range {
        border: 2px solid green;//如果在范围内，显示绿色
    }
    input[type="number"]:out-of-range {
        border: 2px solid red;//如果超出数字范围，显示红色
    }
</style>

<h3>:in-range 选择器实例演示。</h3>
<input type="number" min="5" max="10" value="7" />

:invalid 选择器
:invalid 选择器用于在表单元素中的值是非法时设置指定样式。
注意： :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

<style>
    input:invalid {
        border: 2px solid red;//如果输入错误，
显示红色，如果输入正确的email的话，显示正常边框色
    }
</style>
<h3> :invalid 选择器实例演示。</h3>
<input type="email" value="supportEmail" />

:not 选择器
:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。
:not(p)
{
background:#ff0000;
}
:nth-child() 选择器
:nth-child(n)选择器匹配父元素中的第n个子元素。

:nth-last-child() 选择器
:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式。

:read-only 选择器
-:required 选择器
:required 选择器在表单元素是必填项时设置指定样式。
表单元素可以使用 required 属性来设置必填项。
注意： :required 选择器只适用于表单元素: input, select 和 textarea。
:hover 选择器
:hover在鼠标移到链接上时添加的特殊样式。
提示: :hover 选择器器可用于所有元素，不仅是链接。
:first-letter 选择器
:first-letter选择器用来指定元素第一个字母的样式。

8.属性选择器
例子1，把包含标题（title）的所有元素变为蓝色

<style>
[title]
{
color:blue;
}
</style>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="runoob.com" href="http://www.runoob.com/">runoob.com</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>

实例2,改变了标题title='runoob'元素的边框样式

<style>
    [title=runoob] {
        border: 5px solid green;
    }
</style>
<h2>将适用:</h2>
<img title="runoob" src="logo.png" width="270" height="50" />
<br>
<a title="runoob" href="http://www.runoob.com/">runoob</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="runoob" href="http://www.runoob.com/">runoob</a>

表单样式
属性选择器样式无需使用class或id的形式:

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

CSS 教程（3）-选择器

推荐阅读更多精彩内容