css3常用新增选择器详解

E + F

下一个满足条件的兄弟元素节点

div + p{
    background-color: red;
}

	<div>div</div>
    <p>1
        <p>11</p>
    </p>
    <p>2</p>
    <p>3</p>

E ~ F

满足条件的所有兄弟元素节点，必须是同级的。

div ~ p{
    background-color: green;
}

	<div>div</div>
    <div>
        <p>1</p>
    </div>
    <p>2</p>
    <p>3</p>
    <h3>4
        <p>41</p>
    </h3>
	

E > F

选择所有作为E元素的子元素F。只能选择子元素，子元素的子元素不能选择

.demo > div{
    position: absolute;
}

	<div class="demo">
        <div class="child">
            <div>123</div>
        </div>
    </div>

E[attr^=“value”]

选择有attr属性并且值为value开头的字符串的E元素

div[class^='d']{
    color: red;
}

	<div class="demo" data="a">data</div>
    <div class="d">data2</div>

E[attr$=“value”]

选择有attr属性并且值为value结尾的字符串的E元素

div[class$='d']{
    color: red;
}

	<div class="demo" data="a">data</div>
    <div class="d">data2</div>

E[attr*=“value”]

选择具有attr属性并且值有value的字符串的E元素

div[class*='d']{
    color: red;
}

	<div class="demo" data="a">data</div>
    <div class="d">data2</div>
    <div class="a">data3</div>

E::placeholder

设置占位符的样式

input::placeholder{
    color: red;
}

<input type="text" placeholder="请输入用户名">

E::selection

选中E元素时，触发，只能选择color，background-color，和text-shadow

div::selection{
    color: white;
    background-color: aqua;
}

<div>请选中我</div>

选中状态

E:not(s)

匹配不含有s选择器的元素E

div:not(.test){
    background-color: red;
}
	<div class="demo">1</div>
    <div class="demo">2</div>
    <div class="test">3</div>
    <div>4</div>

:root

根元素选择器，和html选择器一样

:target

被标记为锚点后，再做动作

:target{
    border: 1px solid red;
}
	<a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <div id="box1">1</div>
    <div id="box2">2</div>

点击box1

点击box2

E:first-child

第一个子元素，受别人影响

p:first-child{
    background-color: red;
}
	<div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <p>4</p>

选不到div外面的p元素

E:noly-child

只能选中父元素只有一个E子元素的情况

span:only-child{
    color: red;
}

	<div>
        <span>0</span>
    </div>
    <div>
        <span>0</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>

E:nth-child(even/2n+1/odd/2n)，受别人影响

选择父元素的第n个元素

p:nth-child(2n+1){
    background-color: red;
}

	<div>
        <span>0</span>
    </div>
    <div>
        <span>0</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>

E:first-of-type

第一个这种类型的子元素，不受别人影响

E:last-of-type

最后一个这种类型的子元素，不受影响

E:only-of-type

匹配父元素中唯一的那个E子元素

E:empty

匹配E中的内容为空的子元素，空格也不能有，但可以有注释

+加号

选择兄弟元素

E:nth-of-type(n)

第几个E类型的子元素，不受影响