2020-10-03

前端学习day2：伪类相关

伪类（不存在的类，特殊的类）
-伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素…
-伪类一般情况下都是使用:开头
:first-child第一个子元素
:last-child最后一个子元素
:nth-child(n)选中第n个子元素
特殊值:
n:第n个,n的范围e到正无穷
2n或even表示选中偶数位的元素
2n+1 或odd 表示选中奇数位的元素

<ul id="two">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
    
    <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ol>

#two > li:first-child{
    color: magenta;
}

#two > li:last-child{
    color: maroon;
}

ol > li:nth-child(even){
    color: mediumblue;
}

---

:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序

<ul id="one">
        <span>第零个</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
     </ul>

#one > li:first-of-type{
    color: orangered;
 }

第一个显示为橘黄色

---

:not()否定伪类：将符合条件的元素从选择器中去除

<ul id="three">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
     </ul>

 #three > li:not(:nth-child(3)){
     color: orangered;
 }

第三个颜色不会改变

---

超链接的伪类

<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com">百度一下</a>

:link用来表示没访间过的链接（正常的链接)
:visited 用来表示访间过的链接，由于隐私的原因，所以visited这个伪类只能修改链接的颜色
:hover用来表示鼠标移入的状态
:active用来表示鼠标点击
:hover和:active其他标签也可以用

a:link{
     color: orangered;
 }

 a:visited{
     color: palegreen;
 }

 a:active{
     color: saddlebrown;
 }
 a:hover{
     color: seashell;
 }

---

伪元素
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用::开头
::first-letter表示第一个字母
::first-line 表示第一行
::selection表示选中的内容
::before元素的开始
::after元素的最后
before 和after 必须结合content属性来使用，并且无法被鼠标选中

<p id="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit beatae, inventore voluptas recusandae facere qui nisi saepe neque. Nobis, nostrum laudantium nemo laboriosam eligendi voluptatem id ab explicabo accusantium eius.Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eum minus nisi in illo libero quia, quisquam dolorum ratione ad? Blanditiis suscipit magni nam debitis velit amet aut asperiores cumque!</p>

 #four::first-letter{
     font-size: 30px;
     color: springgreen;
 }
 #four::first-line{
     background-color: tomato;
 }
 #four::selection{
     background-color: yellow;
 }
 #four::before{
     content: 'Hello';
     color: turquoise;
 }
 #four::after{
     content: 'world';
     color: turquoise;
 }