一、元素选择器
h1 {
color: red;
}
选择器组合(用逗号隔开，否则就是后代选择器了)
h1, h2, h3 {
color: red;
}
二、通配选择器
* {
color: red;
}
三、类选择器 ID选择器
独立于文档元素的方式来指定样式
1.类选择器
<div class="className"></div>
.className {
color: red;
}
2.多类选择器
<div class="className1">1</div> /* red*/
<div class="className2">2</div>/* red*/
<div class="className1 className2">3</div>/* yellow*/
.className1 {
color: red;
}
.className2 {
color: green;
}
.className1.className2 {
color: yellow;
}
3.ID选择器
<div id="id1">1</div>
<div id="id2">2</div>
#id1 {
color: blue;
}
#id2 {
color: purple;
}
4.类选择器和ID选择器区别
ID选择器会使用一次，而且仅一次，如果一个元素的id为“xxx”,那么该文档的其他元素的id都不能是“xxx”；ID选择器不能结合使用,因为ID属性不允许以空格分隔词列表；如果你想确定应当向一个给定元素应用哪些元素时,ID可能包含更多含义。
五、属性选择器
<div property="I am jax">jax</div>
<div property="you are wrong">wrong</div>
/*简单属性值选择*/
div[property] {
color: red;
}
/*具体属性值选择*/
div[property="I am jax"] {
color: green;
}
div[property="you are wrong"] {
color: purple;
}
/*根据部分属性值选择*/
/* ~= 只能是具体值中的某个词 比如you、are、wrong。 但是you a、you 、不行 */
/* ^= 以wrong开头 */
/* $= 以wrong结尾 */
/* *= 包含wrong就行*/
div[property~="wrong"] {
color: blue;
}
六、后代选择器
子元素、父元素
父子关系、祖先-后代关系
1.后代选择器
ancestorSelector空格descendantsSelector {
选择块；
}
ancestorSelector的所有后代选择器descendantsSelector都被选中
2.选择子元素
fatherSelector > sonSelector {
选择块；
}
fatherSelector的所有子选择器sonSelector都被选中
七、选择相邻兄弟
selector1 + selector2 {
选择块；
}
selector1的兄弟选择器selector2被选中
八、伪类选择器
/*根据语言选择*/
*:lang(fr) {
font-style: italic;
}
/*********** 静态伪类 **********/
/* 指向一个未访问地址的所有锚 */
a.cxw:link {
color: purple;
}
/*指示已访问地址超链接的所有锚*/
a.cxw:visited {
color: red;
}
/*********** 动态伪类 **********/
/*指示当前拥有输如焦点的元素*/
a.cxw:focus {
color: black;
background-color: white;
}
/*指示鼠标指针停留在那个元素上*/
a.cxw:hover {
color: white;
background-color: red;
font-size: 30px;
}
/*指示被用户输入激活的元素*/
a.cxw:active {
}
/*********** 伪元素选择器 **********/
/*设置首字母样式*/
p:first-letter {
font-size: 200%;
color: red;
}
/*设置第一行的样式*/
p:first-line {
color: purple;
}
/*********** first-child **********/
/*选择第一个子元素*/
p:first-child {
}