神奇的css3（1）新增屬性、選擇器
Css3簡介
一、什麼是css3?
CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增長了不少強大的新功能。 目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10之後也開始全面支持CSS3了。css
二、css3前綴
在編寫CSS3樣式時，不一樣的瀏覽器可能須要不一樣的前綴。它表示該CSS屬性或規則還沒有成爲W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不須要前綴的，但爲了更好的向前兼容前綴仍是少不了的。html
標準寫法如表順序，再在後面添加無前綴的。css3
例如：web
border-radius: 20px; /* chrome和safari */ -webkit-border-radius:20px; /* IE */ -ms-border-radius:20px; /* firefox */ -moz-border-radius:20px; /* opera */ -o-border-radius:20px;
三、css3功能
Css3提供了更增強大且精準的選擇器，提供多種背景填充方案，能夠實現漸變顏色，能夠改變元素的形狀、角度等，能夠加陰影效果，報紙佈局，彈性盒子，ie6混雜模式的盒模型，新的計量單位，動畫效果等等等..chrome
可是CSS3的兼容性問題一樣也顯得格外重要，並非全部CSS3屬性都經過了W3C標準，因此咱們須要全面的兼容性查閱手冊瀏覽器
http://www.runoob.com/cssref/css3-browsersupport.html兼容性參考手冊app
https://caniuse.com/兼容性查閱手冊，更方便svg
2、css3功能介紹
一、CSS3 圓角border-radius
border-radius: 20px; /* 四個角設置統一值能夠只寫一次 */佈局
border-radius: 50%;/* 除了用固定值還能夠用百分比 */字體
border-radius:20px 20px 20px 20px; /* 順序是 左上-右上-右下-左下 */
至關於：
border-top-left-radius: 20px; //設置左上角
border-top-right-radius: 20px; //設置右上角
border-bottom-left-radius: 20px; //設置左下角
border-bottom-right-radius: 20px; //設置左下角
至關於：
border-top-left-radius:20px 20px;
border-top-right-radius:20px 20px;
border-bottom-right-radius:20px 20px;
border-bottom-left-radius:20px 20px;
* boreder-radius：1em 2em 1em 2em / 2em 1em 2em 1em，這種寫法至關於設置4個點的x軸/4個點的y周
實例：整園
div { width: 200px; height: 200px; background: red; border-radius: 50%; }
原理：
實例：半圓
div { width: 200px; height: 100px; background: red; border-radius: 100px 100px 0 0; /* 或者 */ /* border-top-right-radius: 100px; border-top-left-radius: 100px; */ }
原理：
二、邊框背景 border-image
border-image: source slice width outset repeat;
默認值：none 100% 1 0 stretch
| 用於指定要用於繪製邊框的圖像的位置 |
|
| 圖像邊界向內偏移 |
|
| 圖像邊界的寬度 |
|
| 用於指定在邊框外部繪製 border-image-area 的量 |
|
| 這個例子演示瞭如何建立一個border-image 屬性的按鈕。 |
border-image-slice: number|%|fill;
| 值 |
說明 |
| number |
數字表示圖像的像素（位圖圖像）或向量的座標（若是圖像是矢量圖像） |
| % |
百分比圖像的大小是相對的：水平偏移圖像的寬度，垂直偏移圖像的高度 |
| fill |
保留圖像的中間部分 |
border-image-width: number|%|auto;
| 值 |
說明 |
| number |
表示相應的border-width 的倍數 |
| % |
邊界圖像區域的大小：橫向偏移的寬度的面積，垂直偏移的高度的面積 |
| auto |
若是指定了，寬度是相應的image slice的內在寬度或高度 |
border-image-repeat：
| 值 |
描述 |
| stretch |
默認值。拉伸圖像來填充區域 |
| repeat |
平鋪（repeated）圖像來填充區域。 |
| round |
相似 repeat 值。若是沒法完整平鋪全部圖像，則對圖像進行縮放以適應區域。 |
| space |
相似 repeat 值。若是沒法完整平鋪全部圖像，擴展空間會分佈在圖像周圍 |
| initial |
將此屬性設置爲默認值。 |
| inherit |
從父元素中繼承該屬性。 |
三、css3顏色值 rgba()
RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來獲得各式各樣的顏色。RGBA是在RGB的基礎上增長了控制alpha透明度的參數。
語法：color：rgba(R,G,B,A)
以上R、G、B三個參數，正整數值的取值範圍爲：0 - 255。百分數值的取值範圍爲：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並不是全部瀏覽器都支持使用百分數值。A爲透明度參數，取值在0~1之間，不可爲負值。
代碼示例：background-color:rgba(100,120,60,0.5);
四、CSS3盒陰影 box-shadow
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
box-shadow:4px 2px 6px 7px #333333 inset;（默認ouset）
實例：
div { width: 200px; height: 100px; background: red; border-radius:50%; box-shadow: 10px 10px 5px #888888; }
結果：
同一盒子，能夠同時加多個陰影，陰影之間用「,」隔開
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
實例：3D感選中li
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; } ul{ margin: 100px; width: 200px; border: 1px solid #ccc; } ul li{ width: 100%; height: 40px; line-height: 40px; text-align: center; border-bottom: 1px solid #ccc; } ul li:hover{ box-shadow: 0 0 6px 2px #888; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
結果：
五、漸變背景顏色
CSS3的漸變分爲兩種
1）線性漸變（linear - to）
語法: linear-gradient([direction], color [percent], color [percent], …)[] 內爲選填
direction角度的單位爲 「deg」 也能夠用to bottom, to left, to top left等的方式來表達
實例：
div { width:300px; height: 40px; background: linear-gradient(to right,red 0%, blue 40% ,green 80%,pink 100% ); }
實例:
div { width:300px; height: 40px; background: linear-gradient(40deg,red 0%, blue 40% ,green 80%,pink 100% ); }
2）徑向漸變（radial - at）
語法:radial-gradient(shape at position, color [percent] , color, …)
shape:放射的形狀，能夠爲原型circle，能夠爲橢圓ellipse
position: 圓心位置，能夠兩個值，也能夠一個，若是爲一個時，第二個值默認center 即 50%。值類型能夠爲百分數，距離像素，也能夠是方位值(left,top...); /*x 軸主半徑 y軸次半徑*/
實例：
div { width:300px; height: 300px; background:radial-gradient(circle at 100px 100px,red 0,blue 40%,yellow 100%); }
實例：
div { width:300px; height: 300px; background:radial-gradient(circle at center,red 0,blue 40%,yellow 100%); }
六、背景圖片起始位置background-origin
語法：background-origin ： border-box | padding-box | content-box;
參數分別表示背景圖片是從邊框，仍是內邊距（默認值），或者是內容區域開始顯示。默認border區
實例：
div { width:100px; height: 100px; padding: 50px; border: 50px solid rgba(0,0,0,0.5); background-image: url('timg.jpg'); background-repeat: no-repeat; background-origin: padding-box; }
實例：
div { width:100px; height: 100px; padding: 50px; border: 50px solid rgba(0,0,0,0.5); background-image: url('timg.jpg'); background-repeat: no-repeat; background-origin: content-box; }
七、裁剪背景background-clip
語法：background-clip ： border-box | padding-box | content-box | no-clip
參數分別表示從邊框、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和參數border-box顯示一樣的效果。background-clip默認值爲border-box。
background-clip : text ;從前景內容的形狀（好比文字）做爲裁剪區域向外裁剪，如此便可實現使用背景做爲填充色之類的遮罩效果
注意：webkit獨有屬性，且必須配合text-fill-color屬性
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-fill-color:-webkit-background-clip;
-webkit-background-clip: text;
實例：
div { width:100px; height: 100px; padding: 50px; border: 50px solid rgba(0,0,0,0.5); background-image: url('timg.jpg'); background-repeat: no-repeat; background-clip: content-box; }
實例：
div { width:100px; height: 100px; padding: 50px; border: 50px solid rgba(0,0,0,0.5); background-image: url('timg.jpg'); background-repeat: no-repeat; background-clip: padding-box; }
八、背景圖片尺寸background-size
設置背景圖片的大小，以長度值或百分比顯示，還能夠經過cover和contain來對圖片進行伸縮。
語法：background-size: auto | <長度值> | <百分比> | cover | contain
取值說明：
1）auto：默認值，不改變背景圖片的原始高度和寬度；
2）<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置爲前面兩個值，當設置一個值時，將其做爲圖片寬度值來等比縮放；
3）<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置爲所在元素寬高乘之前面百分比得出的數值，當設置一個值時同上；
4）cover：用一張圖片鋪滿整個背景，若是比例不符，則截斷圖片
5）contain：儘可能讓背景內，存在一整張圖片
實例：
div { width:100px; height: 100px; padding: 50px; border: 50px solid rgba(0,0,0,0.5); background-image: url('timg.jpg'); background-repeat: no-repeat; background-size: cover; }
實例：
div { width:100px; height: 100px; padding: 50px; border: 50px solid rgba(0,0,0,0.5); background-image: url('timg.jpg'); background-repeat: no-repeat; background-size: contain; }
九、文本陰影text-shadow
text-shadow:X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離，其值爲正值時陰影向右偏移，反之向左偏移；
Y-Offset：是指陰影的垂直偏移距離，若是其值是正值時，陰影向下偏移，反之向上偏移；
Blur：是指陰影的模糊程度，其值不能是負值，若是值越大，陰影越模糊，反之陰影越清晰，若是不須要陰影模糊能夠將Blur值設置爲0；
Color：是指陰影的顏色，其可使用rgba色。
好比，咱們能夠用下面代碼實現設置陰影效果；text-shadow: 0 1px 1px #fff
實例：
text-shadow: 0 1px 1px red;
十、文字邊界換行
word-wrap:normal或者break-word
實例：
div{ width: 100px; height: 300px; } p{ text-shadow: 0 1px 1px red; word-wrap: break-word; }
十一、引入字體font-face
@font-face{ font-family:」myFirstFont」; src:url('Sansation_Light.ttf'), url(‘Sansation_Light.eot') format(‘eot’)； } p{ font-family:」myFristFont」; }
format: 此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別瀏覽器對@font-face的兼容問題，這裏涉及到一個字體format的問題，由於不一樣的瀏覽器對字體格式支持是不一致的，瀏覽器自身也沒法經過路徑後綴來判斷字體。font-family名字自定義。
@font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9+ */ src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('diyfont.woff') format('woff'), /* chrome、firefox */ url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */ }
Css3字體地址：http://www.w3cplus.com/content/css3-font-face
綜合練習：製做導航菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; } ul { display: inline-block; background: rgba(255, 165, 0, 1); border-radius: 10px; box-shadow: 0 5px 5px #666; } ul li { display: inline-block; border-right: 1px dashed #fff; color: #fff; font-size: 30px; padding: 0 30px; margin: 10px 0; line-height: 20px; text-shadow: 4px 4px 4px #888; } ul li:last-child { border-right: none; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
3、css3選擇器介紹
一、屬性選擇器
E[att^=「val」] {…} 選擇匹配元素E, 且E元素定義了屬性att, 其屬性值以val開頭的任何字符串
E[att$=「val」]{…}選擇匹配元素E, 且E元素定義了屬性att, 其屬性值以val結尾的任何字符串
E[att*=「val」]{…}選擇匹配元素E, 且E元素定義了屬性att, 其屬性值任意位置出現了「val」。即屬性值包含了「val」，位置不限。
二、僞類選擇器
僞類用於向某些選擇器添加特殊的效果。
僞類的效果能夠經過添加一個實際的類來達到。僞元素的效果則須要經過添加一個實際的元素才能達到。這也是爲何他們一個稱爲僞類，一個稱爲僞元素的緣由。
1）root 根標籤選擇器
「:root」選擇器等同於<html>元素，簡單點說：
:root{background:orange}和html{background:orange}獲得的效果等同，建議使用:root（xml等）
:root{ background: rgba(255,4,4,1); }
2）:not 否認選擇器
用法和jQuery 中的not相似，能夠排除某些特定條件的元素
div:not([class=「demo」]){
background-color:red;
}意思爲除了class爲demo的div之外，全部的div的背景顏色都變紅
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; } ul{ margin: 100px; width: 300px; } ul li{ height: 30px; line-height: 30px; border: 1px solid #666; text-align: center; } li:not([class = 'li1']){ color: red; } </style> </head> <body> <ul> <li class="li1">1</li> <li class="li1">2</li> <li class="li1">3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
3）empty 空標籤選擇器
用來選擇沒有內容的元素、不在文檔樹中的元素，這裏的沒有內容指的是一點內容都沒有，哪怕是一個空格。
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; } ul{ margin: 100px; width: 300px; } ul li{ height: 30px; line-height: 30px; border: 1px solid #666; text-align: center; } li:empty{ background: burlywood; } </style> </head> <body> <ul> <li class="li1">1</li> <li class="li1">2</li> <li class="li1">3</li> <li>4</li> <li>5</li> <li>6</li> <li></li> </ul> </body> </html>
4）target 目標元素選擇器
用來匹配被location.hash 選中的元素(即錨點元素)
選擇器可用於選取當前活動的目標元素
5）:first-child 第一個子元素
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul{ margin: 100px; width: 300px; } ul li{ height: 30px; line-height: 30px; border: 1px solid #666; text-align: center; } li:first-child{ color: red; } </style> </head> <body> <li>0</li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li></li> </ul> </body> </html>
body中，第一個li 0被選定
ul中，第一個li 1被選定
:last-child 最後一個子元素
:nth-child(){} 第xxx個子元素，n表明變量天然數
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul{ margin: 100px; width: 300px; } ul li{ height: 30px; line-height: 30px; border: 1px solid #666; text-align: center; } li:nth-child(3){ color: red; background: yellow; } </style> </head> <body> <li>0</li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li></li> </ul> </body> </html>
:nth-last-child(){} 從後往前數
以上四個選擇器均有弊端，即若是當前位置元素不是前面所修飾的元素，那麼無效
注：其父元素的第 N 個子元素，不論元素的類型。
6）:first-of-type 第一個子元素
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul{ margin: 100px; width: 300px; } ul li{ height: 30px; line-height: 30px; border: 1px solid #666; text-align: center; } li:first-of-type{ color: red; background: yellow; } </style> </head> <body> <li>0</li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li></li> </ul> </body> </html>
:last-of-type 最後一個子元素
:nth-of-type(){} 第xxx個子元素，n表明變量天然數
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul{ margin: 100px; width: 300px; } ul li{ height: 30px; line-height: 30px; border: 1px solid #666; text-align: center; } li:nth-of-type(3){ color: red; background: yellow; } </style> </head> <body> <li>0</li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li></li> </ul> </body> </html>
實例：
li:nth-of-type(2n) { background: pink; }
實例：
ul li:nth-of-type(2n-1) { background: pink; }
:nth-last-of-type(){} 從後往前數
此種選擇器，限制了類型，即在所修飾元素的類型下選擇特定位置的元素。
7）only-child 惟一子元素選擇器
選擇是獨生子的子元素，即該子元素不能有兄弟元素，它的父元素只有他一個直接子元素。
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul { margin: 100px; width: 300px; } ul li { height: 30px; line-height: 30px; border: 1px solid #666; text-align: center; } span:only-child { color: red; } </style> </head> <body> <li>0</li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li></li> </ul> <p> <span>123</span> </p> </body> </html>
Span是p下面的惟一直接子元素，123變紅色
注意：選擇的元素是獨生子子元素，而非有惟一子元素的父元素。
8）:only-of-type
若是要選擇第某類特定的子元素(p) 在兄弟節點中是此類元素惟一個的話，就須要用到這個屬性了
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul { margin: 100px; width: 300px; } ul li { height: 30px; line-height: 30px; border: 1px solid #666; text-align: center; } li:only-of-type { color: red; } </style> </head> <body> <li>0</li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li></li> </ul> <p> <span>123</span> </p> </body> </html>
Body直接子元素中，有且只有一個li，0被選中
9）:enabled 可用的元素
:disabled 不可用的元素
在web的表單中，有些表單元素有可用（「enabled」）和不可用（「disabled」）狀態，好比輸入框，密碼框，複選框等。在默認狀況下，這些表單元素都處在可用狀態。那麼咱們能夠經過僞類選擇器 enabled 進行選擇，disabled則相反。
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> input{ width: 300px; height: 30px; } input:enabled{ background: green; } input:disabled{ background: red; } </style> </head> <body> <input type="text" disabled> <input type="text"> </body> </html>
10）:checked
選擇框的被選中狀態
注：checkbox, radio 的一些默認狀態不可用屬性進行改變，如邊框顏色。
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> input:checked{ width: 30px; height: 30px; } </style> </head> <body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </body> </html>
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> input:checked{ width: 30px; height: 30px; } </style> </head> <body> <input type="radio" name="aa"> <input type="radio" name="aa"> <input type="radio" name="aa"> </body> </html>
11）:read-only 選中只讀的元素
eg:<input type=「text」 readonly=「readonly」/>
:read-write 選中非只讀的元素
eg:<input type=「text」/>
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 只讀 */ input:read-only { background: gray; } /* 非只讀 */ input:read-write{ width: 300px; height: 40px; } </style> </head> <body> 非只讀<input type="text" name="aa"> 非只讀<input type="text" name="aa"> read-only<input type="text" name="aa" readonly="readonly"> </body> </html>
三、僞元素選擇器
僞元素的效果是須要經過添加一個實際的元素才能達到的。
CSS3對僞元素進行了必定的調整，在之前的基礎上增長了一個:也就是如今變成了::first-letter,::first-line,::before,::after
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 400px; } p::first-letter{ font-size: 30px; } p::first-line{ color: red; } </style> </head> <body> <div> <p>哈佛都是雙方開始以爲很瘋狂收到回覆看見電視劇看電視付款電視劇看電視瘋狂的事電視劇附近的示範戶的說法 空間上的飛機的速度就會 快捷方式的儘快決定生合法的身份以爲是發貨仍是</p> </div> </body> </html>
另外還增長了一個::selection
「::selection」 選擇器是用來匹配突出顯示的文本（用鼠標選擇文本的時候）。瀏覽器默認狀況下，用鼠標選擇網頁文本是以「藍色的北京，白色的字體」顯示的。
注：火狐下必須加-moz- ：-moz-::selection
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 400px; } p::selection{ background: blue; color: red; word-wrap: break-word; } </style> </head> <body> <div> <p>哈佛都是雙方開始以爲很瘋狂收到回覆看見電視劇看電視付款電視劇看電視瘋狂的事電視劇附近的示範戶的說法 空間上的飛機的速度就會 快捷方式的儘快決定生合法的身份以爲是發貨仍是</p> </div> </body> </html>
屬性：user-select: none;
實例：
p::selection{ user-select: none; }
此段代碼實現沒法用光標選擇文本
四、條件選擇器
1）直接子元素 E > F an F element child of an E element
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul{ width: 300px; border: 1px solid #666; } li > span{ color: red; } </style> </head> <body> <ul> <li> <span>123</span> </li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <span>8</span> </body> </html>
2）後面的緊挨着的兄弟節點 E + F an F element immediately preceded by an E element
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul{ width: 300px; border: 1px solid #666; } li + span{ color: red; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <span>6</span> <span>7</span> <p>你好</p> </ul> <span>8</span> </body> </html>
3）後面的兄弟節點 E ~ F an F element preceded by an E element
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul { width: 300px; border: 1px solid #666; } span~li { color: red; } </style> </head> <body> <ul> <span>123</span> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
實例：點擊小圖表，切換指定區域的背景圖片,要求不能用js（切換tab選項）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .wrapper { position: relative; width: 300px; height: 320px; margin: 10px auto; border: 1px solid black; text-align: center; } .wrapper input{ height: 20px; } .wrapper div{ position: absolute; top: 20px; width: 300px; height: 300px; } .wrapper div:nth-of-type(1){ display: none; background: red; } .wrapper div:nth-of-type(2){ display: none; background: green; } .wrapper div:nth-of-type(3){ display: none; background: pink; } .wrapper input:checked + div{ display: block; } </style> </head> <body> <div class="wrapper"> <input type="radio" name="aa" checked> <div>a</div> <input type="radio" name="aa"> <div>b</div> <input type="radio" name="aa"> <div>c</div> </div> </body> </html>
五、透明色顏色值 transparent
transparent 是顏色中的透明色。
實例：利用transparent畫三角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; border: 100px solid transparent; border-bottom-color: red; } </style> </head> <body> <div class="wrapper"> </div> </body> </html>
- 1. CSS3–1.css3 新增選擇器
- 2. css3新增的選擇器
- 3. CSS3 選擇器——屬性選擇器
- 4. Css3 選擇器 --屬性選擇器
- 5. CSS3選擇器-屬性選擇器
- 6. CSS3選擇器——屬性選擇器
- 7. CSS3---屬性選擇器
- 8. CSS3屬性選擇器
- 9. CSS3——屬性選擇器
- 10. CSS3 新增選擇器
- 更多相關文章...
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • XQuery 選擇 和 過濾 - XQuery 教程
- • Docker容器實戰(一) - 封神Server端技術
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
- 1. CSS3–1.css3 新增選擇器
- 2. css3新增的選擇器
- 3. CSS3 選擇器——屬性選擇器
- 4. Css3 選擇器 --屬性選擇器
- 5. CSS3選擇器-屬性選擇器
- 6. CSS3選擇器——屬性選擇器
- 7. CSS3---屬性選擇器
- 8. CSS3屬性選擇器
- 9. CSS3——屬性選擇器
- 10. CSS3 新增選擇器