CSS

属性选择器

存在和值属性选择器

伪类与伪元素选择器

链接伪类

动态伪类

表单伪类

结构性伪类

伪元素选择器

CSS声明的优先级

选择器的特殊性

重要声明

来源

层叠

自定义字体

字体图标

UI方案

文本样式

盒模型样式

CSS

在之前文章里没有阐述过css的基本内容，在次进行补充

CSS，全称Cascading Style Sheets，中文称层叠样式表

样式表组成：

规则

选择器+声明块

声明

CSS属性名+属性值

浏览器渲染css的顺序：从右往左；可以提高渲染速率

属性选择器

存在和值属性选择器

[属性名]

该选择器选择包含该属性名的所有元素，不论其属性值为何

[属性名="属性值"]

该选择器仅选择属性名被赋值为等号后的属性值的所有元素

[属性名~="属性值"]

表示带有以该属性名的元素，并且该属性名是一个以空格作为分隔的值列表，其中至少一个值为该属性值

[属性名|="属性值"]

选择属性名的值为以该属性值或以属性值- 开头的元素

[属性名^="属性值"]

选择属性名的值以该属性值开头的元素

[属性名$="属性值"]

选择属性名的值以该属性值结尾的元素

[属性名*="属性值"]

选择属性名的值中包含该属性值的元素

伪类与伪元素选择器

链接伪类

:link :visited :target只能作用与链接元素

:link

表示作为超链接，并指向一个未访问的地址的所有锚

:visited

表示作为超链接，并指向一个已访问的地址的所有锚

隐私问题：只有下列属性才能被应用到已访问的链接

color

background-color

border-color

:target

代表一个特殊的元素，它的id是URI的片段标识符

只通过html&css来作选项卡：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a{text-decoration: none;color: black;}div{width: 200px;height: 200px;background-color: aquamarine;display: none;text-align: center;}:target{display: block;}</style>
</head>
<body><a href="#div1">div1</a><a href="#div2">div2</a><a href="#div3">div3</a><div id="div1">1</div><div id="div2">2</div><div id="div3">3</div>
</body>
</html>

动态伪类

:hover :active基本可以作用于所有元素

:hover

表示悬浮到元素上

:active

表示匹配被用户激活的元素

表单伪类

:enabled

匹配可编辑的表单

:disabled

匹配被禁用的表单

:checked

匹配被选中的表单

:focus

匹配获焦的表单

自定义单选按钮：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}label{position: relative;float: left;width: 100px;height: 100px;border: 2px solid;overflow: hidden;border-radius: 50%;}input{position: absolute;left: -50px;top: -50px;}label span{position: absolute;left: 0;top: 0;right: 0;bottom: 0;}input:checked+span{background-color: antiquewhite;}</style>
</head>
<body><label><input type="radio" name="ipt"><span></span></label><label><input type="radio" name="ipt"><span></span></label><label><input type="radio" name="ipt"><span></span></label>
</body>
</html>

结构性伪类

以下各伪类中，index的值从 1 开始计数，index可以为变量n(只能为n)，index可以为even或odd

#id名 ele:nth-child(index)

表示匹配该id中第index的子元素，同时这个子元素必须是ele才能被选中

#id名 ele:nth-of-type(index)

表示匹配该id中第index的ele子元素

nth-child(index)系列

:first-child

第一个子元素

:last-child

最后一个子元素

:nth-last-child(index)

从最后一位向上计数

:only-child

子元素中只有这一个子元素

nth-of-type(index)系列（与nth-child(index)系列同理，匹配只在指定元素中进行）

:first-of-type

:last-of-type

:nth-last-type(index)

:only-of-type

以上两种伪类的重要区别：

nth-of-type以元素为中心，故当每个元素不一样时，即使class为同一个，但会匹配每一个元素的第index个；而nth-child不会出现此问题。故处理不同元素时，建议使用nth-child，根据需求选择。

:not

样例，实现选项卡右边框效果：

div a:not(:last-of-type){border-right: 1px solid black;
}

:empty

匹配的元素为空（空格也无效）

伪元素选择器

:: 符号用来区分伪类和伪元素

::after

创建一个伪元素，作为已选中元素的最后一个子元素。通常配合content属性

::before

创建一个伪元素，作为已选中元素的第一个子元素。通常配合content属性

::first-letter

选中块级元素第一行的第一个字母，并且所处行之前没有其他内容

::first-line

选中块级元素的第一行应用样式

::selection

表示用户选择的文本范围或插入符号的当前位置，代表页面中的文本选区

CSS声明的优先级

选择器的特殊性

选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0，0，0，0

一个选择器的具体特殊性（可累加）如下确定：

1.对于选择器中给定的ID属性值，加 0，1，0，0

2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0，0，1，0

3.对于选择器中的给定的各个元素和伪元素，加 0，0，0，1

4.通配符选择器的特殊性为0，0，0，0

