CSS 之 选择器_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:28:06
原创
1474人浏览过

选择器

类型选择器

也叫做 元素选择器和简单选择器,可以根据元素标签指定样式。

p {color:red;}
登录后复制

类选择器

一般用于某些同类型的样式。

.xxxClass{}<div class="xxxClass"></div>
登录后复制

ID选择器

为特殊的元素,指定类型

#xxxId{}<div id="xxxId"></div>
登录后复制

后代选择器

在某个选择器后,选择指定规则的后代,为其指定样式

div p {}
登录后复制

伪类选择器

为某些特殊的元素,在某些条件时,指定样式。
比如,链接的link和visited ;
以及其他元素的hover,focus,active等。

立即学习前端免费学习笔记(深入)”;

a:link, a:visited {}a:hover, a:focus, a:active {}
登录后复制

通用选择器

类似通配符的作用,比如所有可用元素添加样式。

*{}
登录后复制

高级选择器

子选择器

后代选择器是选择所有的后代,子选择器则可以选择元素的直接后代,即子元素。

#nav>li{}
登录后复制

相邻选择器

#nav + p {}
登录后复制

属性选择器

比如为tooltip添加样式

acronym[title]{}
登录后复制

样式层叠

由于选择同一个元素可以通过不同的方法,比如元素的后代、或者类、或者ID,那么就可能造成样式的重叠。因此可以使用!important,增加样式的优先级。

样式特殊性

再说到样式的重叠的另一种情况,如果不同的方式都指定了样式,到底会优先使用哪一种呢?
这就需要了解特殊性了,从上到下 依次为:

#xxx{}.class{}body div{}div{}
登录后复制

即,元素上的style会优先、其次是使用ID选择器、然后是类选择器、后代选择器、最后是类型选择器

样式的继承

样式是可以继承的,比如给body增加样式,那么页面中body内的所有元素都会应用这个样式。

样式的引用

样式的引用由两种方式,一种是通过链接link,另一种则是style的导入的方式:

    <!-- <link rel="stylesheet" type="text/css" href="test.css"> -->    <style type="text/css">    /*slow*/    @import url("test.css");    </style>
登录后复制

相比较来说,link的方式要更快一些。

另外,还是推荐把CSS都放在同一个文件中。因为浏览器加载样式文件,是受浏览器的限制的,有的浏览器只支持同时下载3个文件、有的支持8个...
如果由三个文件,而浏览器只能同时下载2个文件,那么第三个就必须要等到前两个下载完后,才能加载。
因此,放在一个文件中会更快的加载。

如果把所有的CSS都放在一个文件,又可能导致文件过于庞大,不易维护。因此有以下几个建议:

  • 完善注释信息
  • 对样式进行分组,并写入相应的注释,可以加快定位
  • 发布时,可以考虑对文件进行压缩,比如删除注释、删除空白、压缩。目前很多的浏览器都支持从压缩包中下载文件,这样可以有效的减少文件体积。
  • 暂时也就整理这么多吧!后续再补充....

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号