网页开发学习笔记三: HTML选择器

时间：2017-02-26 12:07:00 阅读：262 评论：0 收藏：0 [点我收藏+]

选择器是一个选择标签的过程

标签选择器　　标签{属性: 值; 属性:值;}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
     /*样式表内容 */
        div{
            font-size: 50px;
            color: orange;
            background-color: rgb(0, 1, 0);
            width: 300px;
            height: 200px;
        }

        p{
            font-size: 20px;
            color: #00ffff;
        }
    </style>

</head>

<body>
 
    <div>AAAAA</div>
    <div>BBBBB</div>

    <p>CCCCC</p>
    <p>DDDDD</p>

    <div>AAAAA</div>

</body>
</html>

类选择器　　.自定义类名{属性: 值; 属性: 值}
- 特点: 谁调用, 谁生效
  - 一个标签只可以调用多个类选择器
  - 多个标签可以调用同一个类选择器
- 类选择器的命名规则
  - 不能使用数字开头
  - 不能使用特殊符号或者特殊符号开头( _ 除外 ) 来定义类名
  - 不建议使用汉字来命名.
  - 不建议使用属性或者属性的值来定义类名

<!DOCTYPE html>
<html>
<head>
    <title>Doucment</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            font-size: 40px;
            color: #ff0000;
            background-color: rgb(255, 222, 111);
            width: 400px;
            height: 200px;
        }

        .miss{
            text-indent: 2em;
            text-align: right;
        }

        .G{
            font-size: 200px;
            color: blue;

        }

        .o1{
            font-size: 200px;
            color: #990000;
        }

        .o2{
            font-size: 200px;
            color: orange;
        }

        .g{
            font-size: 200px;
            color: blue;
        }

        .l{
            font-size: 200px;
            color: #009900;
        }

        .e{
            font-size: 200px;
            color: orange;
        }
    </style>
</head>
<body>

    <div class="box miss">AAAAA</div>
    <div>BBBBB</div>

    <p class="box">CCCCC</p>
    <p>DDDDD</p>

    <span class="box">EEEEE</span>

    <br>
    <br>
    <br>

    <span class="G">G</span>
    <span class="o1">o</span>
    <span class="o2">o</span>
    <span class="g">g</span>
    <span class="l">l</span>
    <span class="e">e</span>

</body>
</html>

ID 选择器　　#自定义名称{属性: 值; 属性: 值}
- 特点
  - 一个 ID 选择器在一个页面只能使用一次, 如果使用 2 次或者 3 次以上, 不符合 w3c 规范, JS 调用会出问题
  - 一个标签只能调用一个 ID 选择器
  - 一个标签只可以同时调用类选择器和 ID 选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            font-size: 40px;
            color: rgb(0, 0, 255);
            background-color: rgb(255, 255, 0);
        }

        #miss{
            text-align: center;
        }

        .box{
            text-indent: 2em;
        }
    </style>
</head>
<body>

    <div id="box" class="box">AAAAA</div>
    <div>BBBBB</div>

    <p>CCCCC</p>
    <p>DDDDD</p>

</body>
</html>

通配符选择器(不推荐使用)　　*{属性: 值; 属性: 值}
- 特点: 给所有的标签都使用相同的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">

        *{
            font-size: 100px;
            color: red;
            
        }
        
    </style>
</head>
<body>

    <div>AAAAA</div>
    <div>BBBBB</div>

    <p>CCCCC</p>
    <p>DDDDD</p>

    <span>EEEEE</span>


</body>
</html>

交集选择器　　标签(选择器) + 选择器{属性: 值}
- 特点: 既要满足使用了标签(选择器), 还要满足使用了类(ID)选择器

<head>
    <meta charset="utf-8">
    <title></title>

    <style type="text/css">
        .box{
            font-size: 50px;
        }

        div.box{
            color: red;
        }

        #miss{
            color: orange;
        }

        div#miss{
            width: 400px;
            height: 300px;
            background-color: green;
        }

        .box#miss{
            width: 400px;
            height: 400px;
            background-color: orange;
        }
    </style>
</head>
<body>

    <div class="box" id="miss">AAAAA</div>

    <p class="box">BBBBB</p>

    <div id="miss">CCCCC</div>

</body>
</html>

后代选择器　　选择器(标签) + 空格 + 选择器(标签){属性: 值}
- 特点: 可以无限次隔代只要能代表标签, 标签类选择器 ID

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            font-size: 40px;
            color: red;
        }

        div p span{
            font-size: 50px;
        }

        .box span{
            background-color: blue;
        }

        .box .miss{
            color: red;
        }
    </style>
</head>
<body>

    <div class="box">
        <p>
            <span class="miss">AAAAA</span>
        </p>
    </div>


    <div class="box">
        <span>BBBBB</span>
    </div>

</body>
</html>

子代选择器　　选择器>选择器{属性: 值}
- 特点: 选中的直接下一代元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        div>span{
            color: red;
            font-size: 40px;
        }

        p>span{
            color: green;
            font-size: 40px;
        }
        
    </style>
</head>
<body>

    <div>
        <p>
            <span>AAAAA</span>
        </p>

        <span>BBBBB</span>
    </div>

</body>
</html>

并集选择器　　选择器,选择器,选择器{属性: 值}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box,#miss,span,h1{
            font-size: 100px;
            color: #fff;
            background-color: green;
        }
    </style>
</head>
<body>

    <div class="box">AAAAA</div>

    <p id="miss">BBBBB</p>

    <span>CCCCC</span>

    <h1>DDDDD</h1>

</body>
</html>

网页开发学习笔记三: HTML选择器

标签：空格 rgb 符号推荐无限自定义 enter log 通配符

原文地址：http://www.cnblogs.com/fanxiaocong/p/6443919.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行