1 兄弟选择器
兄弟元素:具备相同父元素的平级元素之间称为兄弟元素
兄弟选择器只能往后找,不能往前找.
(1)相邻兄弟选择器
获取紧紧挨着选择器1后面的符合选择器2的兄弟元素
选择器1+选择器2{样式声明}
(2)通用兄弟选择器
选择器1~选择器2{样式声明}
获取选择器1后面所有符合选择器2 的兄弟元素
2 属性选择器
**[attr]{ }**---拥有attr属性的元素
**[attr1][attr2]...{}** ---同时拥有attr1,attr2属性的元素
**elem[attr]{}**---匹配拥有attr属性的elem元素
**[attr=value]{}**---匹配拥有attr属性且值为value的元素
**[attr1=value1][attr2=value2]{}**
**elem[attr=value]{}**
模糊属性选择器:
[attr^=value]{}匹配属性以value开头的元素
[attr$=value]{}匹配属性以value结尾的元素
[attr*=value]{}匹配属性含有value的元素
[attr~=value]{}匹配元素中有value这个独立单词的元素
3 伪类选择器
:link/:visited/:hover/:active/:focus
(1)目标伪类:
当锚点被激活时,被激活的锚点匹配样式
:target
(2)结构伪类:
通过结构关系匹配元素
①selector:first-child{}---匹配selector父元素的第一个儿子,且第一个儿子还要符合selector
②selector:last-child{}
③selector:nth-child(n){}--匹配selector父元素的第n个元素,且selector也要符合
④selector:empty{}--匹配没有任何子元素的标签(内部不能有元素,不能有文本,不能有空格,不能有回车)
⑤selector:only-child{}--匹配属于其父元素的唯一子元素
(3)否定伪类:
selector:not(selector){}---匹配不是selector的元素
(4)伪元素选择器
selector::first-letter{}(一个冒号或者两个冒号)匹配一个元素的首字符.
selector::first-line{}(一个冒号或者两个冒号)匹配一个元素的第一行的文本样式,
两者冲突的话以first-letter为准
selector::selection{}①必须两个冒号;②对first-letter无效;③只能设置字体颜色和背景颜色
(5)伪元素选择器---内容生成****
在某个元素的内容区域的最前面或者最后面,使用css动态的生成一个元素
::before{}
::after{}
①位置:当前元素的内容区域中的,最前面和最后面
②content:"" 设置这个假元素的内容(文本或者URL(图片))
③单双冒号都有效
④默认添加的是行内元素,
内容生成解决的问题:
①外边距溢出
parent::before{
content:'';
display:table;
}
②高度坍塌
parent::after{
content:'';
display:block;
clear:both;
}