伪类选择器 css3

一，相邻选择器；
1，相邻选择器
1），定义：相邻选择器匹配指定元素的相邻兄弟元素(切记本身是一个参考点并不会选择）
2），用法：若是须要选择紧接在另外一个元素后的元素，并且两者有相同的父元素，可使用相邻兄弟选择器
3），表示符号：使用加号（+）做为结合符
4），使用前提：
a,必须有共同的父元素；
b,必须相邻；

2，通用兄弟选择器匹配某元素后面的全部兄弟元素
1），定义：通用兄弟选择器匹配某元素后面的全部兄弟元素（包括本身）
2），用法：两种元素必须拥有相同的父元素，可是 element2 没必要直接紧随 element1
3），符号；使用符号（~）做为结合符，即 element1~element2
4），使用前提：拥有共同的父元素；
二，属性选择器；
1），定义：属性选择器可以将元素附带的属性用于选择器中，从而对带有指定属性的元素设置样式
2），写法：demo
[title]
{
color:red;
}
选择带有 title 属性(鼠标停留显示的内容)的全部元素
3），常见写法：
三，伪类选择器；
1，目标伪类：target，
target：
1，做用：
经过锚点＃找到目标元素，经过target伪类把样式赋给目标元素；
2，注意点：
1），若是目标元素是a标签，属性只能用id和name
2），若是目标元素是其余标签，属性只能是id；
3）demo：
HTML：
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<br /><br /><br />
<a name="news1">内容 1...</a>
<div id="news2">内容 2...</div>
CSS：
3，元素状态伪类：
1，enabled，匹配每一个已启用的元素（大多用在表单元素上）
disabled，匹配每一个被禁用的元素（大多用在表单元素上）
checked，匹配每一个已被选中的 input 元素（只用于单选按钮和复选框）
3，结构伪类：
first-child ，匹配属于其父元素的首个子元素
:last-child，匹配属于其父元素的最后一个子元素
:empty ，匹配没有子元素（包括文本节点）的每一个元素
:only-child ，匹配属于其父元素的惟一子元素
示例
p:first-child 选择属于父元素的第一个子元素的每一个 <p> 元素
p:last-child 选择属于父元素的最后一个子元素的每一个 <p> 元素
p:empty 选择没有子元素的每一个 <p> 元素
p:only-child 选择属于其父元素的惟一子元素的每一个 <p> 元素
4，否认伪类
1），定义：not(selector) ，匹配非指定元素/选择器的每一个元素
四，伪元素选择器；
1，伪元素 :first-letter：
用法用处：
:first-letter 选择器用于选取指定选择器的首字母
经常使用于排版细节，如首字母突出显示、下沉等
demo：
HTML：
<h1>h1 文本</h1>
<p>段落文本111</p>
<p>段落文本222</p>
CSS：
p:first-letter
{
font-size:20pt;
color:#8A2BE2;
font-weight:bold;
}
2，伪元素 :first-line
用法用处：:first-line 选择器用于选取指定选择器的首行
demo：
HTML：
<p>这是一个文本比较多的段落，有多行文本。须要设置第一行文本的特定样式。</p>
CSS：
p:first-line
{
font-size:20pt;
color:#8A2BE2;
font-weight:bold;
}
3，伪元素 ::selection
用法用处：::selection 选择器匹配被用户选取的部分
demo：
HTML：
页面文本，可使用鼠标拖拽的方式直接选中，查看效果。
<p>段落文本</p>
<div>div中的文本</div>
CSS：
::selection
{
color:#f00;
}