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

    HTML标记定义

      <p>...</p>

      p { 属性:属性值 ; 属性1:属性值1 }

      p可以叫做选择器,定义那个标记中的内容执行其中的样式

      一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不加;

    Class定义

      <p class="oijwd">...</p>

      class定义是以“.”开始

      .oijwd { 属性:属性值 ; 属性1:属性值1 }

    ID定义

      <p id="oid">...</p>

      ID定义是以“#”开始

      #oid { 属性:属性值 ; 属性1:属性值1 }

    优先级问题

      ID>Class>HTML

      同级时选择离元素最近的一个

    组合选择器

      同时控制多个元素

      h1,h2,h3,p,.div,#abc { font-size:14px; color:red; }

      选择器组合可以用“,”隔开

    伪元素选择器

      a:link  正常链接的样式

      a:hover  鼠标放上去的样式

      a:active  选择链接时的样式

      a:visited  已经访问过的链接样式

    <!doctype html>
    <html>
        <head>
            <title>定义CSS样式(CSS选择器)</title>
            <meta charset="utf-8">
            <style type="text/css">
                /*
                p { color:red; font-size:28px; }
                .p { color:green; font-size:28px; }
                .pp{ color:red; }
                #ppp { color:blue; }
                #ppp p { color:red; }
                
                div { color:red;  }
                .p { color:green;  }
                #pp {  color:blue;   }
                
                .p { color:red;  }
                .p { color:green;  }
                    
                h1 , h2 , h3 , h4 , p, .div ,#div{ color:red ; font-size:40px } 
                
                */
                a:link { color:red; }
                a:hover { color:green; }
                a:active { color:yellow; }
                a:visited { color:blue; }
                
                
            </style>
        </head>
        <body>
            <!--
            <div id="pp" class="p">
                <h1>麦子学院麦子学院麦子学院</h1>
                <h2>麦子学院麦子学院麦子学院</h2>
                <h3>麦子学院麦子学院麦子学院</h3>
                <h4>麦子学院麦子学院麦子学院</h4>
            </div>
            <p>
            麦子学院麦子学院麦子学院
            </p>
            <div class="div">
            麦子学院麦子学院麦子学院
            </div>
            
            <div id="div">
            麦子学院麦子学院麦子学院
            </div>
            -->
            <a href="http://www.baidu.com" target="_blank">百度</a>
            <a href="http://www.baidu.com/ddddd" target="_blank">百度ddd</a>
            <a href="http://www.baidu.com/ddddsasad" target="_blank">百度dasdd</a>
            <a href="http://www.baidu.com/dasasadddd" target="_blank">百度asaddd</a>
            <a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddsad</a>
            <a href="http://www.baidu.com/dsasaddd" target="_blank">百度ddd</a>
            <a href="http://www.baidu.com/dddasasdd" target="_blank">百度asaddd</a>
            <a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddd</a>
        </body>
    </html>
  • 相关阅读:
    rest framework 认证 权限 频率
    rest framework 视图,路由
    rest framework 序列化
    10.3 Vue 路由系统
    10.4 Vue 父子传值
    10.2 Vue 环境安装
    10.1 ES6 的新增特性以及简单语法
    Django 跨域请求处理
    20190827 On Java8 第十四章 流式编程
    20190825 On Java8 第十三章 函数式编程
  • 原文地址:https://www.cnblogs.com/chy-op/p/9984096.html
Copyright © 2011-2022 走看看