當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

十天精通CSS3学习笔记 part2

發(fā)布時間：2025/4/9 CSS 38 豆豆

生活随笔收集整理的這篇文章主要介紹了十天精通CSS3学习笔记 part2 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

第6章征服CSS3選擇器（上）

屬性選擇器

? ?在HTML中，通過各種各樣的屬性可以給元素增加很多附加的信息。例如，通過id屬性可以將不同div元素進行區(qū)分。

? ?在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎上對屬性選擇器進行了擴展，新增了3個屬性選擇器，使得屬性選擇器有了通配符的概念，這三個屬性選擇器與CSS2的屬性選擇器共同構成了CSS功能強大的屬性選擇器。如下表所示：

(單擊可放大)

?實例展示：

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; }

?結果顯示：

結構性偽類選擇器—root

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

示例演示：

通過“:root”選擇器設置背景顏色

HTML代碼：

<div>:root選擇器的演示</div>

CSS代碼：

:root {background:orange; }

演示結果：

“:root”選擇器等同于<html>元素，簡單點說：

:root{background:orange}html {background:orange;}

得到的效果等同。

建議使用:root方法。

另外在IE９以下還可以借助“:root”實現(xiàn)hack功能。

結構性偽類選擇器—not

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

form {width: 200px;margin: 20px auto; } div {margin-bottom: 20px; } input:not([type="submit"]){border:1px solid red; }

相關HTML代碼：

<form action="#"><div><label for="name">Text Input:</label><input type="text" name="name" id="name" placeholder="John Smith" /></div><div><label for="name">Password Input:</label><input type="text" name="name" id="name" placeholder="John Smith" /></div><div><input type="submit" value="Submit" /></div> </form> ?

演示結果：

結構性偽類選擇器—empty

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

示例顯示：

比如說，你的文檔中有三個段落p元素，你想把沒有任何內容的P元素隱藏起來。我們就可以使用“:empty”選擇器來控制。

HTML代碼：

<p>我是一個段落</p> <p> </p> <p></p>?

CSS代碼：

p{background: orange;min-height: 30px; } p:empty {display: none; }?

演示結果：

結構性偽類選擇器—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、具體來說，觸發(fā)元素的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; }

上面的代碼可以對不同的target對象分別設置不的樣式。

點擊一個鏈接， div下的p發(fā)生變化：

#brand:target p{color:#fff;background:yellow; }

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

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

示例演示

通過“:first-child”選擇器定位列表中的第一個列表項，并將序列號顏色變?yōu)榧t色。

HTML代碼：

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; }

演示結果：

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

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

ul>li:last-child{background:blue;}

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

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

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

案例演示

? 通過“:nth-child(n)”選擇器，并且參數(shù)使用表達式“2n”，將偶數(shù)行列表背景色設置為橙色。

HTML代碼：

<ol><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li><li>item9</li><li>item10</li> </ol>?

CSS代碼：

ol > li:nth-child(2n){background: orange; }

演示結果：

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

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

first-of-type選擇器

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

示例演示：

通過“:first-of-type”選擇器，定位div容器中的第一個p元素（p不一定是容器中的第一個子元素），并設置其背景色為橙色。

HTML代碼：

<div class="wrapper"><div>我是一個塊元素，我是.wrapper的第一個子元素</div><p>我是一個段落元素，我是不是.wrapper的第一個子元素，但是他的第一個段落元素</p><p>我是一個段落元素</p><div>我是一個塊元素</div> </div>

CSS代碼：

