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;
}
