10.6、css伪类、伪元素
伪类用于向某些选择器添加特殊效果；伪元素用于将特殊的效果添加达到某选择器。
区别：伪类的效果可通过添加一个实际的类达到，用：；伪元素效果则需要添加一个实际的元素，用：：
伪元素的权重比伪类高
伪类：
p>i{color:red;} <p><i>老大</i><i>老二</i></p>
p>i:first-child{color:red;} <p><i>老大</i><i>老二</i></p>
.first-child{color:red;} <p><i class='first-child'>老大</i><i>老二</i></p>
伪元素：
p:first-letter{color:red;} <p>老大</p>
.first-letter{color:red;} <p><span class="first-letter">老</span>大</p>
常用的伪类：
10.6-1 a:hover,a:link,a:active,a:visited,:focus/*动态伪类*/
<input type="text" value='你好'/>
input:focus{color:red} <input type="text" value='你好' />
10.6-2 :disabled禁用 :enabled 没有被禁用 :checked被选中 :read-only 只读 :read-write/*UI状态*/
button:disabled{color:red}
<button type="button" disabled="disabled">点击</button>
<button type="button" >点击</button>
input:read-write{color:red} <input type="text" value='你好' />
input:focus{color:red} <input type="text" readonly="readonly" value='你好'/>
input:checked+label{color:red;}
<input type="checkbox" name='man' id="man" checked="checked"/><label for="man">老大</label>
<input type="checkbox" name="man" id="woman"/><label for="woman">老二</label>
10.6-3 伪类
p:nth-child(2)其父元素的第n个元素//找到父元素的第二个子元素，并且是P元素
:nth-last-child(n)其父元素的倒数第n个元素
:nth-of-type(2)（如：p:nth-of-type(2){color:red;} p元素是其父元素的第2个p元素的话字体颜色就是红色）
:first-child 其父元素的第一个元素
:last-child 其父元素的最后一个元素
:nth-last-of-type(n) （如：p:nth-last-of-type(2){color:red;} p元素是其父元素的倒数2个p元素的话字体颜色就是红色）
:first-of-type 其父元素的第一个p元素
:last-of-type 其父元素的第一个p元素
10.6-4 伪元素 :before :after ::first-line ::first-letter ::selection
我是唐老鸭。<p>我是唐老鸭。</p>
p::before{content:'台词：'}<p>我是唐老鸭。</p>
P::first-letter{color:red;}<p>我是个鸭子</p>
P::first-line{color:red;} <p>我是个鸭子<br />我是个鸭子</p>
::selection{color:red;background:green;} <p>我是个鸭子我是个鸭子</p>
11、权重 important>行内>内嵌>class>标签>继承>*通配符
12、文字阴影 text-shadow:水平位移，垂直位移，模糊半径，颜色
13、文本
word-wrap:break-word; 断单词
word-wrap:break-allk;断字符
超出省略：
width：200px; white-space:nowrap；强制在一行显示所有文本 text-overflow:ellipsis;溢出显示省略标记
overflow:hidden;