html学习6-CSDN博客

本文链接：https://blog.csdn.net/svsghshd/article/details/128936065

选择器

标签选择器

格式：标签名{}

<p style = "color:red;">html</p>
<!--把p标签里面的文字设置成红色-->

类名选择器

在标签内通过class设置类名

格式：.类名{}

<head>
    <style>
        .a{
            color: red;
        }
    </style>
</head>
<body>
    <p class="a">html</html></p>
</body>

id选择器

唯一标识，每个标签只有一个id

格式：#id值{}

<head>
    <style>
        #id{
            color: red;
        }
    </style>
</head>
<body>
    <p id="a">html</p>
</body>

通配符

*，选中页面中的所有标签

<head>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <p>html</p>
    <p>css</p>
</body>

优先级：行内样式>id选择器>类名选择器>标签选择器>通配符选择器

*{color:red !important;}

在通配符里加入!important会使通配符获得最高优先级，不推荐使用

层次选择器

后代：标签1 标签2{}

<head>
    <style>
        ul a{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
<!--两个a标签都会变红-->
        <a href="">html1</a>
        <li></li>
        <li></li>
        <li></li>
        <li>
                <a href="">html2</a>
        </li>
    </ul>
</body>

子代：标签1>标签2{}

<head>
    <style>
        ul>a{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
<!--只有第一个a标签颜色变红-->
        <a href="">html1</a>
        <li>html</li>
        <li>html2</li>
        <li>html3</li>
        <p>
            <li>
                <a href="">html2</a>
            </li>
        </p>
    </ul>
</body>

后代只要包含子代就行

子代只能是父代的第一层

格式：元素1+元素2

==>选中元素1下面第一个相邻的元素2

        ul>a + li{
            color: red;
        }

选中ul里面的a元素下面相邻的li元素，如果相邻的不是li，就无法选中

格式：元素1~元素2

==>选中元素1下面的所有的元素2

        ul>a ~ li{
            color: red;
        }

选中ul下面a元素下面的所有li元素，不管是否相邻

结构选择器

元素1 元素2：first - child{}

<head>
    <style>
<!--系统会寻找ul下的第一个元素，如果是li则执行属性命令，如果不是，则属性命令无效-->
        ul li:first - child{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <a href="">html1</a>
        <span></span>
        <li></li>
        <li></li>
        <li></li>
        <li>
            <a href="">html2</a>
        </li>
    </ul>
</body>

元素1 元素2：first - of - type{}

<head>
    <style>
<!--系统会寻找ul下的第一个li元素执行属性命令-->
        ul li:first-of-type{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <a href="">html1</a>
        <span></span>
        <li></li>
        <li></li>
        <li></li>
        <li>
            <a href="">html2</a>
        </li>
    </ul>
</body>

把first改为last，则寻找最后一个元素，效果同理。

ul > li:nth -child(){}

<head>
    <style>
<!--系统会先寻找ul下的第三个元素，如果是li，执行属性命令-->
        ul>li:nth-child(3){
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <a href="">html1</a>
        <span></span>
        <li></li>
        <li></li>
        <li></li>
        <li>
            <a href="">html2</a>
        </li>
    </ul>
</body>

ul>li:nth-of-type(3){}

<head>
    <style>
<!--系统会先寻找ul下的所有li元素，再选择第三个，执行属性命令-->
        ul>li:nth-of-type(3){
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <a href="">html1</a>
        <span></span>
        <li></li>
        <li></li>
        <li></li>
        <li>
            <a href="">html2</a>
        </li>
    </ul>
</body>

ul>li:not(:nth-child( num )){}

<head>
    <style>
<!--系统会先排除第三个元素（不管第三个元素是不是li），其他所有li执行属性命令-->
         ul>li:not(:nth-child(3)){
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <a href="">html1</a>
        <span></span>
        <li></li>
        <li></li>
        <li></li>
        <li>
            <a href="">html2</a>
        </li>
    </ul>
</body>