css3复杂选择器

一.复杂选择器

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;

 width:100px;height:100px;

}

 

:after 或者 ::after 匹配到某元素内容区域最后的位置  

伪元素添加内容，可以解决的问题

1.外边距溢出

 #d1::before{

   content:"",

   display:table;

}

2.解决高度坍塌

 #d2::after{

  content:"";

  display:block;

  clear:both;

}