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属性选择器是以 []起手作为标志 的
    
  • 相关阅读:
    有关选择的心法(2)
    系统故障排查和确认是否被入侵
    伪善还是妥协
    建恒信安日志审计部署
    有关选择的心法
    数据统治世界----37%原则
    控制二分法
    磁盘空间耗尽导致服务器无法启动
    Linux 标准目录结构 FHS
    Linux入侵类问题排查思路
  • 原文地址:https://www.cnblogs.com/liuyang521/p/14501935.html
Copyright © 2011-2022 走看看