博客列表 >CSS学习小结(样式来源、选择器的运用于权重分析)

CSS学习小结(样式来源、选择器的运用于权重分析)

Feel Lonely
Feel Lonely原创
2022年07月07日 16:53:00432浏览

CSS学习小结(样式来源、选择器的运用与权重分析)

CSS样式来源

名称 描述
默认样式 我们把浏览器自带的样式叫做默认样式,也叫作代理样式
内联样式 写在元素标签内的样式,称作内联样式
文档样式 写在元素标签外,标签所在html文档内的CSS样式称作文档样式
外部样式 写在通过link等元素标签引用的外部文件内的CSS样式,称作外部样式
  1. 注:通常情况我们把内联样式、文档样式、外部样式统称为自定义样式

样式演示

内联样式

  1. <h1 style="color: red;">内联样式</h1>

内联样式

文档样式

  1. <style>
  2. h1{
  3. color: blue;
  4. }
  5. </style>
  6. <h1>文档样式</h1>

文档样式

外部样式

  1. <link rel="stylesheet" href="style.css"> <--引用外部style.css文件-->
  2. <h1>外部样式</h1>
  1. h1{
  2. color: rebeccapurple;
  3. }

外部样式

  1. 写在style.css文件内的CSS样式规则,不需要用<style>元素标签包裹.

选择器

1.元素选择器

元素选择器

  1. 我们可以直接使用元素标签作为选择器,来为元素标签添加样式。

2.id选择器

id选择器

  1. 我们可以使用元素标签的id属性,来选择特定的id属性的元素标签。
  2. 例子:#text (#号加上ID属性的“值”)

3.类选择器

类选择器

  1. 我们可以使用元素标签的class属性,来选择特定的class属性的元素标签。
  2. 例子:.text (圆点加上class的“值”)

4.通用选择器

通用选择器

  1. 通用选择器我们用一个 * 来表示,它表示选择整个html页面上的所有元素,我们可以在 * 前面加上其他类型的选择器来控制 * (通用)选择器的作用范围。
  2. 例子:*{color:red;} 表示为整个html页面的所有元素都添加上红色字体;
  3. .text * {colorred;} 表示只为设置了class="text"属性的元素标签内的所有子元素,添加上红色字体。

5.分组选择器

分钟选择器

  1. 当我们需要为多组标签或多个类,添加同一样式的时候,我们可以用","逗号把标签或类名分隔开,同时添加css样式.
  2. 例子:p,span{color: red;} .text1,.text2{color red;}

6.属性选择器

属性选择器

  1. 当外面为html页面中,所有包含某个特定属性的元素标签添加CSS样式时,我们可以选择使用属性标签,方法是:标签名+[属性名](属性名需用中括号括起来)
  2. 例子:a[href]{color: red;},
  3. 多个属性可以链接起来:a[href][title]{colorred;}

7.子元素选择器

子元素选择器

  1. 子元素选择器我们用“>” 大于号表示,示例中虽然虽然两行li元素标签都包含 class="name" 但是只对第一个生效,> 子元素选择器 不可以越代选择。
  2. 例子:ul > p{color: red;}

8.后代选择器

后代选择器

  1. 后代选择器用 “空格” 表示,它所选择的是标签内的所有符合条件的元素,不看几代关系;
  2. 例子:ul li{colorred;}

9.相邻兄弟选择器

相邻兄弟

  1. 看上图我们发现相邻兄弟选择器,有两种形式,一种是 “+” 另一种 “~”
  2. “+” 时,选择的是紧跟着的一个元素标签;
  3. “~” 时,选择的是后面的所有元素标签;
  4. 例子:.text + li{color:red;} 只选紧跟着的一个
  5. .text ~ li{color:red;} 选择的是后面所有

CSS样式的权重

  1. 因为css样式,在html文档中,不受位置的影响;因此我们就通过引用多个css样式表来进行比较

CSS样式

  1. 通过上图的代码我们发现
  2. ul li{colorred;}权重 > li{colorred;}权重

CSS样式

  1. 通过上图的代码我们发现
  2. .list{colorred;}权重 > 大于ul li{colorred;}权重

CSS样式

  1. 通过上图的代码我们发现
  2. #top ul li{color:red;}权重 > 大于.text ul li{color:red;}权重
  1. 最终我们得出,权重关系是,id选择器 > 类选择器 > 元素选择器
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议