CSS 之 选择器_html/css_WEB-ITnose
选择器
类型选择器
也叫做 元素选择器和简单选择器,可以根据元素标签指定样式。
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都放在一个文件,又可能导致文件过于庞大,不易维护。因此有以下几个建议:
暂时也就整理这么多吧!后续再补充....

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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,

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

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

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

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

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

This article explains the HTML5 <time> 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

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