【无标题】html第三话之选择器_w3 html选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_46655061/article/details/126001795

html第三话
1.选择器：根据不同的需求将不同的标签选择出来。简单来说就暗示选择标签用的。示例如下：通过选择器来改变标签属性。

<!DOCTYPE html>
<!--通过改变选择器改变标签属性-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style>
    /*选择器就是根据不同的需求将不同的标签选择出来。简单来说就暗示选择标签用的*/
   /*标签选择器将同一标签设置为同一种样式*/
   /*可以用 .classname,直接用classname调用即可*/
     p {
        color: green;
    }
    div {
        color: pink;
    }
    .suibian {
        color: blue;
        font-size: 50px;
    }
</style>

<body>
    <p class="suibian">男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
    <ul>
        <li class="suibian">例会</li>
        <li>晚餐</li>
        <li>爱情</li>
        <li>面包</li>
    </ul>
</body>
</html>

2.选择器的分类：标签选择器，id选择器，类选择器，通配符选择器，使用方式如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<!--选择器-->
<style>
    /*标签选择器*/
    p{

    }
    /*类选择器*/
    .red {
        
        background-color: red;
        font-size: 35px;
    }
    .green {
        background-color: green;
        font-size: 35px;
    }
    .Red {
        color: red;
    }
    .fontsize {
        width: 100px;
        height: 100px;
    }
    /*id选择器。用#idname定义，在标签里用id = "idname"只能调用，别人切勿使用*/
    #pink {
        color: pink;
    }
    /*通配符选择器不需要去调用，自动就给所有的元素添加样式*/
   /*   *{

    }
       */
</style>
<body>
    <!--多类名就是将多个类名添加给同一个元素用空格隔开隔开-->
    <div class="red fontsize">红色</div>
    <div class="green fontsize">绿色</div>
    <div class="red fontsize">红色</div>
    <div class="Red fontsize">刘德华</div>
    <div id="pink">迈克尔 杰克逊</div>
</body>
</html>