前端笔记-02

CSS一些不太熟悉的知识

CSS外部引入方式

1、标签引入

格式：

<link rel="stylesheet" type="text/css" href="....">

2、标签中引入

格式：

<style>
     @import url("...")
</style>

区别：

• 1、本质不同：
  • link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。
• 2、加载顺序不同：
  • 页面被加载的时候，link引用的CSS会同时被加载，，而@import引用的CSS 会等到页面全部被下载完再被加载。
• 3、兼容性不同：
  • link在所有浏览器都兼容，@import只支持IE5以上的浏览器。
• 4、可操作性：
  • link可以在dom操作时引用，@import则不能。
• 5、注意事项：
  • @import在<style/>标签内，一定要放在顶部，否则会引用失败

CSS选择器权重计算

单独的、一般的选择器

!important     +10000
行内样式        +1000
id选择器        +100
类/伪类选择器    +10
标签选择器       +1
继承来的         +0

Tips: !important不是选择器，但也符合计算方式。

后代选择器

权重相加原则

.nav li{ /* 10+1=11 */
    color: red;
} 
ul li{  /* 1+1=2 */
    color: green;
}

结果：

• ~o( =∩ω∩= )m
• ~o( =∩ω∩= )m

分组选择器

单独计算原则

#header,.main,ul li a{
    width:200px; height:50px;
}

每个单独的选择器各自独立计算。

特别的

如果权重相加相等，则按后覆盖前的原则

* LOVE-HATE原则

<a>标签 伪类选择器的书写顺序：

/* L--V--H--A */
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

• 本文作者： 本该如此
• 本文链接： https://anyway521.github.io/post/23c8d344.html
• 最后更新： 2021年01月14日 21:23:40
• 版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！

赞

赏杯Java？٩(๑^o^๑)۶

创作不易，感谢支持！