css选择器基本属性

选择器
一，相邻选择器；
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;
}