基础选择器相关
- 通用选择器
- 元素选择器
- 类选择器
- 注意: 类名不能以数字开头
- 分类选择器
- 如: div.waring{}
- id选择器
- 群组选择器
- 后代选择器
- 子代选择器
复杂选择器相关
- 兄弟选择器
- 相邻兄弟选择器
- 如div+p{}
- 注意: 只找与当前元素相关的后面的一个紧挨着他的兄弟元素, 如何符合则匹配, 不符合也不会向下查找
- 通用兄弟选择器
- 如div~p{}
- 注意: 第二个元素不必紧紧跟随在第一个元素后面, 该选择器匹配到的元素为一个或多个
- 相邻兄弟选择器
- 属性选择器
- 语法
- [属性]
- 匹配带有指定属性的元素
- [title]: 匹配包含title属性的所有元素
- 元素[属性]
- 元素[属性1][属性2]
- 匹配既具备属性1又具备属性2的元素
- 元素[属性名=属性值]
- 属性名必须等且只等于属性值, 空格也不允许
- 元素[属性名~=属性值]
- 属性值中只要包含当前值即可匹配
- 元素[属性名^=值]
- 属性值以值开头的元素
- 元素[属性名*=值]
- 属性值中包含值的元素
- 元素[属性名$=值]
- 属性值中以值结尾的元素
- [属性]
- 须知: 上述语法中, 属性值以单词为基本单元, 值以单个字符为基本单元
- 语法
html代码
<div class="tdiv ">div1</div>
<div class="tdiv mm">div2</div>
<div class="tdiv nn">div3</div>
css代码
div[class~=’mm’]可匹配div2
div[class^=’t’]可全部匹配
div[class*=’n’]可匹配div3
div[class$=’n’]可匹配div3
- 伪类选择器
- 伪类分类
- 链接伪类
- :link 尚未访问的链接
- :visited 已访问的链接
- 动态伪类
- :hover 鼠标悬停时
- :active 元素被激活时
- :focus 元素获取焦点时(多用于文本框, 密码框等表单元素)
- 目标伪类
- :target 用于匹配当前活动的锚点元素(而非链接元素)
- 元素状态伪类
- :enabled 匹配每个已启用的元素
- :disabled 匹配每个被禁用的元素
- :checked 匹配每个已被选中的input元素(单选按钮、复选框)
- 结构伪类
- :first-child 匹配属于其父元素的首个子元素
- :last-child 匹配属于其父元素的最后一个子元素
- :empty 匹配没有子元素的元素(包含文本)
- :only-child 匹配是其父元素唯一子元素的元素
- 否定伪类
- 匹配非指定选择器的每个元素
- :not(selector)
- 伪元素选择器
- :first-letter 用于选取指定元素的首字母
- :first-line 用于选取指定元素的首行文本
- ::selection 用于匹配被用户选取的部分
- :before 用于在元素前做内容生成
- :after 用于在元素后做内容生成
内容生成伪元素必须与content属性联用
div:after{
content: ”;
display: block;
clear: both;
}