css笔记

lijiao 2023-05-10整理

样式表的优先级

优先级规则：行内样式>内部样式=外部样式

内部样式、外部样式，这两者的优先级相同，且：后面的会覆盖前面的（简记：“后来者居上”）。

同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来者居上”）。

分类	优点	缺点	使用频率	作用范围
行内样式	优先级最高	1.结构与样式未分离 2.代码结构混乱 3.样式不能复用	很低	当前标签
内部样式	1.样式可复用 2.代码结构清晰	1.结构与样式未彻底分离 2.样式不能多页面复用	一般	当前页面
外部样式	1.样式多页面可复用 2.代码结构清晰 3.可触发浏览器的缓存机制 4.结构与样式彻底分离	需要引入才能使用	最高	多个页面

类选择器

作用
根据元素的class值，来选中某些元素。

class翻译过来有：种类、类别的含义，所以class值，又称：类名。

语法
.类名{ 属性名:属性值; }

注意点

元素的class属性值不带.，但css的类选择器要带.。
class值，是我们自定义的，按照标准：不要使用纯文字、不要使用中文、尽量只用英文与数字的组合，若由多个单词组成，使用-做连接，例如：left-menu，且命名要有意义，做到“见名知意”。
一个元素不能写多个class属性。
一个元素的class属性，能写多个值，要用空格隔开。

id选择器

作用
根据元素的id属性值，来精准的选中某个元素。
语法
#id值{ 属性名:属性值; }

注意点

id属性值：尽量由字母、数字、下划线(_)组成，最好以字母开头，不要包含空格、区分大小写。
一个元素只能拥有一个id属性，多个元素的id属性值不能相同。
一个元素可以同时拥有id和class属性。

基本选择器总结

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清除样式。	*{color：red}
元素选择器	选中所有同种标签，但是不能差异化选择	h1{color:green}
类选择器	选中所有特定类名（class值）的元素--使用频率很高	.say{color:gray}
id选择器	选中特定id值的那个元素（唯一的）。	#earthy{color:orange}

交集选择器

作用
选中同时符合多个条件的元素

交集有并且的含义（通俗理解：即......又......的意思），例如：年轻且长的帅。

语法
选择器1选择器2选择器3...选择器n{}
注意

有标签名，标签名必须写在前面。
id选择器、理论上可以作为交集的条件，但实际应用中几乎不用--因为没有意义。
交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素。
用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty。

并集选择器

作用
选中多个选择器对应的元素，又称：分组选择器。

所谓并集就是或者的含义（通俗理解：要么......要么......的意思），例如：给我转10万块钱或者我报警。

语法选择器1,选择器2,选择器3,...选择器n{}

多个选择器通过,连接，此处,的含义就是：或。

注意

并集选择器，我们一般竖着写。
任何形式的选择器，都可以作为并集选择器的一部分。
并集选择器，通常用于集体声明，可以缩小样式表体积。

元素关系

父元素
直接包裹某个元素的元素，就是该元素的父元素。
子元素
被父元素直接包含的元素（简记：儿子元素）。
祖先元素
父亲的父亲......，一直往外找，都是祖先。
后代元素
儿子的儿子......，一直往里找，都是后代。
兄弟元素
具有相同父元素的元素，互为兄弟元素。

后代选择器

作用
选中指定元素中，符合要求的后代元素。
语法
选择器1 选择器2 选择器3 ......选择器n{} (先写祖先，再写后代)

选择器之间，用空格隔开，空格可以理解为:"xxx中的",其实就是后代的意思。
选择器1234....n,可以是我们之前学的任何一种选择器。

注意

后代选择器，最终选择的是后代，不选中祖先。
儿子、孙子、重孙子，都算是后代。
结构一定要符合之前讲的HTML嵌套要求，例如：不能p中写h1~h6。

子代选择器

作用
选中指定元素中，符合要求的子元素（儿子元素）。（先写父再写子）

子代选择器又称：子元素选择器、子选择器。

语法选择器1>选择器2>选择器3>......选择器n{}

选择器之间，用>隔开，>可以理解为：“xxx的子代”，其实就是儿子的意思。选择器1234....n，可以是我们之前学的任何一种选择器。
注意

子代选择器，最终选择的是子代，不是父级。
子、孙子、重孙子、重重孙子......统称后代！子就是指儿子。

兄弟选择器

相邻兄弟选择器

作用
选中指定元素后，符合条件的相邻兄弟元素。

