CSS(3)——样式选择器

对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素。有的地方把“选择器”翻译成“选择符”，代表的意思是一样的。常用的三种样式选择器：标签选择器、class选择器和id选择器。

1. 标签选择器

对于指定的标签采用统一的样式。

input
{
    border-color:Yellow;color:Red;
}

2. class选择器

以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格。样式名称开头加“.”。

.warning
{
    background:Yellow;
}         
.highlight
{
    font-size:xx-large;
    cursor:help;
} 
<table>
    <tr>
        <td class="highlight">aaa</td>
        <td class="warning">bb</td>
        <td class="highlight warning">ccc</td>
    </tr>
</table>

3. 标签+class选择器

class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

 input.accountno
        {
        	  text-align:right;
        	  color:Red;
        }
label.accountno
        {
        	font-style:italic;
        }
<input class="accountno" type="text" value="111111111111111" />
<label class="accountno">333333333333333333</label>

4. id选择器

为指定id的元素设定样式，id前加#。

        #username
        {
        	font-size:xx-large;
        }
<input id="username" type="text" value="aaaaaaaaaaaa" />

5. style、class可以同时组合使用

<input id="username" class="accountno" style="font-size:xx-large" type="text" value="aaaaaaaaaaaa" />

6. 包含选择器

表示P标签内的strong标签内的内容使用的样式。

P strong
{ 
    background-color:Yellow
}
<strong>fadsfasdfads</strong>
<p><strong>adfasfd</strong></p>

7. 组合选择器

同时为多个标签设定一个样式。

H1,H2,input
{
    background-color:Green
}
<h1>nihao</h1>
<input type="text" value="test" />

8. 伪选择器

伪选择器：为标签的不同状态设定不同的样式：

A:visited：超链接点击过的样式；

A:active：选中超链接时的样式；

A:link：超链接未被访问时的状态；

A:hover：鼠标移到超链接时的状态。

A:visited {
	TEXT-DECORATION: none
}
A:active {
	TEXT-DECORATION: none
}
A:link {
	TEXT-DECORATION: none
}
A:hover {
	TEXT-DECORATION: underline
}

说明：TEXT-DECORATION: none表示超链接不显示下划线。