ID选择器

原创作品，未经许可不得转载

以下是我们在上一节课中做的练习：


<!DOCTYPE html>
<html>
<head>
    <title>CSS基础课程</title>
    <style type="text/css">
        body {
            margin: 0px;
        }

        a {
            color: #ffffff;
        }

            a:hover {
                color: #ff0000;
            }

        div[name=head] {
            padding: 10px;
            background-color: #000000;
        }
    </style>
</head>
<body>
    <div name="head">
        <a href="/">首页</a>
        <a href="/" style="margin-left:10px">登录页</a>
    </div>
    <div>
        <h1>登录</h1>
        <div id="reg" style="background-color:#d8d8e6;padding:20px">
            <a href="http://www.var365.net" target="_blank">还没有帐号？点击这里注册</a>
        </div>
    </div>
</body>
</html>

若要将<div id="reg">的样式也移到<style>元素内，你可能首先想到的是在<style>元素内定义一个div[id=reg]选择器，就像下面这样：


div[id=reg] {
    padding: 20px;
    background-color: #d8d8e6;
}

这样写当然是可以的。因为id也是元素的属性，所以可以像这样使用属性选择器。

但更常规的、比较推荐的方法是使用ID选择器，就像下面这样：


#reg {
    padding: 20px;
    background-color: #d8d8e6;
}

#后面跟着的是元素的id属性的值。#reg的意思是：将样式应用到id属性的值是reg的元素上。

完整代码如下：


<!DOCTYPE html>
<html>
<head>
    <title>CSS基础课程</title>
    <style type="text/css">
        body {
            margin: 0px;
        }

        a {
            color: #ffffff;
        }

            a:hover {
                color: #ff0000;
            }

        div[name=head] {
            padding: 10px;
            background-color: #000000;
        }
        
        #reg{
            background-color: #d8d8e6;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div name="head">
        <a href="/">首页</a>
        <a href="/" style="margin-left:10px">登录页</a>
    </div>
    <div>
        <h1>登录</h1>
        <div id="reg">
            <a href="http://www.var365.net" target="_blank">还没有帐号？点击这里注册</a>
        </div>
    </div>
</body>
</html>

练习

12/12

http://localhost/