首页 > 代码库 > 类选择器

类选择器

2024-09-04 06:28:05   219人阅读

类选择器

<style>.one { color: blue; text-decoration: underline } .two { font-size: 20px; background-color: yellow } .three { color: red } p.one { font-weight: bold; font-style: italic }</style>

 

我是老大

我是老二

我是老三

大嫂
二嫂
三嫂

 

老五告诉老四老三的老二老大了

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*.one:类选择器，类选择器在类名前必须加 . 符号*/
        .one{
            color: blue;
            text-decoration: underline;
        }
        .two{
            font-size: 20px;
            background-color: yellow;
        }
        .three{
            color: red;
        }
        /*one类的所有p标签加样式*/
        p.one{
            font-weight: bold;
            font-style: italic;
            /*italic 斜体字 bold 加粗*/
        }
    </style>
</head>
<body>
    <!--class属性：类，给元素添加一个类，多个元素可以使用同一个类-->
    <P class="one">我是老大</P>
    <P class="two">我是老二</P>
    <!--一个元素可以加多个类，用空格隔开-->
    <P class="three two">我是老三</P>

    <div class="three">大嫂</div>
    <div class="two">二嫂</div>
    <div class="one">三嫂</div>
    <br>
    <div>老五告诉老四老三的老二老大了</div>
</body>
</html>

　　

类选择器


联系
我们