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

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

[復(fù)制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達

樓主

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

|倒序瀏覽 |閱讀模式

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

您需要登錄才可以下載或查看，沒有賬號？立即注冊

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

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

好，我們先來新建一個12.html的文件和12.css的文件，并且我們把這個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>無標題文檔</title>
<link href="12.css" rel="stylesheet" type="text/css">
</head>
<body>
歡迎收看道勤網(wǎng)給您錄制的div+css教程
</body>
</html>

復(fù)制代碼

同時我們在body當(dāng)中寫上文字，并且我們用p標簽把它斷開，之后我們把這個p標簽加上類class="aaa" 同時我們在加上id="ccc"之后呢，我們在12.css文件當(dāng)中，我們來定義我們的css屬性

12.css代碼如下：

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

復(fù)制代碼

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

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

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


標簽大于默認 class類大于標簽 id大于class類

---------------------------------------------------------
其實呢，我們在寫網(wǎng)站的代碼時候往往會按照以下形式來進行書寫



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

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