zoukankan      html  css  js  c++  java
  • 7、css基本选择器、层叠样式

    1、css基本选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            /*#d1 {*/
            /*    color: greenyellow;*/
            /*}*/
        /*    类选择器*/
        /*    .c1{  找到class里面所有包含c1的标签*/
        /*        color:red;*/
        /*    }*/
        /*    元素选择器*/
        /*    span {      找到所有span标签*/
        /*        color:red;*/
        /*    }*/
        /*    * {  将html页面上的标签全部找到*/
        /*        color:green;*/
        /*    }*/
        </style>
    </head>
    <body>
        <div id="d1" class="c1 c2">
            <p>div里面的p</p>
            <span>div里面的span</span>
        </div>
        <p id="d2" class="c1 c2">ppp</p>
        <span id="d3" class="c2">span111</span>
        <span id="d4" class="c3">span222</span>
    
    </body>
    </html>
    

    2、css层叠样式表

    /*单行注释*/
    /*
    多行注释
    */
    
    通常在写css样式的时候会用注释划定区域
    
    css的三种引入方式
        1、style标签内部直接书写
        <style>
            h1 {
                color:burlywood;
            }
        </style>
        2、link标签引入外部css文件(最正规的方式、解耦合)
            <link rel="stylesheet" href="mycss.css>
        3、行内式(一般不用)
            <h1 style="color:green">老板好,要妹纸吗<h1>
    
    css的学习流程
        1、先学如何查找
            css查找标签的方式
            后面所有框架封装的查找语句都是基于css来的
    
    css选择器
        基本选择器
            id选择器
            类选择器
            元素/标签选择器
            通用选择器
        组合选择器
        div span 后代选择器  拿所有层级
        div>span 二子选择器 只拿第一层级
        div+span 毗邻选择器 同级别紧挨着的下面第一个
        div~span 同级别下面所有的span
        属性选择器
           1、含有某个属性
           2、含有某个属性 并且有某个值
           3、含有某个属性并且有某个值某个标签
           ps属性选择器是以 []起手作为标志 的
    
  • 相关阅读:
    Uva 10779 collector's problem
    poj 2728 最优比率树(最小生成树问题)
    LA 3126 二分图匹配 最小路径覆盖
    poj 1149 最大流构图
    Step By Step(Java XML篇)
    Step By Step(Java 输入输出篇)
    Step By Step(Java 集合篇)
    Step By Step(Java 线程篇)
    Step By Step(Java 反射篇)
    Step By Step(Java 国际化篇)
  • 原文地址:https://www.cnblogs.com/liuyang521/p/14501935.html
Copyright © 2011-2022 走看看