CSS選擇器的類型分為3類:標(biāo)記選擇器、類別選擇器和ID選擇器。(可能名稱有不同的說法,但意思都是一樣的)

成都創(chuàng)新互聯(lián)公司成立于2013年,我們提供高端重慶網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、營銷型網(wǎng)站、成都小程序開發(fā)、微信公眾號開發(fā)、營銷推廣服務(wù),提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地,為成都塑料袋企業(yè)提供源源不斷的流量和訂單咨詢。
標(biāo)記選擇器是利用HTML的標(biāo)記直接定義標(biāo)記內(nèi)容的樣式,如:h1{
color:red;
font-size:25pt;}
類別選擇器是通常說的class選擇器,定義的時(shí)候要在名稱前加.如:.one{
color:red;
font-size:25pt;}
ID選擇器定義的時(shí)候要在前面加#,如:#box
{
color:red;
font-size:25pt;}
利用DW寫CSS的時(shí)候,高級就是上面說的ID選擇器,ID選擇器的名字可以任意命名,可以自己定義,可是標(biāo)簽就只能是HTML語言里制定的那些標(biāo)記,不能自己定義。
CSS選擇器如下:
1. 標(biāo)簽名選擇器 div { color:Red;} /即頁面中的各個(gè)標(biāo)簽名的css樣式
2.類選擇器 .divClass {color:Red;} /即定義的每個(gè)標(biāo)簽的class 中的css樣式
3.ID選擇器 #myDiv {color:Red;} /即頁面中的標(biāo)簽的id
4.后代選擇器(類選擇器的后代選擇器) .divClass span { color:Red;} /即多個(gè)選擇器以逗號的格式分隔 命名找到準(zhǔn)確的標(biāo)簽
5.群組選擇器 div,span,img {color:Red} /即具有相同樣式的標(biāo)簽分組顯示
選擇器的優(yōu)先級
1.最高優(yōu)先級是 (直接在標(biāo)簽中的設(shè)置樣式,假設(shè)級別為1000)div style="color:Red;"/div
2.次優(yōu)先級是(ID選擇器 ,假設(shè)級別為100) #myDiv{color:Red;}
3.其次優(yōu)先級是(類選擇器,假設(shè)級別為10) .divClass{color:Red;}
4.最后優(yōu)先級是 (標(biāo)簽選擇器,假設(shè)級別是 1) div{color:Red;}
5.那么后代選擇器的優(yōu)先級就可以計(jì)算了啊
比如 .divClass span { color:Red;} 優(yōu)先級別就是:10+1=11
想詳細(xì)的話可以參考W3C文檔。
CSS選擇器就是指定CSS要作用的標(biāo)簽,那個(gè)標(biāo)簽的名稱就是選擇器。意為:選擇哪個(gè)容器。
CSS選擇器分類:
標(biāo)簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器
1、html標(biāo)簽選擇器:
定義:以html標(biāo)簽作為選擇器
2、class類選擇器:
定義:為HTML標(biāo)簽添加class屬性,通過類選擇器來為具有此class屬性的元素設(shè)置css樣式。
類選擇器也可以對不同類型元素的同一個(gè)名稱的類選擇器設(shè)置不同的樣式規(guī)則:
同一個(gè)元素可以設(shè)置多個(gè)類,之間用空格隔開:
3、ID選擇器
定義:為HTML標(biāo)簽添加ID屬性,通過ID選擇器來為具有此ID的元素設(shè)置CSS規(guī)則
4、群組選擇器
定義:集體統(tǒng)一設(shè)置樣式
5、全局選擇器
定義:所有標(biāo)簽設(shè)置樣式
HTML文檔結(jié)構(gòu)圖
6、后代選擇器
定義:使用后代選擇器設(shè)置,之間用空格隔開,后代選擇器可以多層。
7、偽類選擇器
鏈接的四種狀態(tài):激活狀態(tài),已訪問狀態(tài),未訪問狀態(tài),鼠標(biāo)懸停狀態(tài)。
偽類
說明
:link
未訪問的鏈接
:visited
已訪問的鏈接
:hover
鼠標(biāo)懸停狀態(tài)
:active
激活的鏈接
:hover 用于訪問的鼠標(biāo)經(jīng)過某個(gè)元素時(shí);
:active 用于一個(gè)元素被激活時(shí)(即按下鼠標(biāo)之后放開鼠標(biāo)之前的狀態(tài))
偽類選擇器的屬性:link visited hover active
說明:
1)?a:hover 必須置于?a:link和a:visited之后,才有效
2) a:active 必須置于 a:hover之后才有效
3) 偽類名稱對大小寫不敏感
8、CSS其它選擇器
css繼承特性,從父元素那繼承部分css屬性
選擇器的優(yōu)先級
ID選擇優(yōu)先級最高(id選擇器定義具有唯一性)
class選擇器次之(class選擇器可以多個(gè))
元素選擇器再次之
其它選擇器優(yōu)先級主要根據(jù)定義的先后順序,最后定義的優(yōu)先級高
!important 加重選擇器的優(yōu)先級,添加在樣式規(guī)則之后,中間用空格隔開。
CSS選擇器命名規(guī)則
1:采用英文字母,數(shù)字以及"-" 和 "_" 命名
2:以小寫字母開頭,不能以數(shù)字和"-"?和 "_" 開頭
3:使用有意義的命名規(guī)范
常用CSS命名
header
頁頭
main
主體
footer
頁尾
nav
導(dǎo)航
sidebar
側(cè)欄
container
容器
column
欄目
title
標(biāo)簽
menu
菜單
submenu
子菜單
*列舉常用命名,大家根據(jù)自身項(xiàng)目及團(tuán)隊(duì)的規(guī)則命名
耐心學(xué)習(xí)基礎(chǔ)知識,基礎(chǔ)是蓋房的根基,必須打結(jié)實(shí)。
如果您覺得有用,記得在下方點(diǎn)贊、關(guān)注、留言,我會定期奉 上更多的驚喜哦,您的打賞支持才是我繼續(xù)努力的動(dòng)力,么么噠。
每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗(yàn),學(xué)習(xí)筆記,筆試題,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以學(xué)習(xí)為目的,每天閱讀一篇文章,了解身邊的技術(shù)。陪有夢想的人一起成長!
CSS的選擇器其實(shí)大類的話可以分為三類,即id選擇器、class選擇器、標(biāo)簽選擇器。
用法如下:
#id名 { 屬性名:屬性值; }
.class名 { 屬性名:屬性值; }
標(biāo)簽名 { 屬性名:屬性值; }
其中,他們之間又可以以不同的方式進(jìn)行組合,如下:
后代選擇器: 父代名 后代名 { 屬性名:屬性值; }
子代選擇器: 父代名子代名 { 屬性名:屬性值; }
群組選擇器: #name1, .name2, #name div { 屬性名:屬性值; }
偽類選擇器: name:偽類
通用(通配符)選擇器: * { 屬性名: 屬性值; }……
常用的也就這些。
純手打,望采納。我的百度個(gè)人簡介里面還有博客網(wǎng)址,想看一些我資料歡迎進(jìn)入我的博客。
本文名稱:css選擇器的樣式,css樣式表的三種選擇器
URL網(wǎng)址:http://chinadenli.net/article47/dsepcej.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、域名注冊
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)