选择器的使用

定义：使用CSS将样式应用于特定的HTML元素，需要找到这个元素。在CSS中，执行这一任务的样式规则部分称为选择器（selector）
选择器的介绍

• 类选择器，也称为元素选择器或简单选择器，例如：

p{color:red;}

HTML代码：
h2{font-size:15px;}

• 后代选择器，用来寻找特定元素或元素组的后代。后代选择器由两个选择器之间的空格表示，

  h1 em {color:red;}

HTML代码：
<h1>中国<em>佛教</em>文化</h1>

• ID选择器，由一个#表示，

#op{font-weight:bold;}

HTML代码：
<p id="op">这是一个选择器的例子</p>

• 类选择器，由一个 . 表示

.op{color:blue;}

HTML代码：
<h1 class="op">海贼王人物介绍</h1>
<p class="op">索隆是一个剑士。</p>

• 伪类选择器，例如最常用的表单元素或者链接的状态，需要伪类选择器来实现。
  -

a:link{
color:blue;
text-decoration: none;
}
a:visited{
color:black;
}
a:hover{
color:purple;
text-decoration:none;
}
a:active{
color:red;
}

HTML代码：
<a href="http://www.baidu.com">百度</a>

• 通用选择器
  它的作用像是通配符，可以匹配所有的元素，但是用的很少。它由一个星号表示，一般用来对页面上的所有的元素应用样式，例如，可以删除所有的内边距：

*{
padding:0px;
}

与其他的选择器搭配使用，可以对某一个元素的所有后代应用样式。

• 子选择器
  子选择器只选择元素的直接后代，即子元素。

#op>li{
padding:20px;
}

HTML代码：
<ul id="op">
<li>苹果</li>
<ul>
<li>红富士</li>
<li>青苹果</li>
</ul>
<li>香蕉</li>
<li>梨</li>
</ul>

选择的内容不包括红富士和青苹果，因为它们不是直接的后代。

• 属性选择器
  根据某个属性是否存在或者属性的值来寻找元素。

[title=ip]{
color:blue;
}

HTML代码：
<p title="ip">这是一个属性选择器</p>