伪类及伪元素

伪类

伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化

伪类列举

• LVHA顺序：link visited hover active。
  这样写的原因：
  这样写的原因是由两点决定的，第一点"相同优先级的样式，后面的会覆盖前面的样式"，第二点是鼠标点击动作的先后顺序。
  link和visited是常态，而hover和active是即时状态，h和a触发时，即时状态会覆盖l和v的常态，所以即时状态要放在常态的后面。
  常态情况下：访问过之后，就要呈现出visited的样式，所以visited要放到Link后面。
  即时状态下：要让active覆盖hover的样式，所以要将active放到后面。

• first-child VS first-of-type
  例如： h1:first-child选择的是h1并且他是长子的元素
  h1:first-of-type选择的是h1并且他是他父亲里h1类型中的长子的元素

<style>
    h1:first-of-type {
        background: yellow;
    }
    h1:first-child {
        color: red;
    }
    p:first-of-type {
        background: pink;
    }
    p:first-child {
        color: blue;
        /*本条样式不会生效，因为p标签不是父元素下的第一个元素*/
    }
</style>

<div class="wrapper">
    <h1>大标题1</h1>
    <p>段落2</p>
    <h1>大标题3</h1>
</div>

伪元素

伪元素用于创建一些不在文档流的中的元素，并为其添加样式

伪元素举例

• :before和:after

1. element:before 是在element内部创建一个行内元素(默认为行内元素)，作为element的第一个孩子。
2. element:after 是在element内部创建一个行内元素(默认为行内元素)，作为element的最后一个孩子。
3. 用:before :after的目的是为了省标签
4. 其中content属性时必不可少的。

• 应用举例：

1. 清除浮动

.clearfix:after {
    content: '';
    display: block
    clear: both;
}

2. 应用-替换标签

<style type="text/css">
    .bubble {
        display: inline-block;
        padding: 8px 16px;
        background: red;
        position: relative;
    }
    .bubble:before {
        content: '';
    }
    .bubble:before {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-top: 1px solid red;
        border-right: 1px solid red;
        position: absolute;
        top: -6px;
        transform: rotateZ(-45deg);
    }
</style>
<div class="bubble">hello,bubble</div>

运行结果

3. css icon