Table of Contents
选择器
类型选择器
类选择器
ID选择器
后代选择器
伪类选择器
通用选择器
高级选择器
子选择器
相邻选择器
属性选择器
样式层叠
样式特殊性
样式的继承
样式的引用
Home Web Front-end HTML Tutorial CSS 之 选择器_html/css_WEB-ITnose

CSS 之 选择器_html/css_WEB-ITnose

Jun 24, 2016 am 11:28 AM

选择器

类型选择器

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

p {color:red;}
Copy after login

类选择器

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

.xxxClass{}<div class="xxxClass"></div>
Copy after login

ID选择器

为特殊的元素,指定类型

#xxxId{}<div id="xxxId"></div>
Copy after login

后代选择器

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

div p {}
Copy after login

伪类选择器

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

a:link, a:visited {}a:hover, a:focus, a:active {}
Copy after login

通用选择器

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

*{}
Copy after login

高级选择器

子选择器

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

#nav>li{}
Copy after login

相邻选择器

#nav + p {}
Copy after login

属性选择器

比如为tooltip添加样式

acronym[title]{}
Copy after login

样式层叠

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

样式特殊性

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

#xxx{}.class{}body div{}div{}
Copy after login

即,元素上的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>
Copy after login

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

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

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

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

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    AI Hentai Generator

    AI Hentai Generator

    Generate AI Hentai for free.

    Hot Article

    R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
    2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
    Repo: How To Revive Teammates
    4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: How To Get Giant Seeds
    4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

    The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

    How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

    The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

    What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

    Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

    How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

    This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

    What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

    The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

    What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

    The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

    How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

    This article explains the HTML5 &lt;time&gt; element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

    What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

    The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

    See all articles