css选择器小结

来源：互联网发布：源码与公众号编辑：程序博客网时间：2024/05/17 01:17

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} ------ 被选择的链接的样式。

0 0