.wrapper {width: 500px;margin: 20px auto;padding: 10px;border: 1px solid #ccc;color: #fff; } .wrapper > div {background: green; } .wrapper > p {background: blue; } /*我要改變第一個段落的背景為橙色*/ .wrapper > p:first-of-type {background: orange; }

演示結果：

nth-of-type(n)選擇器

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

CSS3選擇器:nth-child和:nth-of-type之間的差異

示例演示

通過“:nth-of-type(2n)”選擇器，將容器“div.wrapper”中偶數(shù)段數(shù)的背景設置為橙色。

HTML代碼：

<div class="wrapper"><div>我是一個Div元素</div><p>我是一個段落元素</p><div>我是一個Div元素</div><p>我是一個段落</p><div>我是一個Div元素</div><p>我是一個段落</p><div>我是一個Div元素</div><p>我是一個段落</p><div>我是一個Div元素</div><p>我是一個段落</p><div>我是一個Div元素</div><p>我是一個段落</p><div>我是一個Div元素</div><p>我是一個段落</p><div>我是一個Div元素</div><p>我是一個段落</p> </div>

CSS代碼：

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

演示結果：

last-of-type選擇器

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

示例演示

通過“?:last-of-type?”選擇器，將容器“?div.wrapper?”中最后一個段落元素背景設置為橙色

（提示：這個段落不是“div.wrapper”容器的最后一個子元素）。

HTML代碼：

<div class="wrapper"><p>我是第一個段落</p><p>我是第二個段落</p><p>我是第三個段落</p><div>我是第一個Div元素</div><div>我是第二個Div元素</div><div>我是第三個Div元素</div> </div>

CSS代碼：

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

演示結果：

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

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

示例演示

通過“?:nth-last-of-type(n)?”選擇器將容器“?div.wrapper?”中的倒數(shù)第三個段落背景設置為橙色。

HTML代碼：

<div class="wrapper"><p>我是第一個段落</p><p>我是第二個段落</p><p>我是第三個段落</p><p>我是第四個段落</p><p>我是第五個段落</p><div>我是一個Div元素</div><p>我是第六個段落</p><p>我是第七個段落</p> </div>

CSS代碼：

.wrapper > p:nth-last-of-type(3){background: orange; }

演示結果：

only-child選擇器

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

示例演示

通過“?:only-child?”選擇器，來控制僅有一個子元素的背景樣式，為了更好的理解，我們這個示例通過對比的方式來向大家演示。

HTML代碼：

<div class="post"><p>我是一個段落</p><p>我是一個段落</p> </div> <div class="post"><p>我是一個段落</p> </div>

CSS代碼：

.post p {background: green;color: #fff;padding: 10px; } .post p:only-child {background: orange; }

演示結果：

only-of-type選擇器

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

示例演示

通過“?:only-of-type?”選擇器來修改容器中僅有一個div元素的背景色為橙色。

HTML代碼：

<div class="wrapper"><p>我是一個段落</p><p>我是一個段落</p><p>我是一個段落</p><div>我是一個Div元素</div> </div> <div class="wrapper"><div>我是一個Div</div><ul><li>我是一個列表項</li></ul><p>我是一個段落</p> </div>

CSS代碼：

.wrapper > div:only-of-type {background: orange; }

演示結果：

第7章征服CSS3選擇器（下）

:enabled選擇器

在Web的表單中，有些表單元素有可用（“?:enabled?”）和不可用（“?:disabled?”）狀態(tài)，比如輸入框，密碼框，復選框等。在默認情況之下，這些表單元素都處在可用狀態(tài)。那么我們可以通過偽選擇器“?:enabled?”對這些表單元素設置樣式。

示例演示

通過“?:enabled?”選擇器，修改文本輸入框的邊框為2像素的紅色邊框，并設置它的背景為灰色。

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; }

結果演示

:disabled選擇器

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

:checked選擇器

在表單元素中，單選按鈕和復選按鈕都具有選中和未選中狀態(tài)。（大家都知道，要覆寫這兩個按鈕默認樣式比較困難）。在CSS3中，我們可以通過狀態(tài)選擇器“?:checked?”配合其他標簽實現(xiàn)自定義樣式。而“?:checked?”表示的是選中狀態(tài)。

示例演示：

通過“?:checked?”狀態(tài)來自定義復選框效果。

HTML代碼

CSS代碼：

.box {display: inline-block;width: 30px;height: 30px;margin-right: 10px;position: relative;background: orange;vertical-align: middle;border-radius: 100%; } .box input {opacity: 0;position: absolute;top:0;left:0;width: 100%;height:100%;z-index:100;/*使input按鈕在span的上一層，不加點擊區(qū)域會出現(xiàn)不靈敏*/ }.box span { display: block;width: 10px;height: 10px;border-radius: 100%;position: absolute;background: #fff;top: 50%;left:50%;margin: -5px 0 0 -5px;z-index:1; }input[type="radio"] + span {opacity: 0;} input[type="radio"]:checked + span {/*+為兄弟選擇器，代表+兩側的元素是前后緊鄰的。整體解釋：選擇緊鄰前面的標簽為選中的radiobox的span標簽 */opacity: 1; }

結果演示：

::selection選擇器

“?::selection?”偽元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。瀏覽器默認情況下，用鼠標選擇網(wǎng)頁文本是以“深藍的背景，白色的字體”顯示的，效果如下圖所示：

從上圖中可以看出，用鼠標選中“專注IT、互聯(lián)網(wǎng)技術”、“純干貨、學以致用”、“沒錯、這是免費的”這三行文本中，默認顯示樣式為：藍色背景、白色文本。

有的時候設計要求,不使用上圖那種瀏覽器默認的突出文本效果，需要一個與眾不同的效果，此時“?::selection?”偽元素就非常的實用。不過在Firefox瀏覽器還需要添加前綴。

示例演示:

通過“?::selection?”選擇器，將Web中選中的文本背景變成紅色，文本變成綠色。

HTML代碼：

?<p>“::selection”偽元素是用來匹配突出顯示的文本。瀏覽器默認情況下，選擇網(wǎng)站文本是深藍的背景，白色的字體，</p>?

CSS代碼：

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

結果演示：

注意：

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

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

:read-only選擇器

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

示例演示

通過“?:read-only?”選擇器來設置地址文本框的樣式。

HTML代碼：

CSS代碼：

form {width: 300px;padding: 10px;border: 1px solid #ccc;margin: 50px auto; } form > div {margin-bottom: 10px; }input[type="text"]{border: 1px solid orange;padding: 5px;background: #fff;border-radius: 5px; }input[type="text"]:-moz-read-only{border-color: #ccc; } input[type="text"]:read-only{border-color: #ccc; }

結果演示

:read-write選擇器

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

示例演示

使用“?:read-write?”選擇器來設置不是只讀控件的文本框樣式。

HTML代碼：

CSS代碼：

結果演示：

::before和::after

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

.clearfix::before, .clearfix::after {content: ".";display: block;height: 0;visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}

當然可以利用他們制作出其他更好的效果，比如右側中的陰影效果，也是通過這個來實現(xiàn)的。

關鍵代碼分析：

.effect::before, .effect::after{content:"";position:absolute;z-index:-1;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);box-shadow:0 0 20px rgba(0,0,0,0.8);top:50%;bottom:0;left:10px;right:10px;-moz-border-radius:100px / 10px;border-radius:100px / 10px; }

上面代碼作用在class名叫.effect上的div的前（before）后(after)都添加一個空元素，然后為這兩個空元素添加陰影特效。

效果：

全部代碼：

CSS代碼：

.box h3{text-align:center;position:relative;top:80px; } .box {width:70%;height:200px;background:#FFF;margin:40px auto; }.effect{position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect::before, .effect::after{content:"";position:absolute; z-index:-1;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);box-shadow:0 0 20px rgba(0,0,0,0.8);top:50%;bottom:0;left:10px;right:10px;-moz-border-radius:100px / 10px;border-radius:100px / 10px; }

HTML代碼：

<body><div class="box effect"><h3>Shadow Effect </h3></div> </body>

轉載于:https://www.cnblogs.com/benbendu/p/5823222.html

總結

以上是生活随笔為你收集整理的十天精通CSS3学习笔记 part2的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：动画--过渡属性 transition-
下一篇：使用日志记录功能查看PHP扩展的执行过程