选择器
元素选择器
- *{ }
- 通配选择符 (*)
- 选定所有对象。
- 通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用。
- E{ }
- 类型选择符(E)
- 以文档语言对象类型作为选择符。
<style> h1{font-size:20px;} p{font-size:13px;} </style> <h1>标题</h1> <p>正文内容</p> -
#myid{ }
- ID选择符
- 以唯一标识符id属性等于myid的E对象作为选择符.
-
.myclass{ }
- 以class属性包含myclass的E对象作为选择符。
关系选择器
- E F{ }
- 包含选择器，又称之为：后代选择器。
- 选择所有被E元素包含的F元素。
- 与子选择器不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子..
- E>F{ }
- 子选择器
- 选择所有作为E元素的子元素F。
- 与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。
- E+F{ }
- 相邻选择器
- 选择紧贴在E元素之后F元素。
- 与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。
# 此例，如果使用 p+p{color:#f00;} ，那么p2,p5将会变成红色； # 如果使用p~p{color:#f00;}，那么p2,p3,p4,p5将会变成红色； <style> /* 相邻选择符(E+F) */ p+p{color:#f00;} /* 兄弟选择符(E~F) */ p~p{color:#f00;} </style> <p>p1</p> <p>p2</p> <h3>这是一个标题</h3> <p>p3</p> <h3>这是一个标题</h3> <p>p4</p> <p>p5</p> - E~F{ }
- 兄弟选择符
- 选择E元素后面的所有兄弟元素F。
- 与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。
属性选择器
- [att]
选择具有for属性的所有元素<style> [for]{margin:10px;} </style> <p> 不带有 for 属性的 p 元素</p> <p for="Ethan"> 带有 for 属性的 p 元素 </p> <p for="Alice"> 带有 for 属性的 p 元素 </p> - E[att]
选择具有att属性的E元素。<style> img[alt]{margin:10px;} </style> <img src="图片url" alt="" /> <img src="图片url" /> - E[att="val"]
选择具有for属性，并且for=Alice的所有元素<style> [for="Alice"]{margin:10px;} </style> <p> 不带有 for 属性的 p 元素</p> <p for="Ethan"> 带有 for 属性的 p 元素，且for的值为 Ethan </p> <p for="Alice"> 带有 for 属性的 p 元素，且for的值为 Alice</p> - E[att^="val"]
选择具有att属性，且属性值以字符串val开头的E元素。#此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头 <style> div[class^="a"]{border:2px solid #000;} </style> <div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div> - E[att$="val"]
选择具有att属性且属性值为以val结尾的字符串的E元素。#此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾 <style> div[class$="c"]{border:2px solid #000;} </style> <div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div> - E[att*="val"]
选择具有att属性且属性值为包含字符串val的E元素。#此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b <style> div[class*="b"]{border:2px solid #000;} </style> <div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>
伪类选择器
- :first-child
向元素的第一个子元素添加样式 - :last-child
向元素的最后一个子元素添加样式 - :nth-child(n)
向元素的第 n 个子元素添加样式
特殊应用（可用于表格隔行变色）：- :nth-child(even)
选中偶数位置的子元素，添加样式 - :nth-child(odd)
选中奇数位置的子元素，添加样式
- :nth-child(even)
- :nth-last-child(n)
父元素的倒数第n个子元素E，假设第n个该子元素不是E，则选择符无效（E元素必须是某个元素的子元素）-
注意：
<div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> </div>- 假设要命中倒数第一个p(即正数第3个p)，那么CSS选择符应该是：
p:nth-last-child(2) - 而不是：
p:nth-last-child(1)
解释：
1. 倒数第1个p，其实是倒数第2个子元素。
2. 基于选择符从右到左解析，首先要找到第1个子元素，然后再去检查该子元素是否为p，如果不是p，则n递增，继续查找。- 假设不确定倒数第1个子元素是否为E，但是又想命中倒数第1个E，应该这样写：
p:last-of-type
- 假设要命中倒数第一个p(即正数第3个p)，那么CSS选择符应该是：
-
- :only-child
匹配父元素仅有一个子元素，且该子元素为E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。<style> h1{font-size:16px;} li:only-child{color:#f00;} </style> <h1>只有唯一一个子元素</h1> <ul> <li>结构性伪类选择符 only-child</li> # 只有 这个字体变色了 </ul> <h1>有多个子元素</h1> <ul> <li>结构性伪类选择符 only-child</li> <li>结构性伪类选择符 only-child</li> <li>结构性伪类选择符 only-child</li> </ul> - :first-of-type
同类型中的第一个同级兄弟元素E - :last-of-type
匹配同类型中的最后一个同级兄弟元素E。
该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E。 - :only-of-type
匹配同类型中的唯一的一个同级兄弟元素E。
该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置。<style> p:only-of-type{color:#f00;} </style> <div class="test"> <p>结构性伪类选择符 only-of-type</p> </div> - :nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E。 - :nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E。
该选择符总是能命中父元素的倒数第n个为E的子元素，不论倒数第n个子元素是否为E。 - :empty
匹配没有任何子元素（包括text节点，即文字）的元素E。 - :not(s)
匹配不含有s选择符的元素E。<style> p:not(.abc){color:#f00;} </style> <p class="abc">否定伪类选择符 not(s)</p> #只有class为 .abc的未变色，后面的三个都变色了 <p id="abc">否定伪类选择符 not(s)</p> <p class="abcd">否定伪类选择符 not(s)</p> <p>否定伪类选择符 not(s)</p>
超链接的伪类
a:link{}
设置超链接a在未被访问前的样式。a:visited{}
设置超链接a在其链接地址已被访问过的样式。a:hove{}
设置元素在其鼠标悬停时的样式。a:active{}
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。-
注意点
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现。
超链接的4种状态，需要有特定的书写顺序才能生效。
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢和讨厌两个词来概括#注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后 a:link{} a:visited{} a:hover{} a:active{}
