1.屬性選擇器
完全匹配的屬性選擇器 [id=article]{}
示例：
結果：前兩文字框的邊框為兩畫素紅色。
包含匹配元素選擇器，包含制定的字串。
語法：[attribute*=vlue] attribute指的屬性名，value 指的是屬性值。
示例：
css3鞏固學習css3鞏固學習
css3鞏固學習
結果：第乙個和第三個文字會變紅
首字元匹配選擇器，只要開頭字元符合匹配。
語法：[attribute^=vlue] attribute指的屬性名，value 指的是屬性值。
示例：
css3鞏固學習css3鞏固學習
css3鞏固學習
結果：第乙個第二個文字變為紅色，第三個顏色不變
尾字元匹配選擇器，只要匹配結尾的字串。
語法：[attribute$=vlue] attribute指的屬性名，value 指的是屬性值。
示例：
css3鞏固學習css3鞏固學習
css3鞏固學習
結果：第乙個和第三個文字變成紅色，第二個顏色不變
匹配所有包含該單詞屬性的選擇器。
語法 [attribute~=vlue] vlue 是乙個單詞
示例：
css3鞏固學習css3鞏固學習
css3鞏固學習
結果：第乙個第二文字會變紅，第三個不會變
匹配開頭必須是特定單詞屬性選擇器。
語法 [attribute|=vlue] vlue 是乙個單詞
示例：
css3鞏固學習css3鞏固學習
css3鞏固學習
結果：第乙個第二文字會變紅，第三個不會變。
2.偽類選擇器
指定元素列表中第乙個元素:first-child
語法：li:first-child{}
示例：
結果：第乙個li的文字變為紅色
指定元素列表中最後乙個元素:last-child
語法：li:last-child{}
示例：
結果：最後乙個li裡的文字變為紅色。
注意：p:last-child 等同於 p:nth-last-child(1)
父標籤下的指定型別的子元素:nth-child
語法：p：nth-child(){}
示例：
css3鞏固css3鞏固
css3鞏固
結果：第二p標籤內的元素變為紅色。
css3鞏固css3鞏固
css3鞏固
結果 ：沒有任何效果
選擇父標籤下的第幾個指定元素:nth-of-type
語法：:nth-of-type(){}
示例：
css3鞏固css3鞏固
css3鞏固
結果：最後乙個元素內文字變為紅色。
:nth-child(odd),nth-child(even) 選擇奇數和偶數。
示例：
結果：奇數行內的文字變為紅色，偶數行內的文字變為
指定的屬於父元素特定型別的唯一的子元素:only-of-type。
示例：
這是乙個段落。這是乙個段落。
這是乙個段落。
結果： 第乙個div裡面的p元素背景會變成紅色 第二div裡面的不會變色。
選擇指定的空元素p:empty
示例：
結果：第乙個li和最後乙個li北京會變成紅色。
選擇器可以用於選取當前活動的目標元素:target。
示例：
div1div2
div3
div1
div2
div3
結果：點選對應的a標籤下面對應的div 顯示。
選取啟用的表單元素:enabled。
示例：
結果：第乙個input 背景會變為紅色 ，第二個不會變。
選取啟用的表單元素:disabled。
示例：
結果：第乙個input 背景不會變色 ，第二個變為紅色。
選擇已被選中的input元素（只用於單選按鈕和核取方塊）
示例：
結果：第乙個和第二個input會變大，第三個不會變。
示例：
css3鞏固學習...擼起袖子加油幹！
for="testtogglecheckbox">
收起↑展開↓
結果：點選收起和展開實現省略號後面的顯示和隱藏。
示例：
for="testtabradio1">選項卡1我是選項卡1對應的內容
for="testtabradio2">選項卡2
我是選項卡2對應的內容
for="testtabradio3">選項卡3
我是選項卡3對應的內容
結果：點選對應的選項卡實現切換。
選擇器用於選取指定選擇器的首行 ：first-line
偽元素像文字的第乙個字母新增特殊樣式:first-letter
選擇器匹配被使用者選取的選擇部分：：selection
示例：
2017擼起袖子加油幹！2017擼起袖子加油幹！2017擼起袖子加油幹！
結果：第一行的背景會變為紅色，第乙個字字型顏色會變為藍色，選中的背景變為黃色。
在被選擇元素的內容前面插入內容:before
在被選擇元素的內容後面插入內容:after
示例：
2017.2.4
結果：三個日期依次排列。
選擇器匹配非指定元素/ 選擇器的每個元素：not(selector)
示例：
2017 加油幹。2017 加油幹。
2017 加油幹。
結果：div內的文字會變為紅色。
3.文字修飾
文字設定陰影text-shadow
語法：text-shadow: h-shadow v-shadow blur color;
h-shadow 必須 水平陰影的位置，允許負值。
v-shadow 必須 垂直陰影的位置。允許負值。
blur 可選，模糊的距離。
color 可選 陰影的顏色。
示例：
2017 擼起袖子幹吧！
結果：出現紅色的模糊陰影。
文字描邊text-stroke
語法 ：text-stroke: <'text-stroke-width'> || <'text-stroke-color'>
text-stroke-width 文字的描邊厚度
text-stroke-color 文字的描邊顏色
示例：
文字描邊效果
結果：文字新增了紅色的描邊。
規定文字的書寫方向： direction
語法：direction 可選的值： ltr 預設，文字方向從左到右
rtl 文字方向從右到左，inberit 規定從父元素繼承。
示例：
實現自己的小目標
結果：實現自己的小目標
超出的文字用省略號表示
示例：
2017做好自己該做的事情，此時不努力更待何時。
結果：超出的寬度用省略號表示。
CSS3基礎知識彙總
css3樣式表優勢 1 豐富的修飾樣式 2 內容與修飾分離，利於專案開發 3 實現樣式復用，提高開發學歷 4 實現頁面的精準控制 css3語法 type text css listyle 3.樣式表分類 1 外部樣式表 head 其中rel stylesheet 表示在網頁中使用該外部樣式表，typ...
css3的基礎知識
transfrom的應用 1.旋 transform rotate 30deg 2.陰影效果 box shadow 10px 10px 5px 888888 3.滑鼠移入放大 transform scale 2,2 放慢變化的時間效果 transition transform 想要實現的屬性 6s，...
繁星CSS3之旅 CSS入門基礎知識
css介紹 概述 css指層疊樣式表，極大提高了工作效率 好處 使我們的ui看起來更加完美 css基礎語法 語法 屬性選擇器 selector 例 h1 p css高階語法 1 選擇器分組 h1,h2,h3,h4,h5,h6 2 繼承 body 例 doctype html html lang en...