css选择器常使用的有标签选择器、类(class)选择器、id选择器、组合选择器、伪类选择器等。
下面贴上一个小的demo,便于体会各种选择器的使用方法。
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式(CSS选择器)</title>
<meta charset="utf-8">
<style type="text/css">
p {color: red; font-size: 30px;} /*标签选择器*/
.p {color: green; font-size: 30px;}
/*类选择器,可以重复使用*/
#pp {color: bule;font-size: 30px;} /*id选择器*/
h1, h2, p {color: red;font-size: 40px;} /*组合选择器*/
</style>
</head>
<body>
<p>winson chen</p>
<p class="p">你好,今天天气真好!</p>
<div class="p">是的,今天天气是挺好的。</div>
<div id="pp" class="p">是的,今天天气这么好,我们可以出去野餐了。</div>
<div id="pp" class="p">
<h1>winson</h1>
<h2>winson</h2>
</div>
<p>winson chen</p>
</body>
</html>
tip:
优先级: id > class > html(标签)。
此外,伪类选择器例子中没有提到。
一般会用其来控制超链接的,
a:link {color: #FF0000}---- 正常链接的样式,未访问的。
a:visited {color : #00FF00} ------ 已经访问过的链接的方式。
a:hover {color : #FF00FF} ------ 鼠标放上去的样式。
a:active {color : #0000FF} ------ 被选择的链接的样式。