【CSS】-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42438771/article/details/119640928

本文详细介绍了CSS的基础知识，包括选择器的使用、样式生效的三种方式、@规则的应用、速记属性以及注释。重点讲解了选择器的各种类型，如类选择器、ID选择器、属性选择器以及伪类和伪元素。同时，阐述了CSS的层叠与继承原则，包括权重计算和资源顺序。此外，还提到了控制继承的四个属性值：inherit、initial、unset和revert。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、基础

1、基础构造

选择器: { 属性 : 值; }

选择器1, 选择器2: { 属性 : 值; }

属性和值都区分大小写

CSS声明（块）：属性+值
CSS规则（集）：CSS声明块+选择器

2、使CSS生效的3中方法

1）外部样式表

<head>标签中使用<link>标签指定css文件

2）内部样式表

<head>标签中的<style>标签直接写css样式

3）内联样式

放在HTML元素的style属性中

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>

3、@规则

1）导入其他css样式

@improt 'styles2.css';

2）响应式

当浏览器宽度小于30em时，采用pink，大于等于30em时，采用blue

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

4、速记属性

如font，background，padding，border，margin这样可以设置多个属性的被称为速记属性

5、注释方式

/* */

二、选择器

0、选择器列表

h1,
.special {
color: blue;
}
当使用选择器列表时，如果任何一个选择器无效 (指，存在语法错误)，那么整条规则都会被忽略。

1、class选择器 .

给HTML元素添加类名，属性class
.classname { }
指向特定元素的类
li.classname { }：对每个类名是classname的li元素起作用
指向应用多个类的元素
.class1.class2 { } class=“class1 class2”

2、全局选择器 *

它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。

{ }
还有一种用法是让选择器更易读，并没有实质性用途
下面，第一行和第二行表意一样，但第二行让人更不会与第三行的理解产生误会。前两行是：article元素的第一子元素，第三行是：作为其他元素的第一子元素的article元素
article :first-child { }
article *:first-child { }
article:first-child { }

2、id选择器

#unique { }

3、标签属性选择器

根据元素上某个标签的属性是否存在：
a[title] { }
根据元素上某个标签的属性是否是某个特定值：
a[href=“https://example.com”] { }
属性是这个值，或属性包含这个值
a[class~=“m”] class=“a” class=“a b”
属性是这个值，或属性的值以它开头
a[class|=“m”] class=“a” class=“ab”

4、伪类与伪元素

伪类，用来样式化一个元素的特定状态。
hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素
a:hover { }
伪元素，选择一个元素的某个部分而不是元素自己。
::first-line是会选择一个元素（下面的情况中是

）中的第一行，类似包在了第一个被格式化的行外面，然后选择这个。
p::first-line { }

2、包含选择器空格

li em { } ：对每个嵌套在li元素里的em元素起作用

3、相邻选择器 +

h1 + p { }：对直接出现在h1后且与h1同级的p元素起作用

4、根据状态确定样式：

a:link { }
a:visited { }
a:hover { }

5

三、层叠与继承

最好再消化一遍：mozilla:层叠与继承

1、规则

以下规则根据重要性排序，第一的是最重要的
测试了一番，感觉优先级低的是不会被直接舍弃不应用的，而是其中的重复属性值会被优先级高的覆盖，其他资源顺序等同样以此类推

1）重要程度

2）优先级

范围更小的规则拥有更高优先级。
比如类选择器权重大于元素选择器
选择其权重规则如下：

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。
注: 通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。在计算是也不会发生进位的事情

!important，用于修改特定属性的值，可以覆盖上面所有优先级

3）资源顺序

当有相同权重的多条规则时，最后面的规则会被应用

2、控制继承的4个属性值

属性是否是自然继承，意思是，父元素设置了某属性，子元素会不会自动继承，如果会，比如说color，font-size之类，那就是自然继承，否则属于非自然继承
inherit：继承父元素属性
initial：设置与浏览器默认样式相同，若浏览器未设置（且该属性是自然继承的？），则设置为inherit
unset：将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
revert：很少有浏览器支持

使用all: inherit重设所有属性值