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属性选择器是以 []起手作为标志 的
原文地址:https://www.cnblogs.com/liuyang521/p/14501935.html