CSS选择符、伪类、层叠

标签：font   title   决定   时间   边框   数字   属性   伪类   选择   

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

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。）
颜色值

CSS选择符、伪类、层叠

标签：font   title   决定   时间   边框   数字   属性   伪类   选择   

原文地址：https://www.cnblogs.com/jiqing9006/p/11421066.html