0.前言:无论学什么，前端都是绕不开的一门技术，对于不同的人需求不同，作为一个python开发者不仅需要能读懂基本的html/css以及js代码，还要会使用它的常用的标签，以及了解比较有用的标签，把逻辑捋通，知道有什么才能用什么。需要用的时候查一下资料文档以及博客笔记。当然，如果能记住并使用它就更好不过了。

1.CSS的语法场景(优先级)：

　　1.行内：在当前标记中加入style属性。

　　 2嵌入：最常用的方式，<style></style>

　　 3.外链：<style>@import url(" 路径")

　　 4.导入：写一个单独的css文件。

2，CSS选择器:

　　1,常用的选择器:

　　　　优先级问题: 内联标签-id选择器-类选择器-标签选择器 (id:100 class 10 tag 1) 不可进位

　　　　　　　以下代码的优先级是什么，代码颜色是什么？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

 <style>

  p{

            color:green;

        }

        .demo{

        color:yellow;

        }

        #ww{

        color:red;

        }

    </style>

</head>

<body>

<p class="demo" id="ww" style="color:black"><label style="color:white">测试</label></p>

</body>

</html>

<!--label >style>id >class>tag-->

<!--output:白色-->

可见，当多个选择器修饰一个属性时，优先级最高的选择器生效。

　　2. 其余选择器

　　　　后代选择器li a{}

　　　　全局选择器，用于去除与浏览器之间的边距　　　　

　　　　　伪类选择器：

1. a:link和a等同
2. a:visited访问过的样子
3. a:hover 选择鼠标指针浮动在其上的元素，适用于所有元素
4. active ：点击样式
5. after、before：在链接之前之后添加内容　　a::after{content:"#"}

　　3毗邻、弟弟、儿子选择器：

  <--毗邻选择器，向下选择-->

        div+p {

        color:yellow;

        }

<!--儿子选择器-->

    div>p

   /*弟弟选择器*/
　　a~p{

            color:tomato;

        }

        a~label{

            color: aqua;

        }

 <div>

            <a href="">弟弟选择器</a>

            <p>哈哈</p>

            <label for="">弟弟二</label>

    </div>

　　3属性选择器:

[s9]

        {

            color:red;

        }

        [s9=good]{

        color:yellow;

        }

<p s9="hao">好标签</p>

<p s9="good">good标签</p>

秒客网

笔记一:CSS选择器