css内容整理2

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;