Please enable JavaScript.
Coggle requires JavaScript to display documents.
Css Selector (组合 (A>B (匹配任意元素，满足条件：B是A的直接子节点), A+B (匹配任意元素，满足条件：B是A的下…
Css Selector
组合
A>B
(匹配任意元素，满足条件：B是A的直接子节点)
A+B
(匹配任意元素，满足条件：B是A的下一个兄弟节点)
A B
(匹配任意元素，满足条件：B是A的后代结点)
A~B
(匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个)
A,B
(匹配满足A（和/或）B的任意元素)
简单选择
元素类型选择
p {
color : red;
}
类选择
.diary{
font-weight: bold;
}
id选择
#today{
font-family: cursive;
}
通用选择*
属性选择
属性名选择
[date]{
color: green;
}
属性值选择
[date="1.1"]{
color: green;
}
属性包含值选择
(可能还包含别的属性值)
[date~="1.1"]{
color: green
}
子串值选择
[attr ^= val]
[attr $= val]
[attr |= val]
[attr *= val]
伪类和伪元素
(当希望样式在特定状态下才呈现到指定的元素时，
可以在元素的选择器后面加上对应的伪类)
a{
color: blue;
}
a:visited{
color: blue;
}
a:hover,
a:active,
a:focus{
color: dark;
}
[href^=http]::after{
content: "⤴add"
}
多重选择
p, li {
font-size: 1.6em;}
h1, h2, h3, h4{
color: red;}
Box Model
引用
<style></style>
<link rel="stylesheet" href="*.css">