css選擇器的使用詳解
-、css選擇器的分類:
二、常用選擇器詳解:
1、標籤選擇器:
語法:
標籤名 {
屬性:屬性值;
}
程式碼示例:
h1 {
color: #ccc;
font-size: 28px;
}
2、類選擇器:
語法:
.類名 {
屬性:屬性值;
}
程式碼示例:
.top {
margin-top:25px;
}
<div class="top"></div>
3、id選擇器:
語法:
#ID名稱 {
屬性:屬性值;
}
程式碼示例:
#top {
padding-top:10px;
}
<div id="top"></div>
注意:ID屬性是唯一標識。
4、偽類
語法:
元素:偽類 {
屬性:屬性值;
}
程式碼示例:
a:link {
color:blue;
}
5、並集選擇器:
語法:
標籤名,.類名,#ID名稱 {
屬性:屬性值;
}
程式碼示例:
p,.top,#title {
color:red;
}
6、後代選擇器:
語法:
p span {
屬性:屬性值;
}
三、通用選擇器詳解:
語法:
*{
屬性:屬性值;
}
四、高階選擇器詳解:
1、子選擇器:
程式碼示例:
#nav>li {
padding-left: 20px;
}
2、相鄰同胞選擇器:
程式碼示例:
h2+p {
font-size: 1.4em;
}
3、屬性選擇器:
程式碼示例:
[id="header"] {
background: url(branding-color.png) repeat-y left top;
}
a[rel="nofollow"] {
padding-right: 20px;
}
五、樣式的優先順序(權重):
基本選擇器之間:ID選擇器〉類選擇器〉標籤選擇器
樣式表之間: 行內樣式〉內嵌樣式〉外部樣式
css樣式之間: 同一個選擇器且兩條相同的宣告,後一條宣告會覆蓋前一條宣告
相關推薦
css選擇器詳解
cto 而不是 波浪 alt {} style sce 類選擇器 color 1、元素選擇器 2、類選擇器 3、ID選擇器 4、屬性選擇器 5、派生選擇器 1、元素選擇器 最常見的css選擇器當屬元素選擇器了,在HTML文檔中該選擇器通常是指某種HT
CSS選擇器詳解(一)常用選擇器
toolbar selector rst prope 第一個 出現 很多 script img 目錄 類型選擇器 類選擇器 ID選擇器 偽類 偽元素 類型選擇器 通過類型選擇器可以選擇某一類型的html標簽,並對其使用樣式。 語法:
CSS選擇器詳解(總結)
一、CSS選擇器。 a、基本選擇器詳解。 名稱 語法構成 描述 返回值 示例 標籤選擇器 element 根據給定的標籤名匹配元素 元素集合
CSS選擇器詳解及常用樣式表標記標籤屬性
本學期開設有個ASP.NET課程,剛開始兩週,一直處於複習 web技術階段,剛好自己準備好好學一下CSS的相關內容,就順路一起看看,瞭解CSS常用的選擇器,這樣在後續的個人網站開發上,可以更方便,進入正題:CSS:Cascading Style Sheets(層疊樣式表) 常
CSS選擇器詳解一
css中包括:元素選擇器、通用(*)選擇器、類(class)選擇器、id選擇器、屬性選擇器、後代選擇器、子元素選擇器、相鄰兄弟元素選擇器、兄弟元素選擇器等,如下例: <!DOCTYPE HTML> <html> <head> <st
web前端學習(三)css學習筆記部分(6)-- 選擇器詳解
9、選擇器詳解 9.1 屬性選擇器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</
CSS入門之樣式表與選擇器詳解
CSS用來定義HTML頁面中文字顯示樣式,還有類、層等特性,還可以對文字重疊、定位等。引入CSS到HTML中,主要是因為在傳統的HTML上控制文字顯示樣式和版面非常難,引入CSS之後,控制方式變得簡單,頁面也變得更加美觀、豐富。 所以CSS主要就是用來提供樣
CSS中交集選擇器詳解
CSS中交集選擇器有兩種,分別是例如 p.special{} 以及p#special類似的兩種 交集選擇器中不能有空格,下面是測試程式碼 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <
四 . css系列之選擇器詳解及權重
(一)選擇器詳解 1.標籤選擇器(元素選擇器):HTML標籤作為選擇器,作用是選取HTML文件中相同的HTML元素P{} 2.類選擇器 第一步:設定類名<開始標籤 class="類名"></結束標籤> 第二步:為類設定樣式.
CSS 類選擇器詳解——CSS 多類選擇器
CSS 類選擇器 類選擇器允許以一種獨立於文件元素的方式來指定樣式。 該選擇器可以單獨使用,也可以與其他元素結合使用。 提示:只有適當地標記文件後,才能使用這些選擇器,所以使用這兩種選擇器通常需要先做一些構想和計劃。 要應用樣式而不考慮具體設計的元素,最常用的方法就是使用類選擇器。 修改 HTML 程式碼
css3筆記系列-3.css中的各種選擇器詳解,不看後悔系列
最詳細的css3選擇器解析 選擇器是什麼? 比較官方的解釋:在 CSS 中,選擇器是一種模式,用於選擇需要新增樣式的元素。 最常見的 CSS 選擇器是元素選擇器。換句話說,文件的元素就是最基本
jquery選擇器詳解
orm visible type nbsp line style .html box con 一、基本選擇器 #box .box1 div $("#box, .box1"); 二、層級選擇器 $("div p"); //div中的所有p $("div > p");
CSS3 基礎(1)——選擇器詳解
hover 代碼 -o this site 特征 child ack ble CSS3選擇器詳解 一、 屬性選擇器 在CSS3中,追加了三個屬性選擇器分別為:[att*=val]、[att^=val]和[att$=val],使得屬性選擇器有了通配符的概念。 選
jQuery的介紹和選擇器詳解
markdown spa 結果 過程 問題 js對象 -m 版本 分享圖片 本文最初發表於博客園,並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我,一起入門和進階前端。 以下是正文。 jQuery 的介紹 引入 jQuery 的原因 在用 js
關於css3屬性選擇器詳解
什麼是屬性選擇器 指對帶有指定屬性的HTML元素設定樣式,有以下幾種: 1.element[attribute] 2.element[attribute = "value"] 3.element[attribute ~= "value"] 4.ele
JQuery 常見選擇器詳解練習1
1.常見基本選擇器程式碼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl
CSS3選擇器詳解
一、CSS3選擇器分類 1.基本選擇器 2.層次選擇器 3.偽類選擇器 1)動態偽類選擇器 2)目標偽類選擇器 3)語言偽類選擇器 4)UI元素狀態偽類選擇器 5)結構偽類選擇器 6)否定偽類選擇
CSS 篩選器詳解
1.為什麼要研究CSS篩選器?因為想在頁面中控制一個元素的樣式太困難太麻煩了。使用內聯CSS基本上宣佈了放棄介面的可維護性;使用js修改樣式,寫不好的話,維護性也等同於零。而CSS樣式表是原生的維護性最好的外掛,好的樣式表,可以控制整站樣式。更關鍵的是,jQuery也使用CSS篩選器來抓取DOM引用。因此
jQuery過濾選擇器詳解
基本過濾選擇器 選取第一個元素(:first) //選擇第一個div元素. $('#btn1').click(function(){ $('div:first').css("background","#b
CSS3 選擇器詳解
一、CSS樣式的基本規則(1)連結外部樣式檔案:這種方式將樣式檔案徹底與HTML,樣式檔案需要額外的引入。在這種方式下,一批樣式可以控制多分文件。<link rel="stylesheet" type="text/css" href="Css樣式單1.css"/>