1、兄弟选择器
1)相邻兄弟选择器
匹配当前元素【后面】的【一个】元素,前提:两者必须拥有相同父元素
selector1+selector2
通过 + 作为结合符eg: div+p{}
注意:只找与当前元素相关的后面一个紧挨着他的兄弟元素,如果符合则匹配,不符合也不会向下查找。
2)通用兄弟选择器
匹配当前元素【后面】的【所有】【兄弟】元素
selector1~selector2
使用 ~ 作为结合符 div ~ p
注意:第二个元素不必紧紧跟随第一个元素的后面
2、属性选择器
1)[属性名]
选择 带有 指定属性 的元素
[title] : 匹配包含title属性的所有元素
2)元素[属性名]
p [id] : 匹配所有包含id属性的p元素
div [title] : 匹配所有包含title属性的div元素
3)元素[属性1][属性2]....
匹配即具备属性1又具备属性2的元素
div[id][class]
4)元素[属性=值]
input [type=text]:匹配所有type属性值为text的input元素
input [type="text"]
input [type='text']
5)元素[属性~=值]
<div class="content"></div>
<div class="content important"></div>
div [class~=important]
指定属性中,包含【独立】【值】单词的元素
6)元素[属性^=值]
属性值以【值】开始的元素
div[class^=c] : class属性以c开头的div元素
div[class^=my]: class属性以my开头的div元素
7)元素[属性*=值]:
属性值中包含【值】的元素
8)元素[属性$=值]:
属性值以【值】结尾的元素
3、伪类选择器
1)目标(target)伪类
用于匹配 当前活动的 锚点元素
语法::target
2)元素状态伪类
场合:表单元素居多
:enabled 匹配每个已启用的元素
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的input元素(单选按钮、复选框)
3)结构伪类
1):first-child ,匹配属于其父元素中的首个子元素
2):last-child , 匹配属于其父元素中的最后一个子元素 table tr:first-child{} table tr:last-child{}
3):empty , 匹配没有子元素(包含文本)的元素
<p></p>:可以匹配出来
4):only-child ,匹配是其父元素中的唯一子元素
<p>
<a>1</a>
</p> a:only-child{}可以匹配
<p>
<a>2</a>
<a>2</a>
</p> a:only-child{}无法匹配
4)否定伪类
匹配非指定选择器的每个元素(即不是指定选择器的其他元素)
语法: :not(selector)
input:not([type=text]) tr:not(:first-child):not(:last-child)
4、伪元素选择器
特点:获取指定元素中某一部分文本而用的。
1):first-letter
用于选取指定选择器(元素)的首字母
2):first-line
用于选取指定选择器(元素)的首行文本
3)::selection
匹配被用户选取的部分
5、内容生成
通过 css 向已有的元素上增加新的内容
1):before
向匹配元素之前增加生成的内容 定位到匹配元素开始的位置 div:before{}
2):after
向匹配元素之后增加生成的内容 p:after{}
属性:
1)content
作用:配合 :before , :after伪元素插入生成的内容div:before{
content:"生成的内容:";
}
常用取值:字符串:普通文本 url:图像