css学习笔记

 

css语法:

  格式:

  • 选择器{

      属性名1:属性值1;

      属性名2:属性值2;

       .........

}

  • 选择器:筛选具有像是特征的元素
  • 注意每一对属性需要;隔开 ,最后一对属性可以不加

基础选择器:

  1.  id选择器:选择具体的id属性值得元素,建议在一个html页面中id值唯一
    •  语法: #id属性值{ }
  2. 元素选择器:具有相同标签的名称的元素
    •  语法: 标签名称{ }
    •    注意:id选择器优先级高于元素选择器
  3. 类选择器:选择具有相同的class属性值得元素
    •  语法:.class属性值{ }
    •     注意:类选择器优先级高于元素选择器
  4. 扩展选择器
    1. 选择所有元素:
      •  语法: *{ }
    2. 并集选择器
      •   语法: 选择器1,选择器2{ }
    3. 子选择器:
      •   语法:选择器1 选择器2{  }

更多的选择器可以在api文档中查看

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础的选择器</title>
    <style>
        #div1{
            color: red;
            font-size: 30px;
        }
        .div2{
            color: green;
        }
        p{
            color: aqua;
        }
        div p{
            color: darkgray;
        }


    </style>

</head>
<body>

<div id="div1"> id选择器 </div>
<div class="div2">类选择器</div>
<p>元素选择器呀</p>
<div> <p> 子选择器</p></div>


</body>
</html>

 

posted @ 2020-01-14 20:05  Mr.落魄书生  阅读(19)  评论(0编辑  收藏