选择器的使用

定义：使用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>