博客列表 >【CSS入门】CSS基本语法和选择器优先级学习总结简介

【CSS入门】CSS基本语法和选择器优先级学习总结简介

 一纸荒凉* Armani
 一纸荒凉* Armani原创
2021年03月23日 13:00:212256浏览

1.初识 CSS 简介

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

CSS样式规则

使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下:

在上面的样式规则中:
1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。

  1. <style>
  2. /* 语法 : 选择器 {
  3. 属性: 值,多个声明之间用分号隔开
  4. } */
  5. /* 选择器 + 声明块 = 样式规则 */
  6. h1 {
  7. color: green;
  8. /* !important 级别最高的,不建议用,适用于调试 */
  9. color: lime !important;
  10. }
  11. </style>

2.css 的三种引入方式

CSS可以写到那个位置? 是不是一定写到html文件里面呢?

1.内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:

  1. <head>
  2. <style type="text/CSS">
  3. 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
  4. </style>
  5. </head>

语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。

type=”text/CSS” 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。

2.行内式(内联样式)

内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:

  1. <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。

3.外部样式表(外链式)

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:

  1. <head>
  2. <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
  3. </head>

注意: link 是个单标签哦!!!

该语法中,link标签需要放在head头部标签中,并且必须指定link标签的三个属性,具体如下:

  1. href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
  2. type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
  3. rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

4.三种样式表总结

样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便,权重高 没有实现样式和结构相分离 较少 控制一个标签(少)
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中)
外部样式表 完全实现结构和样式相分离 需要通过引入 最多(强烈推荐) 控制整个站点(多)
  1. 两者导入的语法不同

link(链接式语法)
<link rel="stylesheet" href="style.css">

@import的语法不同:

  1. <style type="text/css">
  2. @import url("style.css")
  3. </style>
  1. link和import语法结构不同,前者是html标签,只能放在html源代码中使用,link除了可以加载css外,还可以做很多其他事情,比如定义RSS,定义rel连接属性等。@import看作CSS样式,只能加载CSS

  2. 使用link方式,浏览器将css文件和HTML的主题部分一同加载,所以显示出来的页面从一开始就是带样式效果的;而采用@import方式,浏览器则会先装在完整个HTML文件再装载CSS文件

  3. 当使用javascript控制DOM去改变样式的,只能用link方式,因为@import眼里只有CSS ,不是DOM可以操控的。

  4. link是XHTML标签,无兼容问题,@import是在CSS2.1提出的,低版本的浏览器不支持,,而link标签无此问题。

3.css选择器

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

1.基础选择器

1.1 标签选择器

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:

  1. 标签名{
  2. 属性1:属性值1;
  3. 属性2:属性值2;
  4. 属性3:属性值3;
  5. }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. p {
  7. color: pink;
  8. }
  9. div {
  10. color: purple;
  11. }
  12. /* p div h1 span em i 这是标签作为选择器 我们成为 标签选择器 */
  13. </style>
  14. </head>
  15. <body>
  16. <p>白展堂</p>
  17. <p>吕秀才</p>
  18. <p>李大嘴</p>
  19. <div>鸣人</div>
  20. <div>佐助</div>
  21. <div>卡卡西</div>
  22. </body>
  23. </html>
1.2.类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

  1. .类名{
  2. 属性1:属性值1;
  3. 属性2:属性值2;
  4. 属性3:属性值3;
  5. }
  6. <h1 class="类名">Hello World</h1>

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

  1. <head>
  2. <meta charset="utf-8">
  3. <style>
  4. span {
  5. font-size: 100px;
  6. }
  7. .blue {
  8. color: blue;
  9. }
  10. .red {
  11. color: red;
  12. }
  13. .orange {
  14. color: orange;
  15. }
  16. .green {
  17. color: green;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <span class="blue">G</span>
  23. <span class="red">o</span>
  24. <span class="orange">o</span>
  25. <span class="blue">g</span>
  26. <span class="green">l</span>
  27. <span class="red">e</span>
  28. </body>
1.3.id选择器

id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

  1. #id名{
  2. 属性1:属性值1;
  3. 属性2:属性值2;
  4. 属性3:属性值3;
  5. }
  6. <h1 id="#id名">Hello World</h1>

该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。只是具有唯一性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. .tou {
  7. color: red;
  8. }
  9. #big {
  10. /* id选择器 和 类选择器 结合记忆更好 */
  11. color: pink;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="big">熊大</div>
  17. <div>熊二</div>
  18. <div class="tou">光头强</div>
  19. </body>
  20. </html>
