css选择器
1.id、class、名称
p/ #id / .class / p.center -> class 为center的p元素/ * ->通用
2.组合选择器
后代选择器(空格) div p ->div元素下的所有p元素
子选择器 div > p -> div元素子元素的所有P元素 (区分后代选择器(空格))
相邻兄弟选择器 div +p -> div元素之后的p元素 (p元素生效一个,区分通用兄弟选择器)
通用兄弟选择器 div ~ p -> div元素之后的所有p元素 (p元素生效全部)
3.伪类选择器
什么是伪类?
伪类用于定义元素的特殊状态。
例如,它可以用于:
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
a:link {
color: #FF0000;
}
p:first-child { 第一个p元素
color: blue;
}
p i:first-child {选择器匹配所有 <p> 元素中的第一个 <i> 元素:
color: blue;
}
4.伪元素选择器
什么是伪元素?
CSS 伪元素用于设置元素指定部分的样式。
例如,它可用于:
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
p::first-line { 所有 <p> 元素中的首行添加样式 ::first-line 伪元素只能应用于块级元素
color: #ff0000;
font-variant: small-caps;
}
h1::before { <h1> 元素的内容之前插入一幅图像
content: url(smiley.gif);
}
5.属性选择器
设置带有特定属性或属性值的 HTML 元素的样式
a[target] { 所有带有 target 属性的 <a> 元素
background-color: yellow;
}
a[target="_blank"] {
background-color: yellow;
}
6.边距
padding、margin、content、border