css选择器

元素选择器##

通配选择符*,类型选择符E, ID选择符#id， 类选择符.class

关系选择器##

包含选择符（E F）: 选择E 的后代 F
子选择符（E > F）:选择E 的子元素 F

相邻选择符（E + F）:选择E 的兄弟节点F（紧邻，亲兄弟）
兄弟选择符（E ~ F）:选择E 的所有兄弟元素F（包含堂兄弟）

属性选择器##

E[attr]： 选择具有attr属性的E元素
E[attr ='val']：选择具有attr属性且属性值等于val的E元素
E[attr~='val']: 选择具有attr属性，且值包含val的E元素（该属性具有一个或多个属性值，其中一个为val）
E[attr ^= 'val']:选择具有attr属性，且属性值为以val开头的字符串的E元素

<ul>
    <li class="abc">列表项目</li>
    <li class="acb">列表项目</li>
    <li class="bac">列表项目</li>
    <li class="bca">列表项目</li>
    <li class="cab">列表项目</li>
    <li class="cba">列表项目</li>
</ul>

<style>
li[class^="a"] {
    color: #f00;
}
</style>

Paste_Image.png

E[attr$='val']: 选择具有attr属性且属性值为以val结尾的字符串的E元素
E[attr*='val']: 选择具有attr属性且属性值为包含val的字符串的E元素
E[attr|='val']:选择具有attr属性且属性值为以val开头并用连接符-分隔的字符串的E元素，如果属性值仅为val，也将被选择

<ul>
    <li class="test1-abc">列表项目</li>
    <li class="test2-abc">列表项目</li>
    <li class="test3">列表项目</li>
    <li class="test3-abc">列表项目</li>
    <li class="test4-abc">列表项目</li>
    <li class="test5-abc">列表项目</li>
    <li class="test6-abc">列表项目</li>
</ul>
<style>
li[class|="test3"] {
    color: #f00;
}
</style>

Paste_Image.png

伪类选择器##

E:link (设置超链接a在未被访问前的样式)
E:visited(设置超链接a在其链接地址已被访问过时的样式)
E:hover(设置元素在其鼠标悬停时的样式)
E:active(设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式)

四种状态全部存在时需要有特定的书写顺序才能生效

a:link {}
a:visited {}
a:hover {}
a:active {}

E:focus(设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式)
E:lang(fr)(匹配使用特殊语言的E元素)
E:not(s)匹配不含有s选择符的元素E
一个例子：

p:not(.class) {
    color: #f00;
}

E:root(匹配E元素在文档的根元素。在html中，根元素永远是html)

E:first-child（匹配父元素的第一个子元素，如果是E，则被选中）
E:last-child(匹配父元素的最后一个子元素E)

这样理解：
  伪类选择符的构成： 被选中的元素E + 状态描述；

E:only-child(匹配父元素仅有的一个子元素E)
E:nth-child(n)(匹配父元素的第n个子元素E)

一个实践：用来实现奇偶选择：

<style>
li:nth-child(2n){color:#f00;} /* 偶数 ，等价于关键字even*/
li:nth-child(2n+1){color:#000;} /* 奇数 ,等价于关键字odd*/
</style>

<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
</ul>

E:nth-last-child(n)(匹配父元素的倒数第n个子元素E)

E:first-of-type(匹配同类型中的第一个同级兄弟元素E)
E:last-of-type(匹配同类型中的最后一个同级兄弟元素E)
E:only-of-type(匹配同类型中的唯一一个同级兄弟元素E)
E:nth-of-type(n)(匹配同类型中的第n个同级兄弟元素E)
E:nth-last-of-type(n)(匹配同类型中的倒数第n个同级兄弟元素E)

思考和上面一组选择器的区别？

E:empty(匹配没有任何子元素（包括text节点）的元素E)
E:checked（匹配用户界面上处于选中状态的元素E（radio和checkbox））
E:enabled（匹配用户界面上处于可用状态的元素E）
E:disabled（匹配用户界面上处于禁用状态的元素E（disabled属性））
E:target（匹配相关url指向的E元素）
作为锚点的目标元素跳转完成以后被选中

<style>
        .test-div{
            width: 500px;
            height:300px;

        }
        .test-div:target{
            border: 1px dotted red;
        }
    </style>
    <a href="#test4">test</a>
    <div class="test-div" id="test1"></div>
    <div class="test-div" id="test2"></div>
    <div class="test-div" id="test3"></div>
    <div class="test-div" id="test4"></div>
    <div class="test-div" id="test5"></div>

伪对象选择器##

E::first-letter(设置对象内的第一个字符的样式)
注意：此伪对象仅用于块级对象，内联对象无效
E::first-line（选择对象内的第一行， 同样仅作用于块级对象）
E::before(设置在对象前（依据对象树的逻辑结构）发生的内容，用来和content属性一起使用，并且必须定义content属性)

<style>
        p::before{
            content:"yes ,支持~";
        }
    </style>
    <p></p>

E::after(设置在对象后（依据对象树的逻辑结构）发生的内容，用来和content属性一起使用，并且必须定义content属性)
E::placeholder（设置对象文字占位符的样式（更改placeholder的文字样式））
注意：除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder

Paste_Image.png

E::selection（设置对象被选择是的样式，只能定义被选择时的background-color， color，text-shadow）

<style>
        p::selection{
            color: orange;
        }
    </style>
    <p>选中我后看看发发生什么变化吧</p>

Paste_Image.png