css选择器

css语法
1.属性名和属性值之间使用：隔开
2.多对属性之间使用;隔开
3.最后一对属性可以不加分号

属性值 style=“根据css语法进行设置”

width:100px;
height:100px;

<div style="width:100px;height:100px;"><div>

 速记写法：
    简写形式：
        div
        盒子：内容区+内边距+边框+外边距

        内边距：padding-left；10px;
                padding-right；10px;
                padding-top；10px;
                padding-botton；10px;
        简写： 
            
        外边距 margin
            margin:1px;     【速写形式】外边距上右下左都有1px
            margin:1px 2px;         上下为1px;右左为2px
            margin:1px 2px 3px;      上1px ,右左2px,下3px
            margin:1px 2px 3px 4px;  上1px ,右px,下3px,左4px

    border:1px solid red;
    border-width:1px;
        border-top-width
        border-left-width
        border-botton-width
        border-right-width
    border-style
    border-color

3.css注释
    1.注释写法
    /*注释*/
    2.注释作用
        解释说明
        便于代码的维护和管理
    3.注释能否嵌套使用
        注释不能嵌套使用
    <div>
        <p>

        </p>
    </div>
    <!--注释内容-->
        /*

        */


4.HTML中引入css的方式：
    1.行内样式
        style属性
    2.内联样式
        style标签
        <style>
            css语法
        </style>
    3.外部引入
        创建一个以css.为后缀的文件
        link标签：优先解析css
        不建议使用@import url() ：优先解析html


5.引入方式的优先级：
    行内样式>内联/外部引入

    就近原则：哪一个样式更靠近元素，哪一个样式的优先级更高

​
1.选择器
​ 标签选择器：
​ 根据标签名称选择一类元素
​

id选择器：
    通过id属性选择一个元素
    #value
 
类选择器
    class
    .value
 
普遍选择器
    *
 
后代选择器：
    >：选择当前元素的直接子元素
    空格 ：选择当前元素的所有后代元素，包含孙代元素
 
兄弟选择器;
    +：选择当前元素之后的一个兄弟
    ~：选择当前元素之后的所有兄弟元素
属性选择器：
    根据元素属性选择一类元素
    [id]:选择当前页面中具有id属性的元素
    [class='one']:当前页面中具有class属性 并且属性值为one的元素
    [class~='ong']:当前页面中具有class属性，并且属性值之一为one的元素
    [class^='o']:选择当前页面中具有class属性，并且属性值以o开头
    [class$='o']:选择当前页面中具有class属性，并且属性值以o结尾
    [class*='o']:选择当前页面中具有class属性，并且属性值中包含o字符
多选择器：
    使用逗号隔开多个选择器
    div*5
    p*3
 
    div,p{
 
    }
    #one,p,.two{
 
    }
组合选择器：
    将多个选择其组合到一起使用
 
    div#one：选择当前页面中所有的div标签并且选择div标签中id为one的元素
 
    div.one{
 
    }
伪类选择器：
    :伪类名称
    :first-child
    :last-child
    :nth-child(number)
    :nth-child(odd)奇数
    :nth-child(even)偶数
 
    和状态相关的：
        :hover 当鼠标悬停在某个元素上时
        :active 当鼠标按下时的状态 
        :link 当前元素未被点击过的状态
        :visited 被访问过之后的状态
 
        书写顺序：
            link->visited->hover->active
伪元素选择器：
    ::伪元素名称
    <div>hello</div>
 
    ::first-letter ：第一个字符
    ::first-line ：第一行
    ::selection ：被选择的文本
    ::before 
        content:''
    ::after
选择器优先级：
    根据特性值进行比较，特性值越大，优先级越高
 
    style属性: 1000
    id选择器：100
    类选择器、伪类选择器、属性选择器：10
    元素选择器、伪元素选择器：1
    !important：不计入特性值优先级提高到最高
    div{
 
    }