CSS学习：四种引入样式及其区别，基础选择器，高级选择器，CSS的层叠性和继承性

您所在的位置：网站首页 › 烤馍机有哪几种样式 › CSS学习：四种引入样式及其区别，基础选择器，高级选择器，CSS的层叠性和继承性

CSS学习：四种引入样式及其区别，基础选择器，高级选择器，CSS的层叠性和继承性

2024-07-13 21:54| 来源: 网络整理| 查看: 265

文章目录 CSS学习：四种引入样式及其区别，基础选择器，高级选择器，CSS的层叠性和继承性四种引入样式行内式样式表内嵌式样式表外链式样式表导入式样式表（了解即可）样式表的区别选择器基础选择器标签选择器id选择器类名选择器通配符选择器高级选择器后代选择器交集选择器并集选择器 CSS的层叠性和继承性继承性层叠性选择器的权重

四种引入样式行内式内嵌式外链式导入式行内式样式表

基本语法：（之前学习的就是：所有样式写在标签内部）

引入为止：在标签的style属性中，等号后面的引号内属性CSS样式，多个属性使用分号分隔

内嵌式样式表

基本语法：书写在head标签的内部，title标签的下面，一对style标签中。

Document /* div选择器 */ div{ color: red; font-size: 18px; } 文字

CSS内嵌式样式表

外链式样式表基本语法：书写在head标签的内部，title标签的下面，一个link内部去进行css文件引入。link标签的作用就是引入外部文件，通过href属性，属性值是文件地址。rel属性值如果是stylesheet，代表的就是引入样式表。 Document 文字

css外链式/1.css中：（通过引入css文件到html文件中，从而实现样式的加载）注：css文件的内部不需要写任何的标签，直接属性css选择器和代码，因为css文件内部是不允许属性HTML骨架的。

div{ color: blue; font-size: 20px; }

CSS外链式样式表

导入式样式表（了解即可）基本语法：书写在head标签的内部，title标签下面，一对style标签内，通过@import进行导入。url内部是css文件的引入地址。注：导入式必须写在style标签的最顶部。 Document @import url(css外链式/1.css); 文字样式表的区别

权重问题测试：

Document @import url(css外链式/2.css); p{ color: blue; } 文字

css外链式/1.css中：

p{ color:purple; }

css外链式/2.css中：

p{ color: yellow; }

测试结果显示 CSS权重

四种样式表的区别和优缺点： CSS样式权重

选择器选择器分为两种，一种是基础选择器，一种高级选择器。基础选择器：标签选择器、id选择器、类名选择器。高级选择器；后代选择器、交集选择器、并集选择器。基础选择器标签选择器选择方法：通过标签名称去选择器。书写方法：标签名。选择范围：HTML文档中所有的同名标签。可以找到所有对应的标签进行加载。标签选择器无视嵌套规则，都能进行识别加载。用途：实现全选同名标签，可以设置公共样式。缺点：只能进行全选，不能进行单独的布局样式。 Document p{ color: red; } h3{ color: blue; } 段落标签段落标签三级标题三级标题

标签选择器

id选择器选择方法：通过标签上id属性进行选择。书写方法：#id属性值（自定义）。选择范围：只能选中一个标签。优点：提高了确定唯一性，并且id属性权重高。id就相当于是标签的身份证号，具有唯一性。规定页面上不允许有同名id属性。（有的话也不会报错，浏览器依旧可以正常加载。）缺点：只能实现单选。 Document #p1{ color: blue; } 第一段文字第二段文字第三段文字

id选择器

类名选择器选择方法：通过标签上的clas属性进行选择。书写方法：通过.(点)匹配对应的class属性值。选择范围：选择所有同名clss属性标签。

一个标签的class属性值可以有一个或者多个，多个class属性之间使用空格隔开。

Document .par{ color: blue; } .cur{ /* 如果cur在par上面那么第二个p标签还是会显示blue 蓝色此处涉及到重叠性以后再讲*/ color: yellow; } 第一段文字第二段文字第三段文字

类名选择器注：id和class属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线。

通配符选择器选择方法：*（单独一个符号即可）书写方法：选择包含html标签在内的所有标签。通配符*后面添加的样式，每一个标签都会加载一次。 Document *{ color:red; } 文字 p标签 div h3

