zoukankan      html  css  js  c++  java
  • 第五章 选择器的声明

    1、集体声明

    在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用集体声明的方法,将风格相同的CSS选择器同时声明。

    <head>
    <title>集体声明</title>
    <style type="text/css">
    <!--
    h1,h2,h3,h4,h5,p{          /*集体声明*/
        color:purple;
        font-size:15px;
    }
    h2.special,.special,#one{     /*集体声明*/
        text-decoration:underline;
    }
    -->
    </style>
    </head>
    <body>
    <h1>集体声明h1</h1>
    <h2 class="special">集体声明h2</h2>
    <h3>集体声明h3</h3>
    <h4>集体声明h4</h4>
    <h5>集体声明h5</h5>
    <p>集体声明p1</p>
    <p class="special">集体声明p2</p>
    <p id="one">集体声明p3</p>
    </body>
    </html>

    对于实际网站中的一些小型网页,例如弹出的小对话框和上传附件的小窗口等,希望这些页面中所有的标记都使用同一种CSS样式,但有不希望逐个来加入集体声明列表,这是可以利用全局声明符号“*”。代码大大缩减,在一些小页面中特别实用。

    <style type="text/css">
    <!--
    *{            /*全局声明符号*/
        color:purple;
        font-size:15px;
    }
    h2.special,.special,#one{     /*集体声明*/
        text-decoration:underline;
    }
    -->
    </style>

    2、选择器的嵌套

    在CSS选择器中,还可以通过嵌套的方式,对特殊位置的HTML标记进行声明,例如当<p>与</P>之间包含<b></b>标记是,就可以使用嵌套选择器进行相应的控制。

    <head>
    <title>CSS选择器的嵌套声明</title>
    <style type="text/css">
    <!--
    p b{
        color:maroon;                /*嵌套声明*/
        text-decoration:underline;
    }
    -->
    </style>
    </head>
    <body>
        <p>嵌套使<b>用CSS</b>标记的方法</p>嵌套之外的<b>标记</b>不生效
    </body>
    </html>

    嵌套选择器的使用非常广泛,不只是嵌套的标记本身,类别选择器和ID选择器都可以进行嵌套。

    <style type="text/css">
    <!--
    p b{
        color:maroon;                /*嵌套声明*/
        text-decoration:underline;
    }
    .special i{       /*使用了属性special的标记里面包含的<i>*/
        color:red;
    }
    #one li{           /*ID为one的标记里面包含的<li>*/
        padding-left:5px;
    }
    td.top.top1 strong{     /*多层嵌套同样使用   使用了.top类别的<td>标记中包含的.top1类别的标记,其中包含<strong>标记*/
        font-size:16px;
    }
    -->
    </style>
    <td class="top">
       <p class=".top1"> 其他内容<strong>CSS控制的部分</strong>其他内容</p>
    </td>

    注:在构建页面HTML框架是通常只给外层标记(父标记)定义class或者id,内层标记(子标记)能通过嵌套表示的则利用嵌套的方式,而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时,才单独进行声明,例如一个ul标记中包含多个li标记,而需要对其中某个li单独设置CSS样式是才赋给该li一个单独的id或者类别,而其他li同样采用ul li{} 的嵌套方法来设置。

  • 相关阅读:
    leetcode-19-merge
    leetcode-18-remove
    R-codes-tips
    python-bioInfo-codes-2
    Java-framework-Vaadin
    leetcode-17-BST
    生物信息学-知识笔记-1
    leetcode-16-greedyAlgorithm
    perl-tips-1
    计算机网络HTTP、TCP/IP包
  • 原文地址:https://www.cnblogs.com/Cassiel-685/p/4346612.html
Copyright © 2011-2022 走看看