css選擇器實例分享-css教學-PHP中文網

首頁

web前端

css教學

css選擇器實例分享

小云云

Feb 28, 2018 am 10:38 AM

css 選擇器

現在正在學習jquery的選擇器的使用，與css中的大部分選擇器有相同之處，這裡對css的選擇器做一個總結便於以後對比學習。

第一個、元素選擇器：

## 通配選擇器：*{} 一般用於全域的消除瀏覽器自帶效果

##類型選擇器：E{} html的標籤，一般用於消除一些特定的瀏覽器自帶效果

id選擇器：#myid{} id選擇器：#myid{} 於命名特別的區域。學會利用id只能有一個的功能

類別選擇器：.myclass{} 主要用於設定特效，並使用class可以使用多個的功能對網頁進行佈局設計

第二、關係選擇器：

包含選擇器：E F(注意這裡的符號是空格，關係選擇器) 在設定網頁效果時長期使用，目前本人所理解的是用於精確定位

注意：包含選擇器在某些地方也叫子類別選擇器，且這裡的子類別無論嵌套多深都會實現，如下圖

注意：這裡只能是父親元素的下一級子元素，不能是子元素的子元素。請與上面的子類別選擇器區分。鄰近選擇器：E+F 兄弟選擇器。

則：這裡會選擇所有在E後面的相同元素，並在開發中不常用。

第三、屬性選擇器：使用頻率比較少)

屬性選擇器的分類：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att~="val"]、E[att^="val"]、E[att$="val" ]、E[att*="val"]
、E[att|="val"]

#########

地##1 E[受att屬性：選擇具有att屬性的E元素

"val"]:選擇具有att屬性且屬性值等於val的E元素

# 地使用

,「且##」valval"]:選擇具有屬性且屬性值以結尾具有結尾的#

地#為具有且屬性的元素」為包含的屬性和屬性的元素
# 地##1 E[att|= "val"]:選擇具有att屬性且屬性值為以val開頭並以連接符號"-"分隔符號的字串的E元素。

特殊的|

第四、偽類選擇器：(重點，用於一些特殊的佈局效果)
關於超連結a的偽類選擇器

E:visited 使用後的樣式 E:hover 鼠標放到超鏈接上時的效果(時常使用

)

E:active 於滑鼠點選與釋放之間發生的事件 E:focus 當取得到焦點的時候放生，該物件的onfocus事件發生

其他偽類選擇者：

# 匹配不含有s選擇器的元素E,用於取消某個特定的選擇器

E:root 匹配E元素在文檔中的根元素。在html中，根元素永遠是html。

# E:first-child 符合父元素的第一個子元素E 注意：用於有大量內容的時候，設定某些特殊的效果

E:last-child only-child 配對父元素僅有的一個子元素E 注意：要使該屬性生效，子元素只能有一個。（這裡記著jquery中也有使用）

.或奇數（基礎）

E:nth-last-child(n #11元素的倒數第一個子元素的倒數第#
##

的第一個同級兄弟元素E

‧在對上 E :only-of-type

符合同類型中的唯一的同級兄弟元素E

E:nth-of-type(n) 與選擇同級類型中的第一個同等級兄弟中的第一個等級1##E#1
## E:nth-last-of-type E:nth-last-of-type 與相同類型中的倒數第n

#11
#

:empty 搭配沒有任何子元素的元素E 注意：不僅沒有子元素，而且裡面沒有顯示任何東西才能生效

E:checked （用於input type為radio與checkbox時）
# 就是字面意思

E:disabled E:disabled E:disableEs介面上禁用狀態的元素。就是字面上

E:target

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>目标伪类选择符 E:target_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
.test .hd{padding:10px 0;}
.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;}
.test .bd h2{border-bottom:1px solid #ddd;}
.test .bd .panel:target{border-color:#f60;}
.test .bd .panel:target h2{border-color:#f60;}
h2,p{margin:0;padding:10px;font-size:16px;}
</style>
</head>
<body>
<p class="test">
	<p class="hd">
		<a href="#panel1">前往区块1</a>
		<a href="#panel2">前往区块2</a>
		<a href="#panel3">前往区块3</a>
		<a href="#panel4">前往区块4</a>
		<a href="#panel5">前往区块5</a>
	</p>
	<p class="bd">
		<p id="panel1" class="panel">
			<h2>区块1</h2>
			<p><p>区块1内容</p><p>区块1内容</p><p>区块1内容</p></p>
		</p>
		<p id="panel2" class="panel">
			<h2>区块2</h2>
			<p><p>区块2内容</p><p>区块2内容</p><p>区块2内容</p></p>
		</p>
		<p id="panel3" class="panel">
			<h2>区块3</h2>
			<p><p>区块3内容</p><p>区块3内容</p><p>区块3内容</p></p>
		</p>
		<p id="panel4" class="panel">
			<h2>区块4</h2>
			<p><p>区块4内容</p><p>区块4内容</p><p>区块4内容</p></p>
		</p>
		<p id="panel5" class="panel">
			<h2>区块5</h2>
			<p><p>区块5内容</p><p>区块5内容</p><p>区块5内容</p></p>
		</p>
	</p>
</p>
</body>
</html>

登入後複製

第五、偽物件選擇器：

常用：

寫法，單獨的冒號任然適用

E:after/E::after

E:first-line/ E::first-line 設定下的第一行樣式(懶得寫了，反正使用的不多。可檢視協助文件)

. E::firset- letter 設定物件內的第一個字元的樣式（這個寫文章用得多，很明顯現在市場上用得少）

#相關推薦：

#CSS選擇器的新用法詳解

CSS選擇器欄位解析的實作方法

詳解CSS選擇器Selector

以上是css選擇器實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7720

Java教學

1641

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1233

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。