一，相邻选择器；

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：

:target {

font-size:20pt;

border:1px solid blue;

}

div:target {

background-color:red;

}

a:target{

color: green;

}

2，元素状态伪类：

1，enabled，匹配每个已启用的元素（大多用在表单元素上）

disabled，匹配每个被禁用的元素（大多用在表单元素上）

checked，匹配每个已被选中的 input 元素（只用于单选按钮和复选框）

2，demo：

HTML：

ID：<input type="text" disabled="disabled" value="333" />

<br /><br />

名称：<input type="text" /><br /><br />

状态：<input type="radio" name="state" value="1" />启用

<input type="radio" name="state" checked="checked" value="0" />停用<br />

CSS：

input:enabled { font-weight:bold;}

input:disabled { background-color:#ccc;color:Gray;}

input:checked {background-color:#f00;}

3，结构伪类：

first-child ，匹配属于其父元素的首个子元素

:last-child，匹配属于其父元素的最后一个子元素

:empty ，匹配没有子元素（包括文本节点）的每个元素

:only-child ，匹配属于其父元素的唯一子元素

示例

p:first-child  选择属于父元素的第一个子元素的每个 <p> 元素

p:last-child 选择属于父元素的最后一个子元素的每个 <p> 元素

p:empty  选择没有子元素的每个 <p> 元素

p:only-child  选择属于其父元素的唯一子元素的每个 <p> 元素

demo：

HTML：

<div>

<p>段落1111</p>

<p></p>

<p>段落2222</p>

<p>段落3333</p>

</div>

CSS：

p:first-child {color:Blue;}

p:last-child {color:Red;}

p:empty {border:1px solid green;height:20px;}

div:only-child {border:1px solid black;}

4，否定伪类

1），定义：not(selector) ，匹配非指定元素/选择器的每个元素

2），demo

HTML：

<input type="text" /><br />

<input type="button" value="普通按钮" /><br />

<input type="submit" value="提交" />

CSS：

input:not([type="text"])

{

font-size:15px;

font-weight:bold;

color:Red;

}

四，伪元素选择器；

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;

}