CSS选择器

CSS有很多选择器其中主要的选择器有三种：标签选择器，ID选择器，类选择器。其他的选择器还有：组合选择器，标签+类选择器，层次选择器。下面就一一介绍一下这些选择器的使用。

标签选择器

主要是对一些标签应用CSS样式。

<span style="font-family:Microsoft YaHei;font-size:18px;"><p>
    世界那么大
    </p>
    <p>
    我想去看看
    </p></span>

对上面p标签应用CSS样式

<span style="font-family:Microsoft YaHei;font-size:18px;"><style type="text/css">
    p
    {
        border:1px solid blue;
        margin:0px;
        padding:50px;    
    }</span>

ID选择器

当有很多个相同的标签但是只想对其中一个应用样式，比如：有很多div层，只想对第二个应用样式。注意：ID选择器要加#表示

<span style="font-family:Microsoft YaHei;font-size:18px;"> <style type="text/css">
    #dv1
    {
        background-color:Red ;    
    }
    </style></span>

<span style="font-family:Microsoft YaHei;font-size:18px;"><div>
    我是一个层
    </div>
    <div id="dv1">
    我是一个层
    </div>
    <div>
    我是一个层
    </div></span>

类选择器

类选择器与ID选择器差不太多，就是优先级ID选择器大于类选择器。注意：类选择器用“.”表示

<span style="font-family:Microsoft YaHei;font-size:18px;"><style type="text/css">
    .cls
    {
        border:1px solid blue;
        background-color:Orange;
        color:red;
    }
    </style></span>

<span style="font-family:Microsoft YaHei;font-size:18px;"><input class="cls" type="button" name="but" value="按钮" />
    <input type="text" name="txt" value="文本框" />
    <textarea class="cls">istari</textarea>
    <table border="1" cellpadding="2" cellspacing="2">
        <tr>
            <td>
            istari
            </td>
        </tr>
    </table></span>

组合选择器

应用于多个选择器共同应用一个样式

<span style="font-family:Microsoft YaHei;font-size:18px;">h1,h2,h3,h4,h5,h6,#dv1
{
     color:Red;
}</span>

标签+类选择器

注意：当你在VS中敲这个例子的时候不要把程序名称写成带有+号的，因为在运行的时候URL会把+解析成空格。这样就找不到路径了。这个选择器主要是把标签和类都组合起来，然后应用选择器的时候，不同的标签应用该类的标签下的内容，不会相互影响。

<span style="font-family:Microsoft YaHei;font-size:18px;"><style type="text/css">
    p.cls
    {
        color:Red;    
    }
    span.cls
    {
        color:Blue;    
    }
    </style></span>

<span style="font-family:Microsoft YaHei;font-size:18px;"><p class="cls">
    这是一个p标签
    </p>
    <span class="cls">这是span</span></span>

层次选择器

主要是把哪个层的内容应用样式，而其他层不变。

<span style="font-family:Microsoft YaHei;font-size:18px;"><style type="text/css">
    div p
    {
        color:Red;
    }
    </style></span>

<span style="font-family:Microsoft YaHei;font-size:18px;"><div>
        <p>
        1
        </p>
        <p>
        1
        </p>
        <p>
        1
        </p>
        <p>
        1
        </p>
    </div>
    ----------------------------------------------------------------
    <p>
    2
    </p>
    <p>
    2
    </p>
    <p>
    2
    </p>
    <p>
    2
    </p></span>