选择器的使用
- 标签选择器:标签名{}
div{
width:200px;
}
- 类选择器:.类名{}
class=’’ 可以有多个取值“
.class{
width="200px;"
}
- id选择器:#id名{唯一的id名}
#id{
width="200px;"
}
- 普遍选择器/通配符选择器:*{}
*{
padding:0px;
}
- 后代选择器:选中的是所有的后代元素
div *{
选中的是ul和li
}
<div>
<ul>
<li></li>
</ul>
</div>
- 子代选择器:选中只有直接子元素
div > *{
ul
}
<div>
<ul>
<li></li>
</ul>
</div>
- 一般同胞选择器 :~ 选中的是 本身 之后的所有 兄弟节点
- 相邻同胞选择器 :+ 选中和自己 相邻的 下一个 兄弟节点
one+div{
谁也选不中
}
<div></div>
<div class="one"></div>
<p></p>
<div></div>
- 交集选择器 / 组合选择器
div.one{
是div,还有class=“one”
}
- 并集选择器 / 多选择器
div,.one,#oid{
}
-
属性选择器
[attr] 选中带有attr属性的节点 [attr=val] 选中带有attr属性,并且值为val [attr^=val] 选中带有attr属性,并且值以val开头 [attr$=val] 选中带有attr属性,并且值以val结尾 [attr*=val] 选中带有attr属性,并且值包含val [attr~=val] 选中带有attr属性,并且值包括val
-
伪类选择器
> :first-child
> :last-child
> :only-child
> :nth-child(n)序号/特殊字符
>
> :nth-last-child
> :first-of-type
> :last-of-type
> :nth-of-tyoe(n)序号/特殊字符
>
> :hover
> :link
> :active
> :visted
>
> :focus
> :invalid
> :valid
> :checked
> :default
> :in-range
> :out-of-range
> :required
> :enabled
> :disabled
- 伪元素选择器
::after
::before
::first-letter
::first-line
::selection
- 权重值
1000 — 行内样式
100 — id选择器
10 — 类选择器、属性选择器、伪类选择器
1 — 标签选择器、伪元素选择器
div>.one:first-child::after{
权重22
}
/* 不能越级 */