一.复杂选择器
1.兄弟选择器
|
兄弟元素，具备相同父元素的平级元素之间称为兄弟元素 兄弟选择器，只能找弟弟，不能找哥哥，只能往后找，不能往前找 |
①相邻兄弟选择器
|
选择器 + 选择器{} 获取紧紧挨在某元素后面的兄弟元素 p+.c1{color:#f00;} |
②通用兄弟选择器
|
选择器 ~ 选择器{} 获取元素后面所有符合条件的兄弟 #p1~.c1{color:#f00;} |
3.伪类选择器
|
:link :visited :hover :active :focus |
①目标伪类
|
在锚点被激活时，让锚点元素应用的样式 :target{} |
②结构伪类
|
1.选择器:first-child{} 匹配的元素是属于其父元素的第一个子元素(找大哥) 同时，这个大哥还需要符合选择器的要求 2.选择器:last-child{} 匹配的元素是是属于其父元素的最后一个子元素(找小弟) 同时，这个小弟还需要符合选择器的要求 3.选择器:nth-child(n) n从1开始 |
③:empty
|
匹配内部没有任何元素标签，包括文本，空格，回车，都不能有 |
④:only-child
|
匹配属于其父元素的唯一子元素 |
⑤否定伪类
|
:not(selector) |
4.伪元素选择器
①匹配元素的首行首字符
|
:first-letter 或者 ::first-letter |
②匹配元素的首行
|
:first-line 或者 ::first-line 当首行与首字符发生了冲突，应用首字符的样式 |
③匹配用户选择的文本
|
这里必须是双：： ::selection{} 这里的样式，只能修改文本颜色和背景颜色 |
④伪元素选择器，内容生成
|
生成的是一个元素 可以设置这个元素的显示方式，使用content:设置这个元素文本内容 以及所有可以使用的样式 content中只能给字符串和url(图片)
:before 或者 ::before 代表的是内容区域中，最靠前的部分 div::before{ content:"蒙奇.D.路飞说:"; display:block; color:#f00; background:#0ff; 100px;height:100px; }
:after 或者 ::after 匹配到某元素内容区域最后的位置 |
|
伪元素添加内容，可以解决的问题 1.外边距溢出 #d1::before{ content:"", display:table; } 2.解决高度坍塌 #d2::after{ content:""; display:block; clear:both; } |