网页学习者 发表于 2014-10-6 21:45:07

css 常用的选择器 ID选择器、类class选择器、标签选择器(div\p等、派生选择器)

css 常用的选择器 ID选择器、类class选择器、标签选择器(div\p等、派生选择器)


我们在初学css的时候,会经常用到这几个选择器,他们名称是以上的几个,通过选择器在css的控制来实现不同的效果,如下图

同时写了个代码,让大家看下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>28 css选择器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
        #test01{
                width:100px;
                height:50px;
                border:1px solid blue;
        }
        .test002{
                width:100px;
                height:50px;
                border:1px solid red;
        }
        div{
                width:100px;
                height:50px;
                background:orange;
                margin-bottom:10px;
        }

        div p{
                color:red;
        }

        /*p{
                color:red;
        }*/


</style>



</head>
    <body>
            <div id="test01">test001</div>
            <div class="test002"></div>
            <div>
                    普通div设置
                    <p>我是div中的P标签</p>

            </div>
            <p>我是独立的P标签</p>
    </body>
</html>


网页学习者 发表于 2014-10-6 22:01:10

在面对不同的选择器的时候,我们一定要记得,css控制的范围越精细,那么表示的优先级则是越高的。

如下代码:
<style>
        p{
                color:red;
        }
        .test002{
                color:green;
        }
        #test01{
                color:blue;
        }
        div #test01{
                color:pink;
        }
</style>
</head>
    <body>
            <div>
                    <p id="test01" class="test002">道勤网与您一起学习div+css</p>
            </div>
    </body>范围越小,越高的显示
页: [1]
查看完整版本: css 常用的选择器 ID选择器、类class选择器、标签选择器(div\p等、派生选择器)