python全棧開發 * css 選取器 浮動 * 180808

標籤：play   legend   username   cti   單詞   補充   偶數   lock   字母   

css 選取器

一.基本選取器

1.標籤選取器

　　標籤選取器可以選中所有的標籤元素，比如div，ul，li ，p等等，不管標籤藏的多深，都能選中，選中的是所有的，而不是某一個，所以說 "共性" 而不是 ”特性“

body{    color:gray;    font-size: 12px;}/*標籤選取器*/p{    color: red;font-size: 20px;}span{    color: yellow;}

2.id選取器

　　同一個頁面中id不能重複。
　　任何的標籤都可以設定id 
　　id命名規範 要以字母 可以有數字 底線 - 大小寫嚴格區分 aa和AA是兩個不一樣的屬性值

 #box{        background:green;  }                #s1{      color: red;  }    #s2{     font-size: 30px; }

3.類別選取器

所謂類 就是class . class與id非常相似 任何的標籤都可以加類但是類是可以重複,屬于歸類的概念。

同一個標籤中可以攜帶多個類，用空格隔開

.lv{    color: green;}.big{    font-size: 40px;}.line{    text-decoration: underline;}

<!-- 公用類    共有的屬性 -->    <div>        <p class="lv big">段落1</p>        <p class="lv line">段落2</p>        <p class="line big">段落3</p>    </div>

4.通配選取器

*{   }    包含head   body

總結：

• 不要去試圖用一個類將我們的頁面寫完。這個標籤要攜帶多個類，共同設定樣式
• 每個類要儘可能的小，有公用的概念，能夠讓更多的標籤使用

面試

到底使用id還是用class？
答案：儘可能的用class。除非一些特殊情況可以用id

原因：id一般是用在js的。也就是說 js是通過id來擷取到標籤

二.進階選取器

1.後代選取器

使用空格表示後代選取器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）

1 .container p{2     color: red;        3 }4 .container .item p{5     color: yellow;6 }

2.子代選取器

使用>表示子代選取器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

1 .container>p{2     color: yellowgreen;3 }

3.並集選取器

多個選取器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可以使用並集選取器

1 /*並集選取器*/2 h3,a{3     color: #008000;4     text-decoration: none;5                 6 }

 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {      margin: 0;      padding: 0   }/*使用此並集選取器選中頁面中所有的標籤，頁面配置的時候會使用*/

4.交集選取器

使用.表示交集選取器。第一個標籤必須是標籤選取器，第二個標籤必須是類別選取器 文法：div.active

 1 h4{ 2     width: 100px; 3     font-size: 14px; 4 } 5 .active{ 6     color: red; 7     text-decoration: underline; 8 } 9 /* 交集選取器 */10 h4.active{11     background: #00BFFF;12 }

它表示兩者選中之後元素共有的特性。

三.屬性選取器   (一般用於表單控制項)

根據標籤中的屬性,選中當前標籤

1.[for]

2.[for="username"]{   color: yellow}       找到for屬性的等於username的元素   字型顏色設為黃色

3.[for^="user"] {   color: #008000;}       以user開頭

4.[for$=‘vvip‘]{color : red}        以VVIP結尾

5.[for*="vip"] { color : #00BFFF}   包含vip   元素的標籤

6.指定單詞的屬性

lable[for~=‘user1‘]  {color : red}

input[type="text"] {background : red}

樣本:

/*根據屬性尋找*/            /*[for]{                color: red;            }*/                        /*找到for屬性的等於username的元素 字型顏色設為紅色*/            /*[for=‘username‘]{                color: yellow;            }*/                        /*以....開頭  ^*/             /*[for^=‘user‘]{                color: #008000;            }*/                        /*以....結尾   $*/            /*[for$=‘vvip‘]{                color: red;            }*/                        /*包含某元素的標籤*/            /*[for*="vip"]{                color: #00BFFF;            }*/                        /**/                        /*指定單詞的屬性*/            label[for~=‘user1‘]{                color: red;            }                        input[type=‘text‘]{                background: red;            }

四.偽類別選取器

　　偽類別選取器一般會用在超連結a標籤中，使用a標籤的偽類別選取器，我們一定要遵循"愛恨準則"  LoVe HAte

1.沒有被訪問的a 標籤的樣式   a : link {  color : #666}

2.訪問過後的a標籤的樣式  a : visited {color : yellow}

3.滑鼠移至上方時a標籤的式樣  a :hover {color : green}

4.滑鼠摁住的時候a標籤的樣式   a : active{  color : yellowgreen

 1               /*沒有被訪問的a標籤的樣式*/ 2         .box ul li.item1 a:link{ 3              4             color: #666; 5         } 6         /*訪問過後的a標籤的樣式*/ 7         .box ul li.item2 a:visited{ 8              9             color: yellow;10         }11         /*滑鼠移至上方時a標籤的樣式*/12         .box ul li.item3 a:hover{13             14             color: green;15         }16         /*滑鼠摁住的時候a標籤的樣式*/17         .box ul li.item4 a:active{18             19             color: yellowgreen;20         }

5.介紹一種css3的選取器nth-child()

(1)標籤 : first-child{ font-size:20px;  color:red}     選第一個元素

(2標籤 : last-child{ font-size:20px;  color:red}     選最後一個

(3標籤 :nth-child(3){ font-size:20px;  color:red}     選中當前指定的元素  數值從1開始

(4)標籤 :nth-child(n){font-size:20px;  color:red}   n表示選中所有,從0開始,0表示沒有選中

(5) 標籤:nth-child(2n)   偶數

(6) 標籤 nth-child(2n-1) 奇數  

隔幾換色  隔行換色

隔4換色 就是5n+1,隔3換色就是4n+1 

複製代碼              /*選中第一個元素*/        div ul li:first-child{            font-size: 20px;            color: red;        }        /*選中最後一個元素*/        div ul li:last-child{            font-size: 20px;            color: yellow;        }                /*選中當前指定的元素  數值從1開始*/        div ul li:nth-child(3){            font-size: 30px;            color: purple;        }                /*n表示選中所有,這裡面必須是n, 從0開始的  0的時候表示沒有選中*/        div ul li:nth-child(n){            font-size: 40px;            color: red;        }                /*偶數*/        div ul li:nth-child(2n){            font-size: 50px;            color: gold;        }        /*奇數*/        div ul li:nth-child(2n-1){            font-size: 50px;            color: yellow;        }        /*隔幾換色  隔行換色             隔4換色 就是5n+1,隔3換色就是4n+1            */                div ul li:nth-child(5n+1){            font-size: 50px;            color: red;        }

 

五.虛擬元素選取器

1. 設定首字母的樣式    

p:first-letter{            color: red;            font-size: 30px; 　　　　　　　}

2.在....之前 新增內容  使用此虛擬元素選取器一定要結合content屬性

p:before{            content:‘alex‘;        }

3. 在...之後 新增內容  布局    有關  (清除浮動)

 p:after{            content:‘&‘;            color: red;            font-size: 40px;        }

補充:

重設樣式:*{padding:0;  margin : 0}

去點 : 標籤{list-style : none}

display相關設定

inline行內顯示 

inline-block行內塊

block 塊

none 隱藏(不顯示佔用位置)

visible-hidden(隱藏佔用位置)   height : 0

 

python全棧開發 * css 選取器 浮動 * 180808