1.4.通配符选择器

语法:

  1. <style>
  2. * {
  3. color: red;
  4. }
  5. </style>

将页面中所有标签选中
使用场景:通常设置* {padding: 0;margin: 0;}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. * {
  7. /* * 代表所有选择器 */
  8. color: pink;
  9. font-size: 12px;
  10. margin: 0;
  11. padding: 0;
  12. font-weight: normal;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <p>我是段落</p>
  18. <div>我是段落</div>
  19. <span>我是段落</span>
  20. <em>我是段落</em>
  21. <strong>我是段落</strong>
  22. <h1>我是段落</h1>
  23. </body>
  24. </html>
1.5.多类名选择器

我们可以给标签指定多个类名,从而达到更多的选择目的。

  1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
  2. 各个类名中间用空格隔开。
  1. <div class="pink fontWeight font20">亚瑟</div>
  2. <div class="font20">刘备</div>
  3. <div class="font14 pink">安其拉</div>
  4. <div class="font14">貂蝉</div>
1.6.id和类 选择器区别

W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜

id选择器好比人的身份证号码, 全中国是唯一的,不得重复。只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。用法基本相同

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. .red {
  7. /* 类选择器是可以重复多次使用的 类似于 人名 刘德华 */
  8. color: red;
  9. }
  10. #pink {
  11. /* id 类似身份证号 是唯一的,只允许使用一次 */
  12. color: pink;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="red">张三</div>
  18. <div id="pink">张三丰</div>
  19. <div class="red">张三疯子</div>
  20. <div>张大大</div>
  21. </body>
  22. </html>

2.复合选择器

2.1.交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。

记忆技巧:

交集选择器 是 并且的意思。 即…又…的意思

  1. 比如: p.one 选择的是: 类名为 .one 段落标签。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. .red {
  7. color: red;
  8. }
  9. p.red {
  10. font-size: 30px;
  11. }
  12. div.red {
  13. font-size: 15px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="red">熊大</div>
  19. <div>熊二</div>
  20. <div>熊熊</div>
  21. <p>小明</p>
  22. <p>小红</p>
  23. <p class="red">小强</p>
  24. </body>
  25. </html>
2.2.并集选择器

并集选择器(CSS选择器分组)是各个选择器通过<strong style="color:#f00">逗号</strong>连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧:

并集选择器 和 的意思, 就是说,只要逗号隔开的,所有选择器都会执行后面样式。

比如 .one, p , #test {color: #F00;} 表示 .onep#test 这三个选择器都会执行颜色为红色。 通常用于集体声明。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. /* div {
  7. color: red;
  8. }
  9. p {
  10. color: red;
  11. }
  12. span {
  13. color: red;
  14. } */
  15. div,
  16. p,
  17. span,
  18. .daye {
  19. color: blue;
  20. font-size: 18px;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div>刘德华</div>
  26. <p>张学友</p>
  27. <span>郭富城</span>
  28. <h1>凤姐</h1>
  29. <h1>风哥</h1>
  30. <h1 class="daye">凤大爷</h1>
  31. </body>
  32. </html>
2.3.后代选择器

后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

子孙后代都可以这么选择。 或者说,它能选择任何包含在内 的标签。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. /* div p {
  7. color: pink;
  8. } */
  9. .jianlin p {
  10. color: red;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <p>王者荣耀</p>
  16. <div class="jianlin">
  17. <p>王思聪</p>
  18. </div>
  19. <div>
  20. <p>王宝强</p>
  21. </div>
  22. </body>
  23. </html>
2.4.子元素选择器 >

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。
这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. .nav li { /* 空格 后代选择器 可以选择 儿子 孙子 重孙子.. */
  7. color: red;
  8. }
  9. .nav > li { /* 大于号 子元素选择器 只选择 亲儿子 */
  10. color: pink;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <ul class="nav">
  16. <li>一级菜单
  17. <ul>
  18. <li>二级菜单</li>
  19. <li>二级菜单</li>
  20. <li>二级菜单</li>
  21. </ul>
  22. </li>
  23. <li>一级菜单
  24. <ul>
  25. <li>二级菜单</li>
  26. <li>二级菜单</li>
  27. <li>二级菜单</li>
  28. </ul>
  29. </li>
  30. <li>一级菜单
  31. <ul>
  32. <li>二级菜单</li>
  33. <li>二级菜单</li>
  34. <li>二级菜单</li>
  35. </ul>
  36. </li>
  37. </ul>
  38. </body>
  39. </html>
2.5.同级相邻兄弟选择器 +

相邻兄弟选择器可选择紧接在另一元素后的元素,且而者有相同父元素.

如果需要选择紧接在另一个元素的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器

例子: h2+p{margin-top:30px;}
选择紧接在h1元素后出现的段落,h1和p元素拥有共同的父元素

结合其他选择器: 相邻兄弟结合符还可以结合其他结合符:
html>body table+ul{margin-top:20px;}

这个选择器解释为:选择紧接在table元素后出现的所有兄弟ul元素,该table元素包含在一个body元素中,body元素本身是html元素的子元素.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. .start+li {
  7. background-color: yellow;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <ul>
  13. <li>item1</li>
  14. <li class="start">item2</li>
  15. <li>item3</li>
  16. <li>item4</li>
  17. <li>item5</li>
  18. </ul>
  19. </body>
  20. </html>
2.6.同级所有兄弟选择器 ~

所有相同父级中,位于某标签之后的同级的某标签享受样式。
相邻兄弟选择器可选择紧接在另一元素后的所有元素,且而者有相同父元素.

例如选择第二个li后面的所有li标签
ul li:nth-child(2)~li

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. .start~li {
  7. background-color: yellow;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <ul>
  13. <li>item1</li>
  14. <li class="start">item2</li>
  15. <li>item3</li>
  16. <li>item4</li>
  17. <li>item5</li>
  18. </ul>
  19. </body>
  20. </html>

注意:+和~选择器都是选择元素之后的同级兄弟元素

2.7.属性选择器 []

如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。具有特定属性的HTML元素样式不仅仅是class和id。

类型 描述
[abc^=”def”] 选择 abc 属性值以 “def” 开头的所有元素
[abc$=”def”] 选择 abc 属性值以 “def” 结尾的所有元素
[abc*=”def”] 选择 abc 属性值中包含子串 “def” 的所有元素
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. div[class=font24] { /* class=font24 表示class属性必须是font24 */
  7. font-size: 24px;
  8. }
  9. div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
  10. color: pink;
  11. }
  12. div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
  13. color: skyblue;
  14. }
  15. div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
  16. color: green;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="font12">属性选择器</div>
  22. <div class="font12">属性选择器</div>
  23. <div class="font24">属性选择器</div>
  24. <div class="font24">属性选择器</div>
  25. <div class="font24">属性选择器</div>
  26. <div class="24font">属性选择器123</div>
  27. <div class="sub-footer">属性选择器footer</div>
  28. <div class="jd-footer">属性选择器footer</div>
  29. <div class="news-tao-nav">属性选择器</div>
  30. <div class="news-tao-header">属性选择器</div>
  31. <div class="tao-header">属性选择器</div>
  32. </body>
  33. </html>

3.伪类选择器

为了区分伪类和伪元素选择器,我们通常定义伪类为:(冒号)开始,伪元素为::(双冒号)开始

3.1.链接伪类选择器
  • :link / 未访问的链接 /
  • :visited / 已访问的链接 /
  • :hover / 鼠标移动到链接上 /
  • :active / 选定的链接 /

注意写的时候,他们的顺序尽量不要颠倒 按照 lvha 的顺序。

  1. <style>
  2. a {
  3. font-size: 16px;
  4. font-weight: 700;
  5. color: black;
  6. text-decoration: none;
  7. }
  8. a:link {
  9. /* 未访问的链接 */
  10. color: gray;
  11. }
  12. a:visited {
  13. /* 已访问的链接 我们已经点击过一次的状态*/
  14. color: orange;
  15. }
  16. a:hover {
  17. /* 鼠标移动到链接上 */
  18. color: red;
  19. }
  20. a:active {
  21. /* 选定的链接 当我们点击别松开鼠标 显示的状态*/
  22. color: green;
  23. }
  24. </style>
3.2.结构伪类选择器
  • :first-child :选取属于其父元素的首个子元素的指定选择器
  • :last-child :选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型
  • :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
    (n 可以是数字、关键词或公式)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. ul li:first-child { /* 选择第一个孩子 */
  7. color: pink;
  8. }
  9. ul li:last-child { /* 最后一个孩子 */
  10. color: purple;
  11. }
  12. ul li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
  13. color: skyblue;
  14. }
  15. li:nth-child(odd) { /*可以选择所有的 odd奇数 的孩子标签 */
  16. color: pink;
  17. }
  18. li:nth-child(even) { /*可以选择所有的 even 偶数 的孩子标签 */
  19. color: deeppink;
  20. }
  21. li:nth-child(3n) { /* n 0 2n 2n是 选择 0 2.4.6.8..的孩子 3n 0.3.6.9的孩子元素 */
  22. color: pink;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <ul>
  28. <li>第一个孩子</li>
  29. <li>第二个孩子</li>
  30. <li>第三个孩子</li>
  31. <li>第四个孩子</li>
  32. <li>第五个孩子</li>
  33. <li>第六个孩子</li>
  34. <li>第七个孩子</li>
  35. </ul>
  36. </body>
  37. </html>
  • En:first-of-type:选取属于其父元素的首个En子元素的指定选择器
  • En:last-of-type :选取属于其父元素的最后一个En子元素的指定选择器
  • En:nth-of-type(n) : 匹配属于其父元素的第 N 个En子元素,只匹配En元素

注意:这两组对于(ul li通用,因为内部只包含标签li,没有其他类型元素)

  • :only-of-type 匹配属于其父元素的唯一子元素的元素
  1. <style>
  2. /* 给类选择器为class的UL下的最后一个li标签添加背景颜色 */
  3. .list>li:last-of-type {
  4. background-color: aquamarine;
  5. }
  6. /* 给类选择器为class的UL下的第一个li标签添加背景颜色 */
  7. .list>li:first-of-type {
  8. background-color: royalblue;
  9. }
  10. /* 给类选择器为class的UL下的第三个li标签添加背景颜色 */
  11. /* 用空格链接后代元素会把样式带给后代元素 */
  12. .list li:nth-of-type(3) {
  13. background-color: blueviolet;
  14. }
  15. /* 给类选择器为class的UL下的单数li标签添加前景颜色 */
  16. .list>li:nth-of-type(2n+1) {
  17. color: red;
  18. }
  19. /* 给类选择器为class的UL下的双数li标签添加前景颜色 */
  20. .list>li:nth-of-type(2n+2) {
  21. color: blue;
  22. }
  23. /* 给ul下只存在一个li标签的元素加上边框 */
  24. ul>li:only-of-type {
  25. border: solid 2px;
  26. }
  27. </style>
  28. <ul class="list">
  29. <li>item1</li>
  30. <li>item2</li>
  31. <li>item3
  32. <ul>
  33. <li>孙子1</li>
  34. <li>孙子2</li>
  35. </ul>
  36. </li>
  37. <li>item4</li>
  38. <li>item5</li>
  39. <li>item6</li>
  40. <li>item7</li>
  41. <li>item8</li>
  42. <li>item9</li>
  43. <li>item10</li>
  44. </ul>
  45. <ul>
  46. <li>item1</li>
  47. </ul>
3.3.目标伪类选择器

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

  1. :target {
  2. color: red;
  3. font-size: 30px;
  4. }

案例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. :target {
  8. color: red;
  9. font-size: 30px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h2>目录</h2><hr />
  15. <a href="#movie">2 演艺经历</a><br />
  16. <a href="#live">3 个人生活</a><br />
  17. <h3 id="movie">演艺经历</h3>
  18. <hr /> 1981年,刘德华考进第10期无线电视艺员训练班
  19. <h3 id="live">个人生活</h3>
  20. <hr /> 刘德华的父亲刘礼在启德机场做过消防员的工作。
  21. </body>
  22. </html>

3.4.伪元素选择器

  1. E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
  2. E::first-line 文本第一行;
  3. E::selection 可改变选中文本的样式;
  4. E::before和E::after
  1. <style>
  2. /* 文本的第一个单词或字 */
  3. p::first-letter {
  4. font-size: 20px;
  5. color: hotpink;
  6. }
  7. /* 首行特殊样式 */
  8. p::first-line {
  9. color: skyblue;
  10. }
  11. /* 文本选中的样式 */
  12. p::selection {
  13. color: orange;
  14. }
  15. p::before {
  16. content: "我";
  17. }
  18. p::after {
  19. content: "你";
  20. }
  21. </style>
  22. <p></p>

4.CSS 三大特性

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

4.1. CSS 层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。

一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。

  1. 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
  2. 样式不冲突,不会层叠
  1. <style>
  2. p {
  3. color: green;
  4. }
  5. p {
  6. color: pink;
  7. }
  8. </style>
  9. <p>我的颜色是pink</p>

4.2. CSS 继承性

所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

简单的理解就是: 子承父业。
注意:

恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. div {
  7. font-size: 18px;
  8. color: pink;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div>
  14. <p>我的颜色继承了父亲</p>
  15. </div>
  16. </body>
  17. </html>

4.3. CSS 优先级

定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。

在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:

  1. 继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。

  2. 行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

  3. 权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

  4. CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. /* 0, 0 , 0 , 0 特殊性公式 */
  7. div { /* 标签选择器 0,0,0,1*/
  8. color: pink;
  9. }
  10. :first-child { /* 伪类选择器 0,0,1,0 */
  11. color: green;
  12. }
  13. .king { /* 类选择器 0,0,1,0 */
  14. color: blue;
  15. }
  16. #wang { /* id选择器 0,1,0,0 */
  17. color: red;
  18. }
  19. /* 最大的 不是选择器 */
  20. div {
  21. color: orange!important; /* important就是重要的 级别最高 一旦出现优先执行*/
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="king" id="wang" style="color: skyblue"> 王者农药 </div>
  27. </body>
  28. </html>

4.4. CSS 权重的计算

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:

specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

继承或者* 的贡献值 0,0,0,0
每个元素(标签)贡献值为 0,0,0,1
每个类,伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 ∞ 无穷大

排序:!important>行内>ID>类>标签>继承/通配符

权重是可以叠加的
比如的例子:

  1. body h1#first.active ----> 0,1,1,2
  2. html body h1#first ----> 0,1,0,3
  3. body h1#first ----> 0,1,0,2
  4. div ul li ----> 0,0,0,3
  5. .nav ul li ----> 0,0,1,2
  6. a:hover ---—> 0,0,1,1
  7. .nav a ----> 0,0,1,1
  8. #nav p ----> 0,1,0,1

注意:权重由于不可以进位,所以等级是不可以越级,十个标签选择器叠加也比不上类选择器

注意:

  • 数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
  • 继承的 权重是 0

总结优先级:

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则。
  7. 同一类选择器则遵循就近原则。

5.附实例演示:

  1. 实例演示选择器的优先级,id,class,tag;
  1. <style>
  2. div {
  3. height: 30px;
  4. width: 30px;
  5. border: 1px solid red;
  6. }
  7. #mybox {
  8. /* 因为ID选择器的权重高于类选择器,所以div的背景颜色依然是pink */
  9. background-color: pink;
  10. }
  11. .box {
  12. color: aqua;
  13. }
  14. div {
  15. /* 优先级相同时,书写顺序决定优先级,所以宽高被修改为了300px */
  16. height: 300px;
  17. width: 300px;
  18. }
  19. </style>
  20. <div class="box" id="mybox"></div>
  1. 实例演示前端组件样式模块化的原理与实现;

style.css

  1. @import url(header.css);
  2. @import url(main.css);
  3. @import url(footer.css);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>实例演示前端组件样式模块化的原理与实现</title>
  8. <link rel="stylesheet" href="css/style.css" />
  9. <!-- @import url(),与<link rel="stylesheet" href="">调用方法作用一样 -->
  10. <style>
  11. @import url(css/style.css);
  12. </style>
  13. <!-- 通过加到一个style.css文件实现页面三个部份样式分开修改调用 -->
  14. <!--style.css文件调用: @import url(header.css); -->
  15. <!--style.css文件调用: @import url(main.css); -->
  16. <!--style.css文件调用: @import url(footer.css); -->
  17. </head>
  18. <body>
  19. <header>我是头部内容</header>
  20. <main>我是主体内容</main>
  21. <footer>我是页脚内容</footer>
  22. </body>
  23. </html>
  1. 实例演示常用伪类选择器的使用方式,并用伪类来模块化元素组件
  1. <style>
  2. .login {
  3. width: 260px;
  4. margin: 100px auto;
  5. padding: 30px;
  6. border: 2px solid #f0f0f0;
  7. }
  8. .login :first-child {
  9. text-align: center;
  10. font-size: 30px;
  11. margin: 4px auto;
  12. }
  13. .login input[type] {
  14. width: 240px;
  15. height: 24px;
  16. margin: 2px auto;
  17. }
  18. .login :last-child {
  19. width: 100px;
  20. height: 30px;
  21. margin: 6px auto;
  22. background-color: rgb(128, 128, 175);
  23. border: 0;
  24. }
  25. </style>
  26. <form action="" style="display: grid; gap: 1rem" class="login">
  27. <h1>登录框</h1>
  28. <input type="text" placeholder="请输入用户名" />
  29. <input type="password" placeholder="请输入密码" />
  30. <input type="email" placeholder="请输入邮箱" />
  31. <button>提交</button>
  32. </form>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议