伪类选择器

最新推荐文章于 2021-06-29 15:06:22 发布

守住⒈份信仰°

最新推荐文章于 2021-06-29 15:06:22 发布

阅读量234

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_43648337/article/details/108370282

版权

前端专栏收录该内容

22 篇文章

订阅专栏

利用选择器快速生成标签

CSS选择器在编码时的应用（类似快捷键）：利用选择器快速生成标签
举例：
1.输入ul>li按tab键：可快速生成一ul标签嵌套一个li标签。
2.输入ul+ul按tab键：可快速生成两个ul标签。
3.输入ul>li*5按tab键:可快速生成包含5个li标签的ul标签。

<!-- (利用选择器快速输入标签)输入ul>li按tab键 -->
    <ul>
        <li></li>
    </ul>
   <!-- （利用选择器快速输入标签）输入ul>li*5按tab键 -->
    <ul>
        
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

伪类选择器

伪类（不存在的类）：用来描述元素的特殊状态或位置（这种状态和位置不方便用其他方法来描述，或用其他方法来描述存在问题）。
比如：第一个子元素、被点击的元素、鼠标移入的元素等。
特点：一般都是：开头

常见伪类选择器

：first child 第一个子元素
：last child 最后一个子元素
：nth child（）选中第n个子元素，括号内填要选中的数字
：nth child（1）选中第一个子元素
特殊值：
：nth child（n）选中全部子元素
：nth child（2n或even）选中偶数位子元素
：nth child（2n+1或odd）选中奇数位子元素
注：以上这些伪类选择器都是根据所有的子元素进行排序。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
       /* （伪类选择器）将第一个li变红，根据所有子元素进行排序，
       但此时span是第一个子元素，所以失效 */
       ul>li:first-child{
           color: red;
       }
    </style>
</head>
<body>
    <ul>
        <span>0</span>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

： first-of-type 同类型元素的第一个子元素
： last-of-type 同类型元素的最后一个子元素
：nth-of-type（）同类型元素的第n个子元素
注：以上几个伪类选择器是在同类型元素中排序。
比喻的理解：一个家庭七个孩子，老大老二（不分男女）这样的称呼类似于所有元素进行排序，大儿子，二儿子这样的称呼类似于在同类型中排序。
：not （）否定伪类，将符合条件的元素从选择器中排除

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
       /* （伪类选择器）将第一个li变红 */
       ul>li:first-child{
           color: red;
       }
       /* （伪类选择器）将最后一个li变红 */
       ul>li:last-child{
           color: red;
       }
       /* （伪类选择器）选中第3个子元素 */
       ul>li:nth-child(3){
            color: red;
       }
       /* （伪类选择器）选中第偶数位子元素 */
       ul>li:nth-child(even){
            color: green;
       }
       /* （伪类选择器）选中同类型第一个子元素li */
       ul>li:first-of-type{
            color: green;
       }    
       /* （否定伪类）选中ul中的子元素li，
       除了第三个（所有元素排序中的第三个）
       这里为数字2那行 */
       ul>li:not(:nth-child(3)){
           color: yellowgreen;
       }
       
    </style>
</head>
<body>
    <ul>
        <span>0</span>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>