网页设计CSS篇：CSS选择器

前言：

前面一节我们已经介绍了css的基本概念，相信大家对css有了一定的了解。那么我们这一节就来填填上一节留下的css选择器的坑，对css有进一步的了解。点击下方链接可以查看之前的文章：

2

CSS篇

第二节：CSS选择器

（1）通用选择器（*）

匹配所有的HTML元素。例：

* { font-size：15px，color：blue }

设置HTML中所有元素的字体为15px，颜色为蓝色

（2）元素选择器：

匹配指定的HTML元素。例：

p { font-size：15px，color：blue }

设置HTML中所有p元素的字体为15px，颜色为蓝色

（3）ID选择器：

匹配HTML元素中id属性为指定id的元素

HTML元素中以id属性设置id选择器，css中id选择器以“#”来定义。

#study { font-size：15px，color：blue }

设置HTML中所有id属性为study的元素的字体为15px，颜色为蓝色

（id属性在一个HTML文档中是唯一的）

（4）类选择器：

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可在多个元素中使用。类选择器用一个“.”符号显示。

匹配HTML元素中class属性为指定类的元素

.study { font-size：15px，color：blue }

设置HTML中所有class属性为study的元素的字体为15px，颜色为蓝色

注意：类名和id名的第一个字符不能使用数字，他无法在某些浏览器中起作用！

（5）群组选择器：

如果你想一次性为多个不同的元素设置相同的css属性，那么这时候群组选择器就派上用场了，多个匹配原则放在一起用逗号隔开，来设置多个符合匹配原则的元素的css属性。

语法：

selector1，selector2，......{ css属性值 }

（6）后代选择器：

如果你想为同时符合多个匹配规则的元素设置css属性，那么后代选择器就派上用场啦。多个匹配规则用空格隔开。

语法：

selector1 selector2 .... { css属性值 }

意为匹配即满足selector1，又满足selector2的元素。

（7）伪类选择器：

e：link

选择匹配的e元素，而且匹配元素所定义的超链接未被访问时的样式

e：visited

选择匹配的e元素，而且匹配元素所定义的超链接被访问时的样式

e：active

选择匹配的e元素，而且匹配元素被激活时的样式，常用于链接按钮被按下时的样式

e：hover

选择匹配的e元素，而且用户鼠标停留在e元素上时的样式

e：focus

选择匹配的e元素，而且匹配元素获得焦点时的样式

选择器就介绍到这里。介绍完选择器，大家会不会有疑问，如果我们不同的选择器同时匹配到了一个元素，且设置的css属性冲突，那那个元素到底该听谁的呢？

第一个解决办法：

在css样式中使用！important法则，这样使用了！important法则的样式会覆盖其他样式。但是众多前辈经过不断的验证，永远不要随意使用！important法则。

第二个解决办法：

权重计算，每一个选择器都有他的权重值，权重值大的选择器，优先级最高

内联样式权重最高，为1000

id选择器的权重为100

class类选择器的权重为10

HTML标签选择器的权重为1

例：

#study p { css属性值 } 权重为101

.study p { css属性值 } 权重为11

css选择器介绍完毕，下一节开始介绍一些常用的css属性