css3屬性總結（中）

阿新 • • 發佈：2019-02-13

CSS3背景 background-origin

設定元素背景圖片的原始起始位置。

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

引數分別表示背景圖片是從邊框，還是內邊距（預設值），或者是內容區域開始顯示

需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。

CSS3背景 background-clip

用來將背景圖片做適當的裁剪以適應實際需要。

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

引數分別表示從邊框

、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和引數border-box顯示同樣的效果。backgroud-clip預設值為border-box。

CSS3背景 background-size

設定背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。

background-size: auto | <長度值> | <百分比> | cover | contain

1、auto：預設值，不改變背景圖片的原始高度和寬度；

2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設定為前面兩個值，當設定一個值時，將其作為圖片寬度值來等比縮放

；

3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設定為所在元素寬高乘以前面百分比得出的數值，當設定一個值時同上；

4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；

5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。

CSS3背景 multiple backgrounds

background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;

background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat,
url(http://static.mukewang.com/static/img/logo_index.png) 150px 50px no-repeat;

注意：

用逗號隔開每組 background 的縮寫值；
如果有 size 值，需要緊跟 position 並且用 "/" 隔開；
如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值。
background-color 只能設定一個。

CSS3選擇器屬性選擇器

CSS3 結構性偽類選擇器—root

:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文件的根元素。在HTML文件中，根元素始終是<html>

使用方法：

                :root {
                       background:blue;
                }

“:root”選擇器等同於<html>元素，簡單點說：:root{background:orange} 和 html {background:orange;} 得到的效果等同。

CSS3 結構性偽類選擇器—not

:not選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素新增紅色邊框，

使用方法：

input:not([type="submit"]){
  border:1px solid red;
}
div:not([id="footer"]){
  background: orange;
}

CSS3 結構性偽類選擇器—empty

:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格。

使用方法：div:empty {
border: 1px solid green;
}

CSS3 結構性偽類選擇器—target

:target選擇器稱為目標選擇器，用來匹配文件(頁面)的url的某個標誌符的目標元素

例項：

HTML程式碼：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

CSS程式碼：

.menuSection{
  display: none;
}
:target{/*這裡的:target就是指id="brand"的div物件*/
  display:block;
}

演示結果：

分析：

1、具體來說，觸發元素的URL中的標誌符通常會包含一個#號，後面帶有一個標誌符名稱，上面程式碼中是：#brand

2、：target就是用來匹配id為“brand”的元素（id="brand"的元素）,上面程式碼中是那個div元素。

多個url（多個target）處理：

就像上面的例子，#brand與後面的id="brand"是對應的，當同一個頁面上有很多的url的時候你可以取不同的名字，只要#號後對的名稱與id=""中的名稱對應就可以了。

如下面例子：
html程式碼：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>

css程式碼：

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

CSS3 結構性偽類選擇器—first-child

“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。

示例演示

通過“:first-child”選擇器定位列表中的第一個列表項，並將序列號顏色變為紅色。

HTML程式碼：

<ol>
  <li><a href="##">Link1</a></li>
  <li><a href="##">Link2</a></li>
  <li><a href="##">link3</a></li>
</ol>

CSS程式碼：

ol > li{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ol a {
  font-size: 16px;
  font-weight: normal;
}

ol > li:first-child{
  color: red;
}

演示結果：

CSS3 結構性偽類選擇器—last-child

“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最後一個子元素。例如，需要改變的是列表中的最後一個“li”的背景色，就可以使用這個選擇器，

CSS3 結構性偽類選擇器—nth-child(n)

“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其引數，而且可以是整數值(1,2,3,4)，也可以是表示式(2n+1、-n+5)和關鍵詞(odd、even)，但引數n的起始值始終是1，而不是0。也就是說，引數n的值為0時，選擇器將選擇不到任何匹配的元素。

經驗與技巧:當“:nth-child(n)”選擇器中的n為一個表示式時，其中n是從0開始計算，當表示式的值為0或小於0的時候，不選擇任何匹配的元素

CSS3 結構性偽類選擇器—nth-last-child(n)

“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這裡多了一個“last”，所起的作用和“:nth-child(n)”選擇器有所區別，從某父元素的最後一個子元素開始計算，來選擇特定的元素。

CSS3 first-of-type選擇器

“:first-of-type”選擇器類似於“:first-child”選擇器，不同之處就是指定了元素的型別,其主要用來定位一個父元素下的某個型別的第一個子元素。

.wrapper > p:first-of-type {
  background: orange;
}

這裡的p是和first-of-type是在一層關係上，指的是第一個型別是p的，但是比如.wrapper：nth-child(2)就是wrapper下面的，不是在一層關係上

CSS3 nth-of-type(n)選擇器

“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種型別的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位於父元素中某種型別的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”引數也一樣，可以是具體的整數，也可以是表示式，還可以是關鍵詞。

CSS3 last-of-type選擇器

“:last-of-type”選擇器和“:first-of-type”選擇器功能是一樣的，不同的是他選擇是父元素下的某個型別的最後一個子元素。

CSS3 nth-last-of-type(n)選擇器

“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的，選擇父元素中指定的某種子元素型別，但它的起始方向是從最後一個子元素開始，而且它的使用方法類似於上節中介紹的“:nth-last-child(n)”選擇器一樣。

CSS3 only-child選擇器

“:only-child”選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。

CSS3 only-of-type選擇器

“:only-of-type”選擇器用來選擇一個元素是它的父元素的唯一一個相同型別的子元素。這樣說或許不太好理解，換一種說法。“:only-of-type”是表示一個元素他有很多個子元素，而其中只有一種型別的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個元素中的唯一一個型別子元素。

CSS3選擇器 :enabled選擇器

在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態，比如輸入框，密碼框，複選框等。在預設情況之下，這些表單元素都處在可用狀態。那麼我們可以通過偽選擇器“:enabled”對這些表單元素設定樣式。

HTML程式碼:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用輸入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用輸入框"  disabled="disabled" />
  </div>
</form>

CSS程式碼：

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

結果演示

CSS3選擇器 :disabled選擇器

“:disabled”選擇器剛好與“:enabled”選擇器相反，用來選擇不可用表單元素。要正常使用“:disabled”選擇器，需要在表單元素的HTML中設定“disabled”屬性。

CSS3選擇器 :checked選擇器

在表單元素中，單選按鈕和複選按鈕都具有選中和未選中狀態。（大家都知道，要覆寫這兩個按鈕預設樣式比較困難）。在CSS3中，我們可以通過狀態選擇器“:checked”配合其他標籤實現自定義樣式。而“:checked”表示的是選中狀態。

CSS3選擇器 ::selection選擇器

“::selection”偽元素是用來匹配突出顯示的文字(用滑鼠選擇文字時的文字)。瀏覽器預設情況下，用滑鼠選擇網頁文字是以“深藍的背景，白色的字型”顯示的

從上圖中可以看出，用滑鼠選中“專注IT、網際網路技術”、“純乾貨、學以致用”、“沒錯、這是免費的”這三行文字中，預設顯示樣式為：藍色背景、白色文字。

注意：

1、IE9+、Opera、Google Chrome 以及 Safari 中支援 ::selection 選擇器。

2、Firefox 支援替代的 ::-moz-selection。

使用方法：

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

CSS3選擇器 :read-only選擇器

“:read-only”偽類選擇器用來指定處於只讀狀態元素的樣式。簡單點理解就是，元素中設定了“readonly=’readonly’”

使用方法：

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

CSS3選擇器 :read-write選擇器

“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處於非只讀狀態時的樣式。

CSS3選擇器 ::before和::after

::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。

css3屬性總結（中）

CSS3背景 background-origin

CSS3背景 background-clip

CSS3背景 background-size

CSS3背景 multiple backgrounds

CSS3選擇器 屬性選擇器

CSS3 結構性偽類選擇器—root

CSS3 結構性偽類選擇器—not

CSS3 結構性偽類選擇器—empty

CSS3 結構性偽類選擇器—target

CSS3 結構性偽類選擇器—first-child

CSS3 結構性偽類選擇器—last-child

CSS3 結構性偽類選擇器—nth-child(n)

CSS3 結構性偽類選擇器—nth-last-child(n)

CSS3 first-of-type選擇器

CSS3 nth-of-type(n)選擇器

CSS3 last-of-type選擇器

CSS3 nth-last-of-type(n)選擇器

CSS3 only-child選擇器

CSS3 only-of-type選擇器

CSS3選擇器 :enabled選擇器

CSS3選擇器 :disabled選擇器

CSS3選擇器 :checked選擇器

CSS3選擇器 ::selection選擇器

CSS3選擇器 :read-only選擇器

CSS3選擇器 :read-write選擇器

CSS3選擇器 ::before和::after

相關推薦

CSS3選擇器屬性選擇器