5.结合符（","）对选择器特殊性没有任何贡献

6.内联声明（标签内style属性）的特殊性为 1，0，0，0

7.继承没有特殊性

特殊性 1，0，0，0 大于所有其他的特殊性，继承没有特殊性，0特殊性要比没有特殊性要高

选择器的特殊性最终都会授予给其对应的声明

如果多个规则与同一个元素匹配，而且由些声明互相冲突时，特殊性越大越占优势

重要声明

有时某个声明比较重要，超过了所有其他声明，css2.1中称之为重要声明。并允许在这些声明的结束分号前插入 !important 来标志。

标志为 !important 的声明并没有特殊的特殊性，不过要与非重要声明分开考虑。实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决。

来源

css样式的来源大致有三种：

创作人员

用户

用户代理（浏览器）

权重：

用户的重要声明

开发人员的重要声明

开发人员的正常声明

用户的正常声明

用户代理的声明（用户代理无重要声明）

层叠

1.找出所有相关的规则，这些规则都包含一个选择器

2.计算声明的优先级

先按来源排序

再按选择器的特殊性排序

最终按顺序

自定义字体

@font-face

允许为网页指定在线字体

语法：

font-family：所指定字体名字将会被用于font或font-family属性

src：字体资源

注意：不能在css选择器中定义@font-face

字体图标

将一些矢量图片设置为字体图标，其优点有：

1.图片不会失真

2.提高性能，减低网络负担

3.便于开发者操作

UI方案

文本样式

opacity

该属性指定了一个元素的不透明度

当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体来看待，即使该值不能被子元素继承。因此，一个元素都会具有和元素背景相同的透明度，即使这个元素和它的子元素有不同的opacity属性值

rgba

前三值为颜色值，最后一位为透明度

text-shadow

该属性可以为文字添加阴影，且可以添加多层，阴影值之间逗号隔开（多个阴影时，第一个阴影在最上边）

默认值：none 继承性：不可继承

值：

color

可选值，可以在偏移量之前或之后指定

offset-x，offset-y

必选，这些长度指定阴影相对文字的水平或垂直偏移量

若两者均为0，则阴影位于文字正后方

blur-radius

可选值，该值越大，模糊半径越大，阴影就越大越暗

通过使用text-shadow属性实现浮雕文字效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1{font-size: 200px;text-align: center;color: white;text-shadow: black 2px 2px 9px;}</style>
</head>
<body>  <h1>星辰</h1>
</body>
</html>

实现文字模糊效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1{font-size: 100px;text-align: center;color: black;transition: 1s;}h1:hover{color: rgba(0, 0, 0, 0);text-shadow: black 0 0 100px;}</style>
</head>
<body>  <h1>星辰</h1>
</body>
</html>

-webkit-text-stroke

该属性可以为文字描边（主要在移动端使用）

direction

控制文字方向，某些情况要配合 unicode-bidi:bidi-override; 来使用

text-overflow

对溢出内容进行处理

通过使用该属性实现溢出显示省略号：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 100px;border: 2px solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div>星辰星辰星辰星辰星辰星辰星辰星辰星辰</div>
</body>
</html>

white-space、overflow、text-overflow缺一不可，且文本不能在被内容撑开的父元素中

盒模型样式

box-shadow

用于在元素的框架上添加阴影效果。可以在同一个元素上设置多个阴影效果，并用逗号将分隔开。

默认值：none 继承性：不可继承

相较于text-shadow，该属性多了两个可选值：

inset：使阴影落在盒子内部

第四个length值：取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。

-webkit-box-reflect

设置元素倒影（主要在移动端使用）

值（只能按顺序指定）：

倒影方向

第一个值，above，below，right，left

倒影距离

第二个值，长度单位

渐变

第三个值

resize

允许控制一个元素的可调整大小性（一定要配合overflow:auto来使用）

默认值：none 继承性：不可继承

值：

none

元素不能被缩放

both

允许在水平和垂直方向上调整大小

horizontal

允许在水平方向上调整大小

vertical

允许在垂直方向上调整大小

box-sizing

用于更改用于计算元素宽度和高度的默认CSS盒子模型。可以使用该属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列行为

默认值：content-box 继承性：不可继承

值：

content-box

默认值，标准盒子模型。width与height只包括内容的宽和高，不包括边框，内边距，外边距。注意：内边距，边框和外边距都在这个盒子的外部。

border-box

为元素指定的宽度和高度决定了元素的边框盒。即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

规定应从父元素继承 box-sizing 属性的值。

CSS3(1)

CSS

属性选择器

存在和值属性选择器

伪类与伪元素选择器

链接伪类

动态伪类

表单伪类

结构性伪类

伪元素选择器

CSS声明的优先级

选择器的特殊性

重要声明

来源

层叠

自定义字体

字体图标

UI方案

文本样式

盒模型样式