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;

}

标题名称:CSS的魔法工具——CSS选择器
链接分享:/news49/799.html

成都网站建设公司_创新互联,为您提供网站排名品牌网站建设网站制作营销型网站建设静态网站网站策划

广告

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

外贸网站制作