加载页面中...
GitHubio制作过程中学习的CSS | lwstkhyl

GitHubio制作过程中学习的CSS

HTML-other

包括选择器优先级、网页图标的link链接

选择器优先级

参考文章

一个选择器的优先级可以说是由四个部分相加，可以认为是一个四位数，由个、十、百、千位数组成，数越大优先级越高

  • 千位：如果是声明在HTML标签style中的属性（内联样式）则该位得一分。这样的声明没有其它选择器，所以它得分固定为1000。下面的三个都是声明在<style>或<link>中的选择器

  • 百位：选择器中包含ID选择器则该位得一分

  • 十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分

  • 个位：选择器中包含元素、伪元素选择器则该位得一分

当两个选择器优先级相同，但其中同一CSS样式取值不同时，才会根据CSS引入的顺序进行覆盖

例：

body #main .box p span {
    color: red;
}

选择器优先级

!important

span {
    color: green !important;
}
body #main .box p span {
    color: red;
}

使用!important声明的css样式的优先级会比其它任何选择器都高，它没有优先级权重，是一个例外的规则。在上面的例子中，虽然body #main .box p span选择器的优先级更高，但因为span中的color样式设置了!important，实际的color应为green

但如果多个相同的样式都使用了!important，仍会根据选择器优先级进行覆盖

因为!important会破坏固有的级联规则，所以应该谨慎使用。一般只应用在

  • 覆盖内联样式

  • 覆盖优先级很高的选择器，如在第三方插件中的代码不便于改动，就只能使用!important来重写覆盖

网页图标

参考文章

<link rel="icon" href="favicon.ico" type="image/x-icon">

除了.ico外，.png、.jpg、.gif、.svg文件都可作为图标

如果要做到在不同设备上使用不同的Favicon，可以使用媒体查询来指定不同尺寸的Favicon

例：在不同的尺寸下使用不同的图标文件

<link rel="icon" href="favicon.png" type="image/png" sizes="32x32">
<link rel="icon" href="favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="icon" href="favicon-48x48.png" type="image/png" sizes="48x48">

最重要的一点：图标的<link>标签应该放在<head>标签中，位于其他任何<link>和<style>标签之前