選擇器

屬性選擇器（通過標簽屬性來選擇）

• E[attr]： 表示只要元素<E>存在屬性attr就能被選中 ?如： div[class]
• E[attr=val]： 表示元素<E>存在屬性attr的值等于val，即可被選中 ?如： div[class="val"]
• E[attr*=val]： 表示元素<E>存在屬性attr的值包含val，且在任意位置 ?如： div[class*="text_val"]
• E[attr^=val]： 表示元素<E>存在屬性attr的值包含val，且在開始位置 ?如： div[class^="val_one"]
• E[attr$=val]： 表示元素<E>存在屬性attr的值包含val，且在結束位置 ?如： div[class$="two_val"]

偽類選擇器

• E:first-child： 選擇所有元素的第一個子元素<E>（該偽類很容易讓人誤解，且是在CSS2中定義）
  • p:first-child ?表示選擇器匹配任何元素的第一個子元素<p>
  • p>i:first-child ?表示選擇器匹配所有<p>元素的第一個子元素<i>
  • p:first-child i ?表示選擇器匹配任何元素的第一個子元素<p>中的所有<i>元素
• E:last-child： 選擇元素的最后一個子元素（與E:first-child相似）
• E:nth-child(n)： 選擇所有元素的子元素<E>，且<E>元素是符合n制定的規則的
  • E:nth-child(3)： 選中第3個子元素<E>
  • E:nth-child(n)： 選中全部的子元素<E>，因為n遵循線性變化，從0，1，2，3，4…… 當n<=0時，選取無效
  • E:nth-child(2n-1)： 選中所有的奇數的<E>
  • E:nth-child(-n 5)： 選中前5個<E> ? 注意： E:nth-child(5-n) 這樣寫是沒有作用的
  • E:nth-last-child(-n 5)： 選中后5個<E>
  • E:nth-child(even)： 選中所有的偶數的子元素<E> ?補充： E:nth-child(odd) ?所有的奇數
• E:empty： 選中沒有任何內容的<E>元素，包括空格
• E:target： 結合錨點進行使用，出于當前錨點的元素會被選中
• E:not(selector)： 除selector（任意選擇器）外的元素都會被選中
• 其他不常用偽類選擇器如： :nth-of-type()，:nth-last-of-type()，:first-of-type，:last-of-type，:only-child，:only-of-type等

偽元素選擇器

• E::before，E::after： <E>元素內部的開始和結束創建一個元素，該元素是行內元素，且需結合content屬性使用
  特別說明： 這兩個選擇器在舊版本當中是偽類選擇器（不存在偽元素的概念），新版本下E:before，E:after會被自動識別為E::befote，E::after

• E::first-letter： 文本的第一個字母或文字
• E::first-line： 文本第一行
• E::selection： 選中文本的樣式

?

顏色

• rgba(0,0,0,0.1)： 色彩空間，一種新的顏色的表示方式，其中R（red），G（green），B（blue），A（alpha，不透明度）
• hsla(200,,,1)： H（hue，色調， 取值范圍0~360，其中0/360表示紅色，120表示綠色，240表示藍色），S（saturation，飽和度，取值范圍0%~100%），L（lightness，亮度，取值范圍0%~100%），A（alpha，不透明度，取值范圍0~1）
  補充： opacity（不透明度）只能針對整個盒子設置，子盒子及其內容會繼承父盒子的不透明度，而rgba，hsla可應用于任何設置顏色的地方，且不具有繼承性

?

文本陰影

• text-shadow： 可分別設置偏移量，模糊度，顏色（可設透明度）
  • 水平偏移量：正值向右，負值向左
  • 垂直偏移量：正值向下，負值向上
  • 模糊度不能為負值
    舉例說明：
    文字凸起： .tu{ text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; }
    .ao{
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
    }

?

盒模型

• box-sizing： css中通過box-sizing來指定盒子模型；box-sizing有兩個值；分別是：
  • content-box： 盒子的實際寬度等于width值加上border值加上padding值，是默認值
  • border-box： 盒子的實際寬度等于設置的width值，即使定義了border和padding，也不會改變盒子的實際寬度

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS3的常用属性（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。