1、css匯入方式

1.匯入式：

<style>@import url()</style>

2.連結式：

<link rel="" href="">

3.直接在style標籤中寫程式碼

2、選擇器

2.1基本選擇器

1.標籤選擇器：選擇一類標籤
2.類選擇器 class：選中所有class屬性一致的標籤，可跨標籤 表示方法：.class名{}
3.ID選擇器：全域性唯一！表示方法：#id名{}
優先順序：不遵循就近原則，哪個離得最近選哪個

2.2、層次選擇器

• 後代選擇器：body p{}
• 子選擇器:body>p{}
• 相鄰兄弟選擇器:.i1 + p{}---相鄰兄弟 只在他的下面一個有效
• 通用選擇器:.i1~p{}---當前選中元素的向下所有元素有效

2.3、結構偽類選擇器

        ul li:first-child{
            background: red;
        }
        ul li:last-child{
            background: blue;
        }

只選中p元素的p1：定位父元素，選擇當前的第一個元素
方法1：

       body p:first-child{
            background: green;
        }

只選中p元素的p2
方法2：

        p:nth-of-type(2){
            background: yellow;
        }
 

2.4、屬性選擇器（常用）

/結合了id和class/
存在id屬性的元素---a[id]{}

• 絕對等於：=
• 包含：/*=
• 以這個開頭被選：^=
• 以什麼結尾選：$=

程式碼展示style：

        a[id=first]{
            background: yellow;
        }
        a[class*="c2"]{
            background: green;
        }
        a[href^="http"]{
            background: blue;
        }
        a[href$="jpg"]{
            background: burlywood;
        }
 

body部分:

<p class="c1">
    <a href="http://www.baidu.com" class="c2" >1</a>
    <a href="1.jpg" class="c2" id="i1">2</a>
    <a href="" class="c2" >3</a>
    <a href="" class="c2">4</a>
    <a href="" class="c2">5</a>
    <a href="" class="c2" id="first">6</a>

結果展示: