CSS伪类和伪元素

1. 伪类 & 伪元素

• 伪类和伪元素用来修饰不在文档树中的部分
• 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式
• 伪元素：用于创建一些不在文档树中的元素，并为其添加样式

2. 伪类

伪类详解图：

伪类.png

状态

• :link 选择未访问的链接
• :visited 选择已访问的链接
• :hover 选择鼠标指针浮动在其上的元素
• :active 选择活动的链接
• :focus 选择获取焦点的输入字段

注意：a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后

结构

• not
  否定伪类，用于匹配不符合参数选择器的元素
  HTML:

   <div class="div-type">我不会变色</div>
    <div> 我会变成橙色</div>
    <div class="div-type">我不会变色</div>
    <div>我会变成橙色</div>

CSS:

   div:not(.div-type) {
            color: orange;
        }

• first-child
  匹配元素的第一个子元素
  HTML:

<div>
    <div>我会变成蓝色</div>
    <div>我不会变成蓝色</div>
</div>

CSS:

div:first-child{
            color: blue;
        }

• last-child
  匹配元素的最后一个子元素， 与first-child用法类似

• first-of-type
  匹配属于其父元素的首个特定类型的子元素的每个元素
  HTML

     <ul>
        <li>这里的文本是橙色的。。。<span>我是第一个li 的子元素，所以我的文本是橙色的</span></li>
        <li>一些文本 </li>
        <li>一些文本</li>
    </ul>

CSS

 li:first-of-type {
          color: orange;
      }

• last-of-type
  匹配元素的最后一个子元素， 与first-of-type用法类似
• :nth-child
  根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数，an+b匹配到的元素示例如下：
  • 1n+0，或n，匹配每一个子元素
  • 2n+0，或2n，匹配位置为2、4、6、8…的子元素
  • 2n+1匹配位置为1、3、5、7…的子元素
  • 3n+4匹配位置为4、7、10、13…的子元素
• :nth-last-child
  与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的
• :nth-of-type
  与:nth-child相似，不同之处在于它是只匹配特定类型的元素
  HTML:

<article>
    <h1>我是标题</h1>
    <p>一些文本</p>
    <p>这里的文本是橙色的</p>
</article>

CSS:

p:nth-of-type(2) {
    color: orange;
}

• :nth-last-type
  与:nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的
• :only-child
  当元素是其父元素中唯一一个子元素时，:only-child匹配该元素
• :only-of-type
  当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素
• target
  当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素

表单相关

• checked
  匹配被选中的 input 元素，这个 input 元素包括 radio 和 checkbox
  如下，当复选框被选中时，与其相邻的<label>元素的背景会变成黄色
  HTML:

<input type="checkbox"/>
<label>正确</label>

CSS:

input:checked + label {
    background: yellow;
}

• disabled
  匹配禁用的表单元素.如下，被禁用input输入框的透明度会变成50%
  HTML:

<input type="text" disabled/>

CSS:

:disabled {
    opacity: .5;
}

3. 伪元素

伪元素详解图：

伪元素.png

• ::before/:before
  在被选元素前插入内容
  HTML:
  <h1>World</h1>
  CSS:

h1:before {
    content: "Hello ";
}

• ::after/:after
  在被元素后插入内容
• ::first-letter/:first-letter
  匹配元素中文本的首字母,被修饰的首字母不在文档树中
• ::first-line/:first-line
  匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中
• ::selection
  匹配用户被用户选中或者处于高亮状态的部分
• ::placeholder
  匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效

参考文章：http://kb.cnblogs.com/page/545911/