zoukankan      html  css  js  c++  java
  • css交集选择器、并集选择器、兄弟选择器

    一,交集选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>15-css交集选择器.html</title>
        <!--
            交集选择器,相交的部分就是要设置属性值的标签
            1,格式:
            选择器1选择器2...{
                属性:值;
            }
            2,注意点:
            (1),选择器之间没有任何的连接符号
            (2),选择器可以是标签名称,也可以是id、class名称
            (3),交集选择器仅仅是了解
        -->
        <style>
            p.para1{
                color: red;
            }
        </style>
    </head>
    <body>
    
    <p>我是段落</p>
    <p>我是段落</p>
    <p class="para1">我是段落</p>
    <p class="para1">我是段落</p>
    <p>我是段落</p>
    </body>
    </html>


    二,并集选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>16-css并集选择器.html</title>
        <!--
            并集选择器
            1,格式:
            选择器1,选择器2,...{
                    属性:值;
               }
            2,注意点:
            (1),选择器之间利用,连接
            (2),选择器可以是标签名称,也可以是id、class名称
        -->
        <style>
            .ht,.para{
                color: red;
            }
        </style>
    </head>
    <body>
    
    <h1 class="ht">我是头</h1>
    <p class="para">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    </body>
    </html>


    三,兄弟选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>17-css兄弟选择器.html</title>
        <!--
            兄弟选择器,只选中同级的标签
            1,相邻兄弟兄弟选择(css2)
            格式:
            选择器1+选择器2{
                属性:值;
            }
            注意点:
            (1),相邻选择器必须用+链接
            (2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签
    
            2,通用兄弟选择器(css3),指定选择器后边特定的所有选择器都被选中
            格式:
            选择器1~选择器2{
                属性:值;
            }
        -->
        <style>
            /*h1+p{*/
                /*color: red;*/
            /*}*/
            h1~p{
                color: red;
            }
        </style>
    </head>
    <body>
    <!--<h1>我是标题</h1>-->
    <!--<a href="#">我是超级链接</a>-->
    <!--<p>我是段落</p>-->
    <!--<p>我是段落</p>-->
    <!--<p>我是段落</p>-->
    <!--<h1>我是标题</h1>-->
    <!--<p>我是段落</p>-->
    <!--<p>我是段落</p>-->
    <!--<p>我是段落</p>-->
    
    <h1>我是标题</h1>
    <a href="#">我是超级链接</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是标题</h1>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    </body>
    </html>
     
    我们都是从菜鸟开始 决定我们成为什么样人的,不是我们的能力,而是我们的选择。
  • 相关阅读:
    Spring MVC 学习笔记3
    Spring MVC 学习笔记2
    Spring MVC 学习笔记1
    jsp 传多个值给后端
    如何使32位Win7支持超过4GB的内存,而不装64位
    Java | 基础归纳 | Gson && Json
    快速矩阵 | 入门 | 矩阵乘法次数计算
    Jquery | 基础 | jQuery表单对象属性过滤选择器
    Jquery | 基础 | 属性过滤选择器
    JSP | 基础 | JSP行为 | incline && forward
  • 原文地址:https://www.cnblogs.com/zhengyuan1314/p/7040129.html
Copyright © 2011-2022 走看看