CSS之元素选择器

1.后代元素选择器

div p

以空格分隔，表示div的所有后代p元素

2.子元素选择器

div > p

以大于号分隔，表示div的直接子元素

3.相邻兄弟选择器

div  + p

选择紧接在div元素后面的p元素，中间不能有其他元素

4.兄弟选择器

　　div ~ p

选择div元素后面的所有兄弟元素p

5.选择p元素，并都p元素作些筛选

p:first-of-type:p元素是其父元素从上往下，遇到的首个p元素

p:last-of-type:p元素是其父元素从上往下，遇到的最后一个p元素

p:only-of-type:p元素是其父元素的唯一个p元素，父元素可能还有其他元素

p:nth-of-type(n):p元素是其父元素从上往下，遇到的第n个p元素

p:nth-last-of-type(n):p元素是其父元素从后往前，遇到的第n个p元素

p:only-child:p元素是其父元素的唯一个元素

p:nth-child(n):p元素是其父元素从上往下数的第n个子元素

p:nth-last-child(n):p元素是其父元素从后往前数的第n个子元素

p:last-child:p元素是其父元素的最后一个子元素

6.空选择器

p:empty

选择没有子元素(包括文本节点)的p元素

7.check选择器

input:checked

选择每个被选中的input元素，仅单选框和复选框有效

8.非选择器

:not(p)

选择不是p元素的其他元素

9.选取选择器

::selection

匹配用户选取的部分

<!DOCTYPE html>
<html>
<head>
<style>
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
</style>
</head>
<body>

<h1>请试着选取页面上的文本</h1>

<p>这是一个段落。</p>

<div>这是 div 元素中的文本。</div>

</body>
</html>

用户鼠标选中文本时，文本的颜色变为红色

只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。