通配符选择器由此可以发现多个标签多个元素之间并没有进行元素的区分，而是统一被通配符选中。

我们通常用来使用清除页面的默认样式。

Document p{ width: 100px; height: 100px; background: purple; } p标签

通配符默认边距将上述代码在style处添加通配符选择器即可，操作如下：

*{ padding: 0; margin: 0; } p{ width: 100px; height: 100px; background: purple; }

通配符边距对比

高级选择器后代选择器书写方法：使用空格连续连接多级选择器。作用：通过标签之间的后代关系去决定选择某个范围内的元素，具有精确匹配性。注：后代关系不一定是父子关系（即直接嵌套关系）。 Document .box ul li{ /* 如果只是设置 ul li{}或者li{} 那么box2里的也会变成红色*/ color: red; } /* 后代关系不一定是父子关系直接设置 .box li{}也是可以的 */ .box2 ul li{ color: green; } box里面的li box里面的li box里面的li box里面的li box2里面的li box2里面的li box2里面的li box2里面的li

后代选择器

交集选择器书写方法：将多个选择器连接书写，中间没有空格，不需要加任何符号。作用：进行满足所有选择器条件的匹配。 Document p{ color: red; } p.par{ /* 这样使得div标签就算也有类名属性par 但是不受影响 */ /* 如果单纯是 par{} 那么div标签的颜色也会被改变 */ color: blue; } 文字文字文字

交集选择器

并集选择器并集选择器有‘和’的意思，代表多个标签设置同样的属性。书写方法：将多个选择器使用逗号进行连接，最后一个不能加逗号。选择范围：多个选中标签的集合 Document p,div{ /* div和p标签设置的属性是一样，这个时候我们可以通过并集选择器设置同样的属性值 */ color: red; } 文字文字

注：并集选择器非常灵活，可以结合多种选择器使用，就是利用逗号进行分割从而区分属性。

/* 下面代码指的是 #par里面的.par里面的li和p标签的文字颜色为蓝色 */ #par .par li,p{ color: blue; } CSS的层叠性和继承性继承性特征：只需要给祖先元素设置文字属性，后代元素就能加载这个属性。注：css可以继承的属性都是关于文字的，比如color，font-size，font-family。 Document .box{ color: red; } 文字

继承性

层叠性

HTML骨架：

文字

CSS样式：

p{ color: red; } .par{ font-size: 20px; } #par{ /* 给文字添加下划线 */ text-decoration: underline; }

层叠性1 如果多个选择器设置了同一属性，就会体现出CSS的层叠性（即部分被杠掉了）：

p{ color: red; } .par{ color: blue; } #par{ color: purple; }

层叠性2

选择器的权重

id选择器>class类名选择器>标签选择器

即如果被多个选择器同时选中，首先看id的，如果没有id的，看class的，如果没有class的，看标签的。

Document .box1 div.box2 #box3 p{ color: red; } #box1 #box2 div.box3 p{ color: blue; } #box1 div.box2 .box3 p{ color: pink; } 文字

选择器权重如果遇到复杂的选择器，不要慌，要学会数选择器。

数选择器方法：

首先将所有的选择器罗列出来，从id选择器比较，如果id选择能比出大小，则数量多的获胜。如果id选择器数量相同或者没有，则比较类名选择器，数量多的获胜。如果类名选择器数量相同或者没有，则比较标签选择器，数量多的获胜。如果所有选择器数量相同，后写的覆盖先写的。

上述是所有选择器都选择同一个元素p，所以需要数权重数量，现在如果都没有选中：

如果都没有选择中对应标签，就看谁离得近，离得近的就是被选中的（即就近原则），如果选择的都是同一个元素中，再去数权重。 /* 没选中同一个 */ #box1 #box2 { color: blue; } .box1 .box2 .box3 { color: purple; }

就近原则遇到了复杂的选择器：

首先看是否同时选中的一个元素，如果都选择的是同一个元素，则数权重。如果层级不同，比如有的是父亲级别，有的是爷爷级别，使用就近原则，谁离得近听谁的。如果所有的权重一样，选择位置也一样，后书写的覆盖先写的。

【本文地址】

CSS学习：四种引入样式及其区别，基础选择器，高级选择器，CSS的层叠性和继承性

CSS学习：四种引入样式及其区别，基础选择器，高级选择器，CSS的层叠性和继承性

今日新闻

推荐新闻