CSS知识补充-选择器

最新推荐文章于 2023-12-06 12:11:25 发布

原创最新推荐文章于 2023-12-06 12:11:25 发布 · 385 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 同时被 2 个专栏收录

25 篇文章

订阅专栏

HTML 和 CSS基础知识

14 篇文章

订阅专栏

CSS相关知识复习时，深究了一些发现自己知道的还是很少，之前只是会用却不了解所用的到底是什么，学海无涯。

一、CSS

首先第一点还是要知道一直说的CSS全称是什么，即cascading style sheet 层叠样式表，对此迷之喜好。

二、CSS引用

CSS样式引用的几种方法中，外部引用是link到CSS文件再放在head中，而将HTML文件放入浏览器中时候，是加载一行运行一行，那么当其加载到link处，是进行异步加载，一边继续加载下面的HTML内容一边加载外部的CSS文件。

1、同步加载
平常默认用的都是同步加载。同步模式又称阻塞模式，会阻止浏览器的后续处理，停止了后续的文件的解析，执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。同步加载流程是瀑布模型。

2、异步加载

异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了。异步加载流程是并发模型。

3、延迟加载

有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。也就是说，将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。

4、预加载

预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现。

三、选择器

1、简单的选择器

/*(1)通配符选择器*/
*{
    background-color: red;
}

/*(2)标签选择器*/
div{
    background-color: red;
}

/*(3)属性选择器*/
[class="demo"]{
    background-color: red;
}

/*(4)class*/
.demo{
    background-color: red;
}

/*(5)id*/
#demo{
    background-color: red;
}

/*(6)行间样式*/
<div style="background-color:red">demo</div>

此外，还有第7点，!important 可以强制设定某样式。

上述简单的选择器的写法不是关键，关键是同一份CSS样式中如果有不同选择器对同一个标签修饰，那么浏览器最终会选择哪一个，这就涉及到CSS权重问题了。

CSS权重
！important	Infinity
行间样式	1000
id	100
class \| 属性 \| 伪类	10
标签 \| 伪元素	1
通配符	0

note：各权重值之间不是十进制关系，而是256进制。通配符常用于初始化，页面上有默认的边距8px。

2、复杂选择器

（1）父子选择器（派生选择器）

<div>
    <span>123</span>
</div>
<span>456</span>

问：要求只用标签选择器，只将div中的span背景颜色设置为红色。

div span{
    background-color: red;
}

父子选择器不限于标签选择器，亦可作用于id、class，只要满足父子层次关系即可，但是这里的父子关系不是直接的父子关系，而是只要是其子孙关系就可以了。

父子选择器可以选择很长一段，那么浏览器在加载到这儿的时候会以什么方向去排查找到那个需要修饰的标签，

/*譬如，会是从左到右，还是从右到左?*/
div span strong em a{
    .........
}

事实上浏览器会以从右到左的方向遍历父子选择器，这样更快速。

（2）直接子元素选择器

<div>
    <em>1</em>
    <strong>
        <em>2</em>
    </strong>
</div>

问：要求只选择第1个em标签，设置背景颜色为红色。

div > em{
    background-color: red;
}

（3）并列选择器

<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

问：要求只选择第二个div标签设置背景颜色为红色。

div.demo{
    background-color: red;
}

并列选择器要求标签在前，id/class在后，中间不能有空格。

（4）分组选择器

<em>1</em>
<strong>2</strong>
<span>3</span>

em,
strong,
span{
    background-color: red;
}

这个算不上什么问题，将1、2、3都设置背景颜色为红色，可以一个个设置其标签的CSS样式，但为了减少重复代码，可以使用分组选择器。

3、权重计算

<div class="classDiv" id="classId">
    <p class="classP" id="idP">demo</p>
</div>

/*样式1*/
#idDiv p{
    background-color: red;
}
/*样式2*/
.classDiv .classP{
    background-color: blue;
}

问：样式1和样式2，哪个会生效？

对此就可以通过计算权重值大小来比较，样式1中#idDiv权重100，p标签权重1，就算其为十进制得到101；样式2中.classDiv和.classP都是class权重为10，得出20；大的生效，最终显示红色。

若权重值相同时，后面的样式会覆盖前面的，而且不同于高数中无穷大和无穷大+1不可比较，CSS中无穷大+1 大于无穷大。