选择器 - 阿霖找BUG

当选择器有同一个元素是优先级为id>类>标签选择器

元素不同时，可以综合。

id选择器，全局唯一，只能有一个。

class可以跨标签。

层次选择器：

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

<style>
    /*后代选择器*/
    body h1{
        background: #9055d7;
    }
/*    子类选择器*/
    body>h1{
        background: #64c62f;
    }
/*    相邻选择器（向下，一个）*/
    .ling +h1{
        background: aqua;
    }
/*    通用选择器(向下所有)*/
    .ling~h1{
        background: aliceblue;
    }
</style>
<body>
<h1 class="ling">h1</h1>
<h1>h2</h1>
<h1>h3</h1>
<ul>
    <li>
        <h1>4</h1>
    </li>
    <li>
        <h1>5</h1>
    </li>
</ul>

</body>
</html>

结构伪类选择器：

标签或者类乃至id后面加个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul下li的第一个元素*/
        ul li:first-child{
            background: #9055d7;
        }
        /*ul下li的最后一个元素*/
        ul li:last-child{
            background: #873535;
        }
    /*    选中h1：定位到父元素，选择当前第一个元素
    选中的父类第一个元素是定位到的才有用
    */
        h1:nth-child(1){
            background: aqua;
        }
    /*    选中父类下的h1中第一个元素*/
        h1:nth-of-type(1){
            background: aquamarine;
        }
    </style>
</head>
<body>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

posted on 2022-07-09 01:52 阿霖找BUG 阅读(42) 评论(0) 收藏举报