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表示超链接不显示下划线。