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>

  • 相关阅读:
    2019牛客暑期多校训练营(第二场)H Second Large Rectangle
    HDU -1506 Largest Rectangle in a Histogram&&51nod 1158 全是1的最大子矩阵 (单调栈)
    吉哥系列故事——完美队形II(马拉车算法)
    Theme Section
    激光雷达和毫米波雷达
    模型压缩95%:Lite Transformer,MIT韩松等人
    分布式深度学习DDL解析
    TOF摄像机可以替代Flash激光雷达吗?
    毫米波雷达分类和技术方案
    高精地图与自动驾驶(下)
  • 原文地址:https://www.cnblogs.com/gyix/p/10098392.html
Copyright © 2011-2022 走看看