ASCII码 ASCII码

css样式来源和选择器入门

发布于:2022-07-07 13:21:20  栏目:技术文档

博客已迁移至自建网站,此博客已废弃.请移步至:https://blog.ours1984.top/posts/cssrm/ 欢迎大家访问

CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中,把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一个

样式的来源

  1. 默认样式: 代理样式,是浏览器为每个元素预置的样式
  2. 继承样式: 某一些属性,如颜色,字体,它可以由它的父级进行设置,达到简化的目标
  3. 自定义样式: 就是元素中的style属性中设置的样式

来源与位置相关, 同名样式与书写顺序相关.程序员,主要是写自定义样式,也有来源,也有优先级

自定义样式可分为如下三种,首选外部样式,实现最大范围的样式复用, 这才是css设计者的初衷

  • 内联样式: 给元素添加 “style属性”,仅适用于当前特定的某个元素
  • 文档样式: 给当前html文档添加 “style标签”,仅适用于当前的html文档
  • 将多个页面共用的样式,写到一个外部的css文档中,再引入到对应的页面进行复用

外部样式通过link标签引入,格式如下 <link rel="stylesheet" href="style.css" /> rel设置为stylesheet即为样式表

实例演示样式优先级

  1. <div style="color:antiquewhite">
  2. <h1 class="extern inner" style="color:blue">内联文字</h1>
  3. <h1 class="extern">外部样式</h1>
  4. <h1 class="inner">文档样式</h1>
  5. <h1 class="extern inner" >外部?文档</h1>
  6. <h1>继承文字</h1>
  7. </div>
  8. <h1>默认文字</h1>
  9. <style>
  10. h1.inner{
  11. color: blueviolet;
  12. }
  13. </style>
  14. <link rel="stylesheet" href="ddd.css">

外部样式如下

  1. h1.extern{
  2. color:aqua;
  3. }

呈现效果如下

20220707004712

可知,外部样式和文档样式不分优先级,只看先后顺序

内联样式 > 文档样式==外部样式 > 继承样式 > 浏览器默认样式

CSS规则

20220706232350

选择器指定了需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

不要在属性值与单位之间留有空格(如:”margin-left: 20 px” ),正确的写法是 “margin-left: 20px”CSS注释以 /* 开始, 以 */ 结束

基本选择器

标签选择器

直接指定标签名称,选中所有指定标签

  1. h2 {
  2. color: red;
  3. }

属性选择器

指定标签中符合属性的元素.比如以下例子,选择title属性为welcome的h2元素

  1. h2[title='welcome'] {
  2. color: green;
  3. }

对于id属性和class属性,专门简化了拼写.使用.选择class,使用#选择id

  1. h2.three {
  2. color: blue;
  3. }
  4. h2#active {
  5. color: cyan;
  6. }

群组选择器

多个选择器以,分开,匹配任意一个即可选中

  1. h2#hello,
  2. h2.world {
  3. background-color: yellow;
  4. }

通配符选择器

  1. /* * : 包括了h2,h3 ... */
  2. body * {
  3. /* !important: 临时提权到最高权重,用于调试 */
  4. background-color: gray !important;
  5. }

上下文选择器

目标 符号 说明
一代元素 > 直系儿子
后代元素 ` (空格)` 子子孙孙
相邻兄弟 + 下一个同级元素
所有兄弟 ~ 所有同级元素
  1. /* 1. 子元素 : > */
  2. .list > .item {
  3. border: 1px solid;
  4. }
  5. /* 2. 后代元素: 空格 */
  6. .list .item {
  7. border: 1px solid;
  8. }
  9. /* 3. 相邻兄弟: + */
  10. /* 我们的目标是第5个的相邻兄弟,第6个 */
  11. .list > .item.five + * {
  12. background-color: lightblue;
  13. }
  14. /* 4. 所有兄弟: ~ */
  15. .list > .item.five ~ * {
  16. background-color: lightblue;
  17. }
  18. /* 当有多个class名称的时候,直接链式写就可以 */
  19. .list > .item.five {
  20. background-color: lightgreen;
  21. }

选择器权重

不同的选择器可能选中同意元素,到底听谁的,这里就有一个权重问题了

权值和权级

选择器种类 权值基数 权级
!important 10000 5级
内联样式 1000 4级
id选择器 100 3级
class选择器 10 2级
元素选择器 1 1级
通配符选择器 0 0级

important无脑最高优先级,内联样式一般也不受文档和外部选择器影响

所以外部选择器实际上由上表下面四个权值组成.通配符无权重忽略不计,实际上就是三位数的权重了

比如以下选择器权重计算:1*3+10*2+100 = 123

  1. html body h1 .cccc.bbbb#iiii{
  2. color: green;
  3. }

所以这也就解释了,为什么尽量少用或不用id?原因只有一个,id权重过大, 没有多大的后期调试空间

生效判定

由于HTML代码的执行特点时从上往下执行,因此在权值相同的情况下,后面的选择器会覆盖前面的选择器相同的属性.

否则,两种选择器覆盖了同一属性,此时权重高的选择器生效。

量变无法引起质变

当有11个元素选择器和1个类选择器同时选中同一元素时,哪个选择器的样式会生效?

  1. <h2 id="hello" class="c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 c10">hello5</h2>
  2. <style>
  3. #hello{
  4. color: yellow;
  5. }
  6. .c0.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10{
  7. color: blue;
  8. }
  9. </style>

按照权值来看,11>10,应该是元素选择器生效,实际运行发现,类选择器生效了

所以三位数的权重,这里其实不严谨.在选择器的世界里,地位无法向高位进位!

10个低级选择器并不能等于1个高级选择器

相关推荐
阅读 +