查看: 6927|回復(fù): 0

[DIV+CSS 教程筆記02] 第十二課 div css當(dāng)中 css選擇器的優(yōu)先級(jí)概念

[復(fù)制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會(huì)員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達(dá)

樓主

發(fā)表于 2014-12-1 20:45:28 | 只看該作者 |只看大圖回帖獎(jiǎng)勵(lì)

|倒序?yàn)g覽 |閱讀模式

親注冊(cè)登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦�。ò蕡D片、文字詳情等）請(qǐng)您及時(shí)注冊(cè)登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒有賬號(hào)？立即注冊(cè)

本帖最后由 asp老師于 2014-12-1 20:52 編輯

好，今天我們來看一下我們?cè)趯W(xué)習(xí)了那么多的標(biāo)簽和選擇器的用法，但是在一個(gè)網(wǎng)頁的設(shè)計(jì)當(dāng)中呢，我們會(huì)遇到各種各樣的類各種各樣的Id等那么她們的選擇器的優(yōu)先級(jí)是如何區(qū)分的呢？

好，我們先來新建一個(gè)12.html的文件和12.css的文件，并且我們把這個(gè)12.css文件引入我們的12.html文件當(dāng)中，那么12.html代碼如下;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<link href="12.css" rel="stylesheet" type="text/css">
</head>
<body>
歡迎收看道勤網(wǎng)給您錄制的div+css教程
</body>
</html>

復(fù)制代碼

同時(shí)我們?cè)赽ody當(dāng)中寫上文字，并且我們用p標(biāo)簽把它斷開，之后我們把這個(gè)p標(biāo)簽加上類class="aaa" 同時(shí)我們?cè)诩由蟟d="ccc"之后呢，我們?cè)?2.css文件當(dāng)中，我們來定義我們的css屬性

12.css代碼如下：

p{color:#F00;}
.aaa{color:#0F0;}
#ccc{color:#FF0;}

復(fù)制代碼

好，我們來分析下這個(gè)css代碼；
首先呢是把p標(biāo)簽里面的字體顏色變?yōu)?font style="background-color:rgb(247, 247, 247)">#F00;
之后呢就是把類為.aaa的顏色變?yōu)椋?/font>#0F0
最高把id=“ccc”的顏色變?yōu)?/font>#FF0

好此時(shí)我們保存查看下這段文字最后的效果到底是不被哪個(gè)選擇器進(jìn)行了最后的控制：
效果如下;

此時(shí)呢，大家可以看到，最后的效果是由id=“ccc”進(jìn)行了最后的控制，那么我們可以推斷出她們的分別優(yōu)先級(jí)是


標(biāo)簽大于默認(rèn) class類大于標(biāo)簽 id大于class類

---------------------------------------------------------
其實(shí)呢，我們?cè)趯懢W(wǎng)站的代碼時(shí)候往往會(huì)按照以下形式來進(jìn)行書寫



道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟赓M(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！

本內(nèi)容系道勤團(tuán)隊(duì) bmrsportswear.com 客服與技術(shù)人員研究整理的智慧結(jié)晶，轉(zhuǎn)載勿用于商業(yè)用途，并保留本文鏈接，侵權(quán)必究！