Selectors of CSS3

Selectors of CSS3

Relationship Selectors

E + F

选择下一个满足条件的兄弟元素结点

div + .demo {
    backgroud-color:red;
}

div + p {
    backgroud-color:red;
}

E ~ F

E并集下的后面的所有兄弟元素结点中是F的被选中

Attribute Selectors

E[attr~=“val”]

选择属性名attr中含有独立的val字符串的E元素

div[class~="a"] {
    backgroud-color:red;
}

E[attr |=“val”]

选择attr属性值以val开头的元素

E[attr^=“val”]

选择attr属性值以val开头的元素

E[attr$=“val”]

选择attr属性值以val结尾的元素

E[attr*=“val”]

选择attr属性值存在val的元素

Pseudo-Element Selectors

E::placeholder

输入框提示，用户开始输出时消失

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

可以改变提示文字的颜色

input::-webkit-placeholder{
    color:green;
}

E::selection

选中标签后的样式，只能设置三个属性

div::selection{
    color:#fff;
    background-color:#fcc;
    text-shadow:3px 5px black;
}

Pseudo-Classes Selectors

E:not(s)

选择没有s属性的元素

div:not(.demo){
    backgroud-color:red;
}

div:not([class="demo"]){
    backgroud-color:red;
}

div:not([class]){
    backgroud-color:red;
}

E:root

是根标签选择器

:root{
    backgroud-color:red;
}

E:target

选出来被锚点所标记的目标

<a href="#box1">box1</a>
<a href="#box2">box2</a>
<div id="box1"></div>
<div id="box2"></div>

div:target{
    border:1px solid black;
}

哪个div被标记了，哪个div上的id变成锚点的值了，哪个div就变成了target状态

E:first-child

某个父级结点下的第一个孩子结点，并且是E

E:last-child

某个父级结点下的最后第一个孩子结点，并且是E

E:only-child

某个父级结点下的唯一个孩子结点，并且是E

E:nth-child(n)

某个父级节点下第n个结点，并且是E

E:nth-last-child(n)

nth-child(n)的倒序，也就是反着查

E:first-of-type

某个父级节点下的第一个E元素结点

E:last-of-type

某个父级节点下的最后一个E元素节点

E:only-of-type

某个父级节点下唯一的一个E元素节点

E:nth-of-type(n)

某个父级节点下第n个E元素节点

E:nth-of-last-type(n)

nth-of-type(n)的倒序

E:empty

空元素结点

<div></div>
<div><!--只有注释也算空--></div>

E:checked

设置元素被选中后的状态

<label>
	一个小惊喜<input type="checkbox">
    <span></span>
</label>

input:checked + span{
    background-color:green;
}
input:checked + span::after{
    content:"骗你的没惊喜";
    color:fff;
}

E:enabled 、E:disabled

<input type="text">
<input type="text" disabled>

E:read-only 、E:read-write

<input type="text">
<input type="text" readonly value="你只能瞅着，干不了别的">