CSS - 选择器(标签选择器、类选择器、ID选择器)

标题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS选择器</title>
    <!-- 
        CSS选择器类型:标签选择器、类选择器、ID选择器
     -->
    <style type="text/css">
        /* 标签选择器 */
        p{
            color:red;
        }
        li{
            font-size:12px;
        }
        /* 类选择器 */
        .db{
            font-size:20px;
            color:blue;
        }
        /* ID选择器 */
        #welcome{
            font-weight: bold;
            text-decoration: underline;
        }
        /* 复合选择器 */
        li.itany{
            font-size:30px;
            color:yellow;
        }
        li#wbs{
            font-family: 黑体;
            color:pink;
        }
        /* 嵌套选择器 */
        p span{
            font-size:35px;
            color:#ff7300;
        }
        p span#huogai{
            color:green;
        }
        /* 集体声明 */
        p,p span#huogai{
            font-size:25px;
        }
    </style>
</head>
<body>
    <p id="welcome">你好,欢迎访问贵美商城!<span id="huogai">不是一般的活该</span></p>
    <ul>
        <li class="db">家用电器</li>
        <li>大家电</li>
        <li>大家电</li>
        <li>大家电</li>
        <li class="itany">大家电</li>
        <li>大家电</li>
        <li>大家电</li>
        <li>大家电</li>
        <li>大家电</li>
        <li>大家电</li>
    </ul>
    <span>真活该</span>
    <ul>
        <li class="db">日用百货</li>
        <li>洗衣粉</li>
        <li>洗衣粉</li>
        <li>洗衣粉</li>
        <li id="wbs">洗衣粉</li>
        <li>洗衣粉</li>
        <li>洗衣粉</li>
        <li>洗衣粉</li>
        <li>洗衣粉</li>
        <li>洗衣粉</li>
        <li>洗衣粉</li>
    </ul>
    <p>嘻嘻哈哈嘿嘿,活该你学不会!<span>活该</span></p>
</body>
</html>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。