前端基礎-02-CSS選擇器

前端基礎-CSS樣式

1. CSS樣式常用的三種引用方式：

#CSS樣式分爲3種:
#優先級：行內樣式>內嵌樣式>外部樣式
1.行內樣式：
<div style="width: 300px;height: 300px;background: green">
</div>

2.內嵌樣式
head中間添加樣式：
<style>
        div{
            width: 200px;
            height: 200px;
            background: green;
        }
</style>
3.外部樣式
lesson.css樣式文件：
div {
    width: 200px;
    height: 200px;
    background: green;
}
#引用方式：
<link rel="stylesheet" href="lesson.css">

擴展：修改頁面頁籤的圖標：
<link rel="shortcut icon" href="image/test1.ico">

2.選擇器

#1.通配符選擇器
* {
    margin: 0;
}

#2.標籤（tagName）選擇器
div {
   width: 100px;
   height: 100px;
   background: red;
}
#3.class選擇器，一般給具有相同屬性的元素設置同一個class
.box {
     background: blue;
}
#4.id選擇器，id具有唯一性

#box{
     background: gray;
}
#5. +是相鄰選擇器，操作的對象是該元素後的同級元素，只會針對一個元素
 div + p+p {
    background: blue;
}
#6.羣組選擇器，對幾個相同熟悉的選擇器進行樣式設置，div和p都生效
        div, p {
            width: 100px;
            height: 100px;
            background: red;
        }
#7. ~ 是兄弟選擇器：div後所有同級p元素生效
        div ~ p {
            background: green;
        }
#8.>子代選擇器 :div所有子元素p生效，變成藍色
        div > p {
            background: blue;
        }
#9.後代選擇器：可以指定某一層級子元素生效，div的下面所有li元素樣式生效
        div li {
            width: 50px;
            height: 50px;
            background: red;
        }
#10.僞選擇器
       #a標籤：
        a:link { /*未被點擊的鏈接*/
            color: red;
        }

        a:visited { /*已被點擊的鏈接*/
            color: green;
        }

        a:hover { /*鼠標懸浮的顏色*/
            color: aqua;
        }

        a:active { /*鼠標按下的顏色*/
            color: black;
        }

       #div標籤：
        div {
            width: 100px;
            height: 100px;
            background: red;
        }

        div:hover { /*改變元素本身*/
            /*
                default 默認箭頭
                pointer 手指
                wait 顯示正忙
                help 顯示幫助
            */
            cursor: pointer;
            background: blue;
        }

        div:hover p { /*改變元素下面的p標籤*/
            width: 100px;
            height: 20px;
            background: green;
        }


#11.通用選擇器的優先級：
選擇器優先級：
(*)<tagName<(.)class類選擇器<（#）id選擇器
級別相同的選擇器，後面的樣式會覆蓋前面的
複雜後代選擇器：
1.先比id 再比class 再比tagName
2.id選擇器個數不相等，id越多，優先級越高
3.id選擇器相同，則比class，在比tagName

# 快捷鍵：
ul>li*5   + TABL  快捷輸出5個li標籤