zoukankan      html  css  js  c++  java
  • 选择器

    标签选择器

    <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                /*标签选择器*/
                div {
                    color: red;
                }
            </style>
        </head>
        <body>
            <div>打法</div>
        </body>


    通用选择器(通配符)

        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                * {
                    color: red;
                }
            </style>
        </head>
        <body>
            <div>1</div>
            <p>1</p>
            <h1>1</h1>
        </body>


    类选择器:

    <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .cl {
                    color: red;
                }
                /*标签的类名和选择器的类名一致,一个标签可以有多个类名,一个类名也可以给多个标签使用*/
            </style>
        </head>
        <body>
            <div>1</div>
            <p class="cl ft">1</p>
            <h1 class="cl">1</h1>
        </body>


    ID选择器:

    <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #box {
                    color: red;
                }
                /*一个标签只能有一个ID,一个ID也只能给一个标签使用*/
            </style>
        </head>
        <body>
            <div id="box">1</div>
            <div>1</div>
            <h1>1</h1>
        </body>


    后代选择器:

    <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .father p {
                    color: red;
                }
            </style>
        </head>
        <body>
            <div class="father">
                <div>
                    <p>1</p>
                </div>
                <p>1</p>
                <h1>1</h1>
            </div>
        </body>


    子级选择器:

    <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .father>p {
                    color: red;
                }
            </style>
        </head>
        <body>
            <div class="father">
                <div>
                    <p>1</p>
                </div>
                <p>1</p>
            </div>
        </body>


    相邻兄弟选择器:

    <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .son+p {
                    color: red;
                }
            </style>
        </head>
        <body>
            <div class="father">
                <p>1</p>
                <div class="son">1</div>
                <p>1</p>
                <div>1</div>
                <p>1</p>
            </div>
        </body>


    通用兄弟选择器:

    <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .son~p {
                    color: red;
                }
            </style>
        </head>
        <body>
            <div class="father">
                <p>1</p>
                <div class="son">1</div>
                <p>1</p>
                <div>
                    <p>1</p>
                </div>
                <p>1</p>
            </div>
        </body>

  • 相关阅读:
    【python】使用matplotlib绘制多个子图时出现标题、轴标签等文字重叠的解决
    【python】反转字典键值
    关于MacOs python 安装tensorflow1.8版本时出现的问题及解决
    【Python】爬取百度图片进行人脸识别
    【转载】利用python、tensorflow、opencv实现人脸识别
    ubuntu16.04源码方式安装配置nginx
    ubuntu16.04 14.04更换源
    stdClass类
    redis常用配置项
    redis主从模式
  • 原文地址:https://www.cnblogs.com/gyix/p/10098392.html
Copyright © 2011-2022 走看看