CSS 之 选择器_html/css_WEB-ITnose
程序员文章站
2022-05-11 15:24:22
...
选择器
类型选择器
也叫做 元素选择器和简单选择器,可以根据元素标签指定样式。
p {color:red;}
类选择器
一般用于某些同类型的样式。
.xxxClass{}
ID选择器
为特殊的元素,指定类型
#xxxId{}
后代选择器
在某个选择器后,选择指定规则的后代,为其指定样式
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,增加样式的优先级。
样式特殊性
再说到样式的重叠的另一种情况,如果不同的方式都指定了样式,到底会优先使用哪一种呢?
这就需要了解特殊性了,从上到下 依次为:
style=""#xxx{}.class{}body div{}div{}
即,元素上的style会优先、其次是使用ID选择器、然后是类选择器、后代选择器、最后是类型选择器
样式的继承
样式是可以继承的,比如给body增加样式,那么页面中body内的所有元素都会应用这个样式。
样式的引用
样式的引用由两种方式,一种是通过链接link,另一种则是style的导入的方式:
相比较来说,link的方式要更快一些。
另外,还是推荐把CSS都放在同一个文件中。因为浏览器加载样式文件,是受浏览器的限制的,有的浏览器只支持同时下载3个文件、有的支持8个...
如果由三个文件,而浏览器只能同时下载2个文件,那么第三个就必须要等到前两个下载完后,才能加载。
因此,放在一个文件中会更快的加载。
如果把所有的CSS都放在一个文件,又可能导致文件过于庞大,不易维护。因此有以下几个建议:
暂时也就整理这么多吧!后续再补充....
推荐阅读
-
li中嵌套ul的边距问题,求大神_html/css_WEB-ITnose
-
CSS常用布局整理(二)_html/css_WEB-ITnose
-
input 类型总结_html/css_WEB-ITnose
-
20个精美的免费 PSD 界面设计素材【免费下载】_html/css_WEB-ITnose
-
WORKS页改版吐槽_html/css_WEB-ITnose
-
将会员注册页面的Email修改成非必填项(ecshop2.7.2版)_html/css_WEB-ITnose
-
[置顶] CSS+DIV总结_html/css_WEB-ITnose
-
Markdown+Bootstrap图片自适应属性_html/css_WEB-ITnose
-
引入css的四种方式_html/css_WEB-ITnose
-
css border实现的三角形图案_html/css_WEB-ITnose