所谓相邻，就是紧挨着他的下一个。

语法
选择器1+选择器2{}

通用兄弟选择器

作用
选中指定元素后，符合条件的所有兄弟元素。
语法
选择器1~选择器2{}
注意
两种兄弟选择器，选择的是下面的兄弟。

属性选择器

作用
选中属性值符合一定要求的元素。
语法

[属性名]选中具有某个属性的元素。
[属性名="值"]选中包含某个属性，且属性值等于指定值的元素。
[属性名^="值"]选中包含某个属性，且属性值以指定的值开头的元素。
[属性名$="值"]选中包含某个属性，且属性值以指定的值结尾的元素。
[属性名*="值"]选择包含某个属性，属性值包含指定值的元素。

/* 第一种写法：选中具有title属性的元素 */
[title]{
    color:red;
}
/* 第二种写法：选中具有title属性，且属性值为abc的元素 */
[title="abc"]{
    color:green;
}
/* 第三种写法：选中具有title属性，且属性值以字母a开头的元素 */
[title^="a"]{
    color:blue;
}
/* 第四种写法：选中具有title属性，且属性值以字母c结尾的元素 */
[title$="c"]{
    color:gray;
}
/* 第五种写法：选中具有title属性，且属性值包含字母b的元素 */
[title*="b"]{
    color:gray;
}

伪类选择器

作用
选中特殊状态的元素。

如何理解"伪"？--虚假的，不是真的。如何理解“伪类”？--像类（class），但不是类，是元素的一种特殊状态。

常用的伪类选择器

:link 超链接未被访问的状态。
:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态。

什么是激活？--按下鼠标不松开。
注意点：遵循LVHA的顺序，如：link、visited、hover、active。
:focus 获取焦点的元素。

表单类元素才能使用:focus伪类。
当用户：点击元素、触摸元素、或通过键盘的“tap”键等方式，选择元素时，就是获得焦点。
:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第n个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

关于n的值

0或不写：什么都选不中--几乎不用。

n：选中所有子元素--几乎不用。

1~正无穷的整数：选中对应序号的子元素。

2n或even：选中序号为偶数的子元素。

2n+1或odd：选中序号为奇数的子元素。

-n+3：选中的是前3个。

了解即可的伪类选择器

:nth-last-child(n) 所有兄弟元素中的倒数第n个。
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
:only-child 选择没有兄弟的元素（独生子女）。
:only-of-type 选择没有同类型兄弟的元素。
:root 根元素。
:empty 内容为空元素（空格也算内容）。

否定伪类

:not(选择器) 排除满足括号中条件的元素。

UI伪类

:checked 被选中的复选框或单选按钮。
:enable 可用的表单元素（没有disabled属性）。
:disabled 不可用的表单元素（有disabled属性）。

目标伪类（了解）

:target 选中锚点指向的元素。

语言伪类（了解）

:lang() 根据指定的语言选择元素（本质是看lang属性的值）。

伪元素选择器

作用
选中元素中的一些特殊位置。
常用伪元素

::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容）。
::afted 在元素最后的位置，创建一个子元素（必须用content属性指定内容）。

选择器的优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。

行内样式>ID选择器>类选择器>元素选择器>通配选择器。

权重

计算方式
每个选择器，都可计算出一组权重，格式为：(a,b,c)

a:ID选择器的个数
b:类、伪类、属性选择器的个数
c:元素、伪元素选择器的个数

比较规则
按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

(1,0,0)>(0,2,2)
(1,1,0)>(1,0,3)
(1,1,3)>(1,1,2)

特殊规则:

行内样式权重大于所有选择器。
!important 的权重，大于行内样式，大于所有选择器，权重最高！

CSS三大特性

层叠性
概念：如果发生了样式冲突，那就是根据一定的规则（选择器优先），进行样式的层叠（覆盖）。

什么是样式冲突？---元素的同一个样式名，被设置了不同的值，这就是冲突。

继承性
概念：元素会自动拥有其父元素，或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的可继承属性：

text-??、font-??、line-??、color......

备注：参考MDN网站，可查询属性是否可被继承。

优先级
简单聊：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。
详细聊：需要计算权重。

计算权重时需要注意：并集选择器的每一部分是分开计算的！

字体复合写法

属性名
font 可以把字体样式合并成一个属性。
编写规则

字体大小、字体族必须都写上。
字体族必须是最后一位、字体大小必须是倒数第二位。
各个属性间用空格隔开。