您的位置：首页 > Web前端 > CSS

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

2015-04-27 11:28 344 查看

标题

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航