CSS选择符伪类层叠

Posted 2022-09-03 jiqing9006

主题，架子（时间架子，空间架子，三角架），素材。

CSS

三种方式

• 行内样式
• 嵌入样式
• 链接样式

上下文选择符

祖父 孙

p em color:red;

父 子

p > em color:red;

紧邻同胞

h2 + p color:red;

一般同胞

h2 ~ a color:red;

通用

* color:red;

ID 类 选择符

.class1 color:red;

#id1 color:red;

属性选择符

选择带有属性名的标签

img[title] color:red;

img[title="red"] color:red;

伪类

• 链接伪类
  Link 待点击
  Visited 点击过
  Hover 悬浮
  Active 正在被点击

a:link color:black;
a:visited color:gray;
a:hover text-decoration:none;
a:active color:red;

一个冒号表示伪类，两个冒号表示CSS3新增的伪类。

• :focus伪类

input:focus border:1px solid blue;

• 结构化伪类

:first-child
:last-child

e:nth-child(n)

n可以是数字也可以是odd,even

伪元素

p::first-letter font-size:300%;

首字母放大

e::before
e::after

元素前后

继承

可继承：颜色，字体，字号。

不可继承：边框，外边距，内边距。

层叠

层层叠加，用最后一个。

顺序如下：
默认样式
用户样式
作者链接样式（按照链接的先后顺序）
作者嵌入样式
作者行内样式

特指度高的胜出。

p font-size:12px;
.large font-size:16px;

I-C-E最大的胜出。

P
p.largetext
p#largetext
body p#largetext
body p#largetext ul.mylist
body p#largetext ul.mylist li
0-0-1
0-1-1
1-0-1
1-0-2
1-1-3
1-1-4
=1
=11
=101
=102
=113
=114

顺序决定权重。
最后声明胜出。

CSS属性值

文本值
数字值（绝对值，px。相对值，em。）
颜色值