CSS引入、选择器、优先级及权重

引入css的三种方式

    <!-- 行间样式 -->
    <div style="width: 100px;height: 100px;background-color: #f40;"></div>

	<!-- 内嵌式css -->
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

	<!-- 外部css文件 -->
    <link rel="stylesheet" href="文件路径">

选择器

基本选择器

    <!-- id选择器 #oonlt{} -->
    <div id="only"></div>

    <!-- 类选择器 .content{} -->
    <div class="conent"></div>

    <!-- 标签选择器 p{} -->
    <p></p>

    <!-- 通配符选择器 *{} -->


    <!-- 属性选择器 input[type=text]  -->
    <input type="text" name="" id="">

    <!-- 后代选择器/派生选择器 div i{} -->
    <div>
        <span>
            <i></i>
        </span>
    </div>

    <!-- 直接子元素选择器 div>p{} -->
    <div>
        <p></p>
    </div>

    <!-- 并列选择器 div.div1 -->
    <div class="div1"></div>
    <div class="div2"></div>

    <!-- 分组选择器 div,span,strong{} -->
    <div></div>
    <span></span>
    <strong></strong>

	<!-- 相邻兄弟选择器 #first + .inner{} 它只会匹配紧跟着的兄弟元素 -->
				

	<!-- 通用兄弟选择器 #first ~ div{} 它会匹配所有的兄弟元素(不需要紧跟) -->
		
    <!-- 
        伪类选择器 
            a:hover{鼠标移入} 
            a:active{鼠标选定}
            a:link{鼠标未访问}
            a:visited{鼠标点击过一次的状态}
    -->
    <a href="#"></a>

    <!-- 伪元素选择器 是行级元素 -->
    <div>计算机</div>
    <style>

        div::before{
            content: '全国';
            width: 200px;
            height: 200px;
            background-color: green;
        }
        div::after{
            content: '等级';
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

复杂选择器

    <!-- 
        伪类选择器 
        1>  :first-child ->(选择第一个子元素)
            :first-of-type ->(选择子元素中第一个指定类型的元素)
        2>  :last-child ->(选择最后一个子元素)
            :last-of-type ->(选择子元素中最后一个指定类型的元素)
        3>  :nth-child(n) ->(选择指定的第n个子元素)
            :even，关键字，等同于2n
            :odd，关键字，等同于2n-1
        4>  :nth-of-type() ->(选中指定的子元素中第几某类型的元素)
    -->


    <!--  
        伪元素选择器
        1>  ::first-letter -> (选中元素中的第一个字母)
        2>  ::first-line -> (选中元素中的第一行文字)
        3>  ::selection -> (选中用户框起来的部分)
    -->


    <!-- 
        属性选择器 
        input[type=text] ==> E[attr=val] 属性值完全等于val
        a[title] ==> E[attr] 存在attr属性即可
        div[class^=font] ==> E[attr^=val] 属性值包含val并且在开始位置
        div[class$=footer] ==> E[attr$=val] 属性值包含val并且在结束位置
        div[class*=font] ==> E[attr*=val] 属性值包含val并且在任意位置
    -->

选择器优先级

行间样式>id选择器>class选择器>标签选择器>通配符选择器

css权重

    !important          Infinity
    行间样式             1000(256进制)
    id                  100
    class/属性/伪类      10
    标签/伪元素          1
    通配符               0