初识css与css选择器

最新推荐文章于 2024-11-08 15:41:32 发布

chiniue1759

最新推荐文章于 2024-11-08 15:41:32 发布

阅读量141

点赞数

文章标签：前端 php ViewUI

原文链接：https://my.oschina.net/u/3953786/blog/2963863

版权

前面总结完了html部分的基础内容之后，我总结了一下一下css部分的内容，希望对大家有所帮助~

初识CSS

• css的全称为cascading style sheet 层叠样式表，它的主要作用是为我们的html标签添加各种各样的样式和修饰效果。

• 这里我总结的css属于css2.0的知识点，css3.0的知识我打算在后面的文章里面总结。

• 其实html+css部分的知识点总共站前端的知识总量的1%-2%，但是却占了20%-30%的重要度，所以我们一定不能轻视html和css。(这是针对最近网上有很多人学习前端忽视html和css说的…)

首先我们要介绍一下，html页面如何引入我们的css样式

css的引入方式一共有4种：

1.行间样式直接在html 的标签里面写style属性前面两篇里面的更改标签的样式都是用的这一种方式

2.页面级css 在head标签里面添加一个style标签

这里的style标签的type要不不写，不然就要写正确，只要书写错误，这个样式就不会生效。

3.外部css文件 <—我们选择这种方式

我们在外面创建一个.css后缀的文件，然后在html里面引入这个外部的css文件即可。

在head标签里面加上一个link标签。

• link标签里面的href属性上写我们建立的css文件的地址，最好用相对地址的形式。

我们为什么要选择这种加载方式？

因为link加载不会阻塞html的加载，html和css属于异步加载

4.import方式引入(已经弃用)

在head标签里面写一个style标签，在第一行写上@import url();url里面写上css文件的地址，可以加引号也可以不加引号。

这种引入方式有几种缺点导致它现在被废弃使用：

1.必须写在第一行，若有多个则一起写在最前面。

2.ie6的环境下，只能使用最多31次，这个数字据说是阿里的开发人员一点一点测试出来的。

3.程序读到import的时候，会忽略掉import，等到html里面的所有内容包括图片在内的所有资源全都加载完之后才加载import的css文件，也就是说，import引入的css文件和html的加载是同步进行的。

• 这里有一点不得不说明的是，link标签引入和style标签修改样式二者之间并没有什么优先级，谁写在前面谁就先执行，写在后面的css文件会覆盖掉前面的css文件。有时候会因为网速问题，link写在上面，但是link还没有加载进来，所以先运行了后面的style，这种问题是网速导致的，并不是二者本身拥有优先级的问题。

介绍完了如何引入css文件之后，我们再来介绍一下css选择器的知识

• css选择器的作用是让我们找到我们想要修改样式的元素，然后为其修改样式。

我们的选择方式有很多种：

1.id选择器

我们给元素添加一个id属性，这个id是唯一标识，一个元素只能有一个id，一个id也只能给一个元素。然后我们在css文件中，通过#id {}的方式，就可以选择到我们添加id的那个元素了。

CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

2.class类选择器

在元素的属性中写一个叫做class的属性，这个属性是为这个元素添加一个类名，每一个元素可以有多个类名，同一个类名也可以赋给很多个元素。然后我们在css文件中，通过.class {} 的方式来选择出添加了类名的元素。

CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

3.标签选择器

div{} 只要是div的标签就会被选择出来。

• 这里有一个很重要的编程思想：我们先写css在写html，是我们自己在创造标签，而如果我们现在html再写css的话，是我们在添加样式。比如：我们在em加上font-weight: bold;的样式，这样我们就创造了一个加粗斜体的标签。

4.通配符选择器 {} 所有的标签都会被选择出来加上样式，body标签页包含在内。所以如果{background-color: red}的话，那么整个页面都会变红，因为我们同时给body元素也添加了背景颜色。

• 我们在单独的样式后面加上 !important之后，这个样式就会被赋予最高级的优先级，在没有特殊情况下，后面怎么添加样式都不会覆盖或者修改这个样式。比如：background-color: red !important;没有特殊情况的话后面怎么加样式都是红色的。

5.属性选择器

[id] {} 这样有id属性的标签就都会被选择出来。

我经过测试发现：

优先级 !important > 行间样式 > id > class|属性 > 标签 > *

但是我们不必背这些东西，我们只需要记住他们每一种选择器的权重值就可以了。

• 值得一提的是，在数学中无穷大+1依然是无穷大，但是在css选择器的权重值里面，无穷大+1 > 无穷大。

有了权重值我们就可以了解父子选择器了

6.父子选择器（派生选择器）

div p {}

给div下面的p加样式这时候的p的权重值是加和的结果。

• 在实际开发中，我们因为要注意浏览器寻找时候的耗能，一般父子选择器不超过4层。

.wrapper .box .content .name 一般不超过像这样的四层。

7.直接子元素选择器

div>strong

div直接子元素里面的strong，div的子元素里面的不是div的直接子元素的strong就不符合要求。

<div>

</div>

√

<div>

<em>

</em>

</div>

id和class也是可以使用父子选择器的哟~

8.并列选择器

怎么选择出类名是select的div呢？

我们可以使用div.select {} 来选择出来

这种方式是只有div和.select同时作用在一个标签上的时候才会被选择出来，书写的时候标签名放在前面，其他的放在后面。

9.分组选择器

<p></p>

我们要想同时给四种标签都加上color: red的样式，不可能把四个标签都写一遍样式，因此要用分组选择器。

div, p, em, strong {} 这样的写法，我们可以把前面写的所有的标签都选择出来加上样式，中间是用逗号连接的。这个样子四种标签就全都被选择出来并且都加上了统一的样式。

最后有一个很重要的问题，那就是父子选择器的时候浏览器是怎么检索的？

div p strong em span 这样的选择器，浏览器是怎么找的？是从左往右，还是从右往左？

答案是从右往左哟~

这是为什么呢？

• 因为如果是从左往右寻找的话，每找到一个父级标签，都要把它下面的所有标签都遍历一遍，看看有没有我们下一个标签，上面那个选择器中，浏览器会先找到div这个标签，然后把div下面所有的子元素都遍历一遍后，找到strong这个标签，然后再把strong这个标签下面的所有元素遍历一遍，找到em这个标签，以此类推，这样是十分消耗性能并且速度非常慢的。

• 而如果是从右往左的话，那么浏览器只需要先找到span标签，然后从span这个节点向上寻找，只要找到em就可以停止寻找，以此类推，不必遍历所有的节点，而且需要遍历的点非常的少，这样的好处显而易见，速度非常快，而且不耗性能。