CSS注意事項（二）

選擇器

標籤選擇器(學會靈活應用)

單個標籤 直接使用標籤名 
多個標籤 複雜選擇器 
div p 選擇div內部的全部p元素 
div > p 父元素爲div的全部p元素 
li + li 緊接在li以後的li元素 
p ~ ul 選擇前面有p元素的每一個ul元素

好比對多個li添加下劃線 
可直接使用

ul li+li{

border-top:1px solid #ccc;

}

id/class選擇器 略過

屬性選擇器

• 屬性名選擇 img[title]含有title屬性的img標籤
• 屬性名+屬性值的選擇器 好比 

• input[type='text']{ 
  }

   

僞類和僞元素

僞類

• UI 僞類

• a:link 
  a:hover 
  a:activted 
  a:visited

   

a標籤的四個僞類排列順序和緣由

link指有連接屬性時 visited 連接地址已經被訪問過 active 被用戶激活 hover鼠標懸停

根據使用情景肯定a狀態

• 未被操做時 具有link屬性
• 鼠標通過時 hover和link兩個屬性
• 鼠標點擊時 具備link hover active
• 訪問完成 具備link visted hover 三種狀態 
  區分hover visited 以及link三種樣式便可 
  四者樣式順序：link visited hover active

  緣由：link和visited爲靜態常態，但一旦被訪問應該覆蓋原樣式 
  在鼠標操做時，a標籤同時具有hover 和active 狀態 因此active必須放在hover以後

• 結構化僞類 
  好比：

• table tr:nth-child(even){} 
  table tr:nth-child(odd){} 
  table tr:first-child{} 
  table tr:last-child{} 
  table tr:nth-child(2n+1)

   

僞元素

:before 和 ：after很是經常使用 
例如：

<style>

span:before{

content:'你好,'

}

span:after{

content:'!'

}

</style>

<span>Shirly</span>

選擇器優先級

使用注意：

• 儘可能對外層添加class, 內層使用多級選擇器，下降初步佈局樣式的優先級以便js處理

首先明確選擇器表達式的重要程度。 
公式: I-C-E 

I–id —–C-class —— E-element 

遇到一個id就往特指度數值中加100，遇到一個class就往特指度數值中加10，遇到一個element就往特指度數值中加1
還有一個重點要注意：!important優先級最高，高於上面一切。* 選擇器最低，低於一切。

盒子模型

• 盒子寬度包括：padding+margin+boeder+內容
  • div默認爲block 內容寬度會由於 padding或margin 寬度變化而變化
• 包裹內容(自己不定義寬度) 盒子寬度=內容寬度+padding+margin
  • div display:table 
    咱們設定的寬度爲盒子內容寬度，怎麼解決問題？ 
    建議要領：給div添加下面的屬性便可實現設定的寬度即爲盒子寬度。

box-sizing:border-box;

縱向margin重疊問題

縱向的margin會重疊，值較大的覆蓋掉較小的。

利用div的boder畫小三角

div{

border:10 solid;

border-color:#444 transparent transparent transparent ;

width:0;

}