css3學習之雜項

一.背景相關

1.background-origin限制背景顯示在盒子模型的區域範圍,默認content-box

background需要設置background-repeat:no-repeat

background-origin ： border-box | padding-box | content-box;

2.background-clip將背景做剪裁,默認no-clip

background-clip ： border-box | padding-box | content-box | no-clip

3.background-size設置背景圖片的大小

background-size: auto | <長度值> | <百分比> | cover(同100% 100%) | contain(容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣爲止)

4.

background ： [background-color] | [background-image] | [background-
position][/background-size] | [background-repeat] | [background-
attachment] | [background-clip] | [background-origin],...

等同於

background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意
(1).用逗號隔開每組 background 的縮寫值；
(2).如果有 size 值，需要緊跟 position 並且用 “/” 隔開；
(3).如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值。
(4).background-color 只能設置一個。

二.選擇器

1.屬性選擇權

使用示例

/*------------------html---------------------------*/ 
<a href="xxx.pdf">我鏈接的是PDF文件</a>
<a href="#" class="icon">我類名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

/*------------------css---------------------------*/ 
a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

2. 結構性僞類選擇器 :root

:root 選擇器是指元素的根元素,在html中同html

:root{background:orange}
等同於
html {background:orange;}

3. 結構性僞類選擇器 :not

可以選取除了某個元素之外的所有元素

給除了footer之外的元素設置橘色背景
/*--------------------html-----------------------------*/
    <div id="header">頁頭</div>
    <div id="page">頁體</div>
    <div id="footer">頁腳</div>
/*--------------------css-----------------------------*/
div:not([id="footer"]){
  background: orange;
}

4.結構性僞類選擇器 :empty

選擇沒有內容的元素,空格也不能有

div:empty {
  border: 1px solid green;
}

5.結構性僞類選擇器 :target

目標選擇器，用來匹配文檔(頁面)的url的某個標誌符的目標元素

// 點擊a標籤顯示出來內容
-------------------css------------------------
    <h2><a href="#brand1">Brand</a></h2>
    <div class="menuSection1" id="brand1">
        content for Brand
    </div>
-------------------css------------------------
#brand1:target{/*這裏的:target就是指id="brand1"的div對象*/
  display:block;
}
.menuSection1{
  display: none;
}

6.結構性僞類選擇器 :first-child , last-child , nth-child ,nth-last-child , first-of-type , nth-of-type , last-of-type , only-child , only-of-type

first-child ,第一個子元素
last-child ,第二個子元素
nth-child(n) ,第n個子元素,n從1開始
nth-last-child(n) , 倒數第n個子元素,n從1開始
first-of-type , 選擇元素中第一個某種類型的子元素,這個子元素不一定在第一個位置
nth-of-type(n) , 選擇元素第n個是某種類型的子元素
last-of-type , 選擇元素最後一個是某種類型的子元素
only-child , 選擇只有一個子元素的父元素
only-of-type , 選擇父元素中只有唯一一個的某種類型的元素,意義上包含only-child

ol > li:nth-child(2n){
  background: orange;
}
.wrapper > p:nth-of-type(even){
  background: orange;
}

7.結構性選擇器 :enabled , :disabled , :checked

:enabled , 選擇表單中可用表單元素
:disabled , 選擇表單中不可用的表單元素
:checked , 選擇表單中單選框和複選框被選中時的元素

input[type="text"]:enabled {
  border: 1px solid #f36;
  box-shadow: 0 0 5px #f36;
}

8.僞元素選擇器 ::selection

::selection , 會改變頁面級別(不用於特定元素)的鼠標選中樣式,瀏覽器默認鼠標選中文字時是藍色背景白色字體
火狐瀏覽器加前綴使用

::selection{
  background: orange;
  color: white;
}
::-moz-selection{
  background: orange;
  color: white;
}

9.僞類選擇器 :read-only , :read-write

:read-only , 選擇只讀屬性的元素
:read-write , 選擇不是隻讀屬性的元素

textarea:-moz-read-only{
  border: 1px solid #ccc;
  height: 50px;
  resize: none;
  background: #eee;
}
textarea:read-only {
  border: 1px solid #ccc;
  height: 50px;
  resize: none;
  background: #eee;
}