首頁 > web前端 > js教程 > 主體

CSS選擇器使用方法總結

php中世界最好的语言
發布: 2018-05-25 11:36:53
原創
2431 人瀏覽過

這次帶給大家CSS選擇器使用方法總結,CSS選擇器使用的注意事項有哪些,以下就是實戰案例,一起來看一下。

CSS選擇器

1.id選擇器#id{ } ,「#id」選取元素
2.類別選擇器.class{ } ,「.類別名稱」選中元素
3.標籤選擇器 p{ } ,「標籤名稱」選取元素
4.通配符選擇器 { } ,""選取所有元素
5.組合選擇器:
分組選擇器E,F “,」逗號隔開,同時選取E,F元素
後代選擇器 E F 空格隔開,選取E元素下的所有F元素(無論F元素嵌套多少層一樣會被選中)
直接子選擇器E > F “>”隔開,選取E元素下的直接子元素F,即E元素下的第一層級子元素F
相鄰兄弟選擇器 E F, “ ”隔開選取E元素後的直接相鄰元素F
通用相鄰選擇器E ~ F, “~”分隔選取E元素後面的所有同級元素F
6.偽類選擇器L-V-H-A,:link,:visited, :hover,:active
7.偽元素選擇器
E::first-line 選取E元素內容的第一行
E::first-letter 選取E元素內容的第一個字母
E::before 在E元素之前插入conten內容
E::after 在E元素之後插入content內容
before和after是可以插入額外內容的位置,需要配合content屬性使用
8 .屬性選擇器
input[type="text"] {
width:150px;
}


選擇器的優先權

css選擇器優先權核心:每個選擇器本身有優先權,作用範圍越具體優先權越高。
CSS優先權從高到低分別是:
1.在屬性後面使用 !important 會覆寫頁面內任何位置定義的元素樣式。
2.作為style屬性寫在元素標籤上的內聯樣式
3.id選擇器
4.類別選擇器
5.偽類選擇器
6.屬性選擇器
7.標籤選擇器
8.通配符選擇器
9.瀏覽器自訂
當CSS樣式的規則由多個選擇器組成時,id選擇器的權值為1000, class選擇器為100,標籤選擇器為10,依權值求和的記過高低決定哪一個優先。當兩個css規則的權值相同時,誰更具體用誰,也就是權值高的選擇器作用的越具體優先級越高。當兩個選擇器規則和權值都是一樣,後面樣式會覆蓋前面的!
p {color: #333;}
p {color: #666;}
這樣p文案的顏色明顯會是#666


class 和id 的使用場景

id在頁面上是唯一標識,class在頁面上標識某一類型的樣式,具有普遍性,可以重複使用。某元素的class名稱可以寫成class="intro other",也就是可以有多個class名,代表疊加兩個類別名稱對應的樣式。 id名不能這樣寫。 ID名稱常用在頁面佈局(標記大框架),class一般在局部頁面佈局中使用,用於樣式定義,因為命名時可將class名稱寫成一樣,所以只需要對該class寫一次樣式,就能讓有相同樣式的元素重複使用。 使用CSS選擇器時劃定適當的命名空間,提高程式碼可讀性,以便於維護

#

選擇器使用範例

html
#header{} /*选中id为header的元素*/
.header{}    /*选中class=header的元素*/ 
.header .logo{}  /*选中class=header下的所有class=logo的元素*/ 
.header.mobile{}  /*选中class="header mobile"的元素*/ 
.header p, .header h3{}  /*选中class=header元素下的所有p元素,同时选中class=header元素下的所有h3元素*/ 
#header .nav>li{}  /*选中id=header元素下的所有class=nav元素的直接子元素li*/ 
#header a:hover{}  /*选中id=header元素下的所有a元素,并使用hover伪类*/
登入後複製

常見偽類別選擇器

#【1】結構偽類選擇器
E: first-child 選取E所在父元素下的第一個子元素,且該子元素是E元素
E:last-child 選取E所在父元素下的最後一個子元素,且此子元素是E元素
E:root 選取E所在根節點的元素,對於HTML即選取HTML元素
E:nth-child(n) 選取E所在父元素下的第n個子元素,且此子元素是E元素
E:nth-last-child(n) 選取E所在父元素下的倒數第n個子元素,且該子元素是E元素
E:nth-of-type(n) 選取E所在父元素下的同類型元素中的第n個E元素
E:nth-last-of-type(n) 選取E所在父元素下的同類型元素中的倒數第n個E個元素
E:first-of-type 選取E所在父元素下的同類型元素中的第一個E元素
E:last-of-type 選取E所在父元素下的同類型元素中的最後一個E元素
E:only-child符合父元素內僅有的一個子元素,等同於:first-child:last-child或:nth-child(1):nth-last-child(1)
E :only-of-type匹配父元素下使用同種標籤的唯一一個子元素,等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of -type(1)
E:empty符合沒有子元素的元素,且該元素無任何文字節點
E:not(F) 符合不符合目前選擇器的任何元素
【2】動態偽類選擇器 順序L-V-H-A
link-visited-hover-active

a:link{
 color:red;
 }
 
 a:visited{
 color:blue;
 }
 
 a:hover{
 color:gree;
 font-size:20px;
 }
 
 a:active{
 color:gold;
 }
 a:focus{
 color:gold; //a元素获得焦点后的样式
 }
登入後複製

:first-child和:first-of-type的作用和區別

E:first-child 指定元素E,找其父元素下的第一個E元素
E:first-of-type 指定E類型的元素,找其父元素下的E類型元素的第一個


程式碼範例:

html
<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style> 
<p> 
</p><p>aa</p>
<h3>bb</h3>
<h3>ccc</h3> 
登入後複製

CSS選擇器使用方法總結

.item1:first-child{color :red;}class=item1元素的父元素p下的第一個子元素item1字體紅色<h3>bb<h3>,<h3>ccc<h3></h3> </h3> </h3> </h3>雖然class =item1但他們不是其父元素下的第一個子元素。

.item1:first-of-type{background:blue;}class=item1元素的父元素下的同類型元素中的第一個class=item1的元素。 <p class="item1">aa</p>的父元素p下的同類型元素(p,h3)分別選取第一個即aa,bb加藍色背景。


text-align: center的作用

設定元素內的文字水平居中對齊。 text-align應用在區塊級元素上(p或p),對該區塊級元素(p/p)其內部的行內元素(文字、圖片、input框)可設定對齊方式。
text-align有5個值:left/right/center/justify/inherit,左對齊/右對齊/居中對齊/兩端對齊/繼承父元素align值。 justify兩端對齊的時候,每行中的字間距可能不一致。


我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

怎麼處理MySQL資料庫拒絕存取

前端測試金字塔使用步驟詳解

以上是CSS選擇器使用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板