CSS的魔法工具——CSS选择器

2013-04-27 分类：网站建设

作为网站制作前端工程师，通过CSS可以轻而易举的改变网页颜色、布局，做出好看的效果等，但是想要实现各种样式离不开CSS选择器，它就像是魔法工具，让我们随意操作网页元素的样式，下边成都创新互联网站建设公司为大家总结了一些常用的选择器。

1、*：通用选择器

假如我们想让文档中的每个元素都显示成红色，我们可以这么做：

* {color:red;}

通用选择器，可以匹配页面所有的元素。

2、.X：类选择器

类选择器的开头用.（点）进行表示。与ID选择器的区别就是可以重用。定义多个元素的样式，好比按组进行归类，同一类的样式统一定义。

.error {

color: red;

}

如果把两个类串在一起，选择的就是同时具有两个类名的元素，类名的顺序则无所谓，比如 class="urgent warning" , css 选择器你也可以这样写 .warning .urgent。

3、X Y：后代选择器

后代选择器，英文名称：descendant selector。比如我们要选择在li元素中包含a标签的链接（不是文档中所有的链接），取消下划线的默认样式，我们可以这样代码实现：

li a {

text-decoration: none

}

如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷, 这样写的可读性也太差了。还有一个需要注意的，后代元素的层级问题，可能会很深。

4、X：元素选择器

假如你想针对Html预定义的标签，比如类似：p,h3,em,a这些标签，我们可以快速为某类标签定义样式。如下段代码所示：

a { color: red; }

ul { margin-left: 0; }

5、#X：ID选择器

ID选择器的开头使用#号，但是你在使用的时候，需要谨慎。要考虑是否真的需要使用ID选择器来定义样式，id选择器比较局限，不能重用。因此需要慎重考虑。

#container {

width: 960px;

margin: auto;

}

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容