CSS选择器.html
来源：原创
时间：2016-07-17
作者：脚本小站
分类：代码笔记
<!-----------------------CSS 2选择器------------------------->
<!------------------------------------------------------------>
<!-- 通配选择符 -->
*{}
<!-- 类型选择符 -->
div{}
<!------------------------------------------------------------>
<!-----------------------属性选择符--------------------------->
<!--
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }
-->
<!-- 选择有此属性的 -->
a[href]{}
<!-- 属性选择符 -->
span[class=demo] {}
<!-- 有这两个属性的 -->
div[title="twenty"][name="two"] {}
<div title="twenty" name="two">one</div>
<!------------------------------------------------------------>
<!------------------------------------------------------------>
<!-- 包含其中字符 -->
a[class="b"] {}
<div class="a b c"></div>
<!-- 选择其中一串字符 -->
.a{}
.b{}
.c{}
<div class="a b c"></div>
<!-- 包含选择符 -->
div a{}
<!------------------------------------------------------------>
<!------------------------------------------------------------>
<!-- 子对象选择符 -->
div ul>li{}
<!-- ID选择符 -->
#one{}
<!-- 类选择符 -->
.one{}
<!-- 选择符分组 -->
one,two,three{}
<!-- 伪类选择符 -->
div:first-letter {}
<!-- 伪对象选择符 -->
a.fly :hover {}
<!-------------------------CSS 3选择器----------------------->
<!----------------------兄弟相邻选择器------------------------>
<!-- 相邻选择器 下方紧挨着的元素 -->
div+span{}
<div></div>
<span>被选中</span>
<!-- 兄弟选择器 下方同级的元素 -->
div~span{} <!-- ~为隔着多少个 -->
<div></div>
<a href=""></a>
<span>被选中</span>
<!------------------------------------------------------------>
<!---------------------字符串匹配的属性选择符----------------->
<!-- 属性的值以val结尾的元素 -->
p[title$="val"] {}
<p title="xxxval"></p>
<!-- 属性的值以val开头的元素 -->
p[title^="val"] {}
<p title="valxxx"></p>
<!-- 属性的值中含有val的元素 -->
p[title*="val"] {}
<p title="xxxvalxxx"></p>
<!-- 匹配标签带值有-的 -->
div[class|='news']{}
<div class='news-top'></div>
<!------------------------------------------------------------>
<!------------------------结构性伪类-------------------------->
<!-- 选择html标签 -->
html:root {}
<html></html>
<!-- 匹配没有内容的元素 -->
strong:empty {}
<div>
<strong></strong>
</div>
<!------------------------------------------------------------>
<!---------------------------child---------------------------->
<!-- 父元素的第一个子元素 -->
a:first-child{}
<div>
<a href="">被选中</a>
<a href=""></a>
</div>
<!-- 父元素的倒数第一个元素 -->
a:last-child{}
<div>
<a href=""></a>
<a href="">被选中</a>
</div>
<!-- 匹配父元素中的第n个子元素E -->
p:nth-child(2) {}
<div>
<p>first</p>
<p>被选中</p>
<p>third</p>
</div>
p:nth-child(odd) {} /*奇数行*/
p:nth-child(even) {} /*偶数行*/
<p>ooo</p>
<p>ooo</p>
<p>ooo</p>
<p>ooo</p>
<!-- 父元素的倒数第n个子元素 -->
p:nth-last-child(1){}
<div>
<p>first</p>
<p>second</p>
<p>third</p>
</div>
<!-- 匹配属于父元素中唯一的子元素 -->
a:only-child {}
<div>
<a href="">被选中</a>
</div>
<!------------------------------------------------------------>
<!-------------------------type------------------------------->
<!-- 匹配第3个p标签同级的元素 -->
p:nth-of-type(3) {}
<div>
<p>first</p>
<p>second</p>
<p>third</p>
</div>
<!-- 匹配同级兄弟元素中的第一个元素 -->
p:first-of-type {}
p:last-of-type{}
<div>
<p>first</p>
<p>second</p>
<p>third</p>
</div>
<!-- 匹配属于同类型中唯一兄弟元素 -->
p:only-of-type {}
<div>
<p>first</p>
</div>
<div>
<p>second</p>
<p>third</p>
</div>
<!------------------------------------------------------------>
<!--------------------------input---------------------------->
<!-- 捕获选中的输入框 -->
input:focus{}
<input type="text" name="" />
<!-- 选择选中的表单 -->
input:checked {}
<form method="post" action="">
<input type="radio" name="css3" checked />
<input type="radio" name="css3" />
</form>
<!-- 选择可用的表单 -->
input:enabled {} /i'nebld/ 依嘞伯德 可用的
<form method="post" action="">
<input type="text" value="默认状态下的表单都是enabled" />
</form>
<!-- 选择不可用的表单 -->
input:disabled {}
<form method="post" action="">
<input type="text" value="" disabled="disabled" />
</form>
<!------------------------------------------------------------>
<!------------------------------------------------------------>
<!-- 指定选中文字后的颜色 -->
p::selection {}
<div>
<p>ctrl+a 全选看效果</p>
</div>
<!-- 选没有one的 -->
p:not(.bg) {}
<div>
<p></p>
<p class="one"></p>
</div>
<!-- 匹配相关URL指向的E元素 -->
<!-- 点击链接添加样式 -->
div:target{}
<a href="#twenty">前往2号阵地</a>
<div id="">1号阵地</div>
<div id="twenty">2号阵地</div>
<!-- 选中首行 -->
div::first-line{}
<div>
第一行 <br />
</div>
<!-- 选中首字母 -->
div:first-letter{}
<!-- 加入提示文字 -->
div:after{
content:"hello world";
}
<div></div>
<!------------------------------------------------------------>
<!------------------------------------------------------------>
<!--
nth-child 相对父元素的第几个
nth-of-type 同类型同级的第几个
nth-last-child 相对父元素的倒数第几个
nth-last-of-type 同类型同级元素的倒数第几个
only-child 相对父元素只有一个子元素
only-of-type 同类型元素的唯一一个
last-child 相对父级元素的最后一个
first-of-type 同类型的第一个
-->
<!------------------------------------------------------------>
<!------------------------------------------------------------>