第八課 div css 通配選擇符和包含選擇器的用法技巧

asp老師 · 發(fā)表于 2014-11-30 16:18:46

親注冊登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦！（包涵精彩圖片、文字詳情等）請您及時(shí)注冊登錄-bmrsportswear.com

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

x

本帖最后由 asp老師于 2014-11-30 23:03 編輯

那么我們在學(xué)習(xí)第八課的的時(shí)候呢，可以先回憶一下第七課的內(nèi)容，下面是第七課的代碼：這個(gè)是源代碼：

<!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="07.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>道勤網(wǎng)</h1>
<h2>道勤網(wǎng)</h2>
<h3>道勤網(wǎng)</h3>
<h4>道勤網(wǎng)</h4>
<h5>道勤網(wǎng)</h5>
</body>
</html>

復(fù)制代碼

這個(gè)是css代碼：

h1,h2,h3,h4,h5{color:#3F0; background:#330; font-weight:900;}

復(fù)制代碼

好我們給它添加一個(gè)背景的效果，可以在css當(dāng)中直接用body{color:#F102;}好，代碼如下：

body{ background:#900;}
h1,h2,h3,h4,h5{color:#3F0; background:#330; font-weight:900;}

復(fù)制代碼

此時(shí)效果如下：

如果此時(shí)我們把這個(gè)body{background:#F00;} 代碼改為;

*{ background:#900;}

復(fù)制代碼

我們此時(shí)可以看到效果沒有發(fā)生變化，那么如果在我們的css代碼當(dāng)中，只有*｛｝這一個(gè)的話，那么代碼如下：

此時(shí)呢，我們看到這個(gè)*{} 所起到的作用就是控制所有的頁面，
我們就把這個(gè)*{}稱為通配符。好此時(shí)我們把css里面的代碼清空。返回到源代碼當(dāng)中；

我們重新寫代碼如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<link href="07.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1><a href="#">道勤網(wǎng)</a></h1>
<h2><a href="#">道勤網(wǎng)</a></h2>
<h3><a href="#">道勤網(wǎng)</a></h3>
<h4><a href="#">道勤網(wǎng)</a></h4>
<h5><a href="#">道勤網(wǎng)</a></h5>
<p><a href="#" target="_blank">道勤網(wǎng)一起免費(fèi)學(xué)習(xí)</a><br/><span><a href="#">道勤網(wǎng)QQ群226547332</a></span>
</body>
</html>

復(fù)制代碼

我們來分析下這個(gè)代碼：

首頁呢，在<title></title>之下</head>之前鏈接了一個(gè)名稱為07.css的文件，
其次在body內(nèi)文當(dāng)中，有5句分別用<h1>到<h5>的標(biāo)簽來寫的道勤網(wǎng) 的字體，同時(shí)這每段字體都加了一個(gè)鏈接<a href="#"></a>鏈接的地址為#就是空鏈接的意識；

再次；在最后有2個(gè)句話，道勤網(wǎng)一起免費(fèi)學(xué)習(xí)，前面用<p>標(biāo)簽斷開。之后也給這段用<p>標(biāo)簽斷開的文字加了一個(gè)空的鏈接而且這個(gè)鏈接打開的方式為target="_blank" 新的打開方式。

最后，在道勤網(wǎng)QQ群226547332這里呢，用<br/>標(biāo)簽我們進(jìn)行了換行，同時(shí)給這個(gè)文字道勤網(wǎng)QQ群226547332 我們用了<span></span>標(biāo)簽；并且我們給這個(gè)文字添加了鏈接 href="#"

那么我們此時(shí)的效果如下;

大家可以看到目前是藍(lán)色的，這是因?yàn)槲覀冇昧?lt;a href="#"> </a>這樣的標(biāo)簽，如果我們想要該更這個(gè)標(biāo)簽的顏色的話，我們該如何操作呢.
好我們此時(shí)可以在css當(dāng)中定義我們的css代碼；代碼如下：

a{color:#C00;}

復(fù)制代碼

那么這樣我們就這個(gè)顏色進(jìn)行了更改的。當(dāng)然我們也可以通過id="" 或者是類class="" 設(shè)置這幾個(gè)選擇器之后，在來改變這個(gè)選擇器的樣式也是可以進(jìn)行更改的，
那么效果如下;

這里要提醒大家注意的一個(gè)點(diǎn)就是，我們此時(shí)要改變的是這個(gè)<a></a>標(biāo)簽的顏色，而不是這個(gè)<h>標(biāo)簽的顏色，所以有很多新手朋友們在這里可能會直接在css當(dāng)中寫到
h{color:#0ff;}
這樣寫呢，我們會發(fā)現(xiàn)是沒有什么效果的。所以大家這個(gè)概念一定是要區(qū)分開的。好，我們繼續(xù)往下面的知識點(diǎn)看；
如果此時(shí)，我們想要把這個(gè)第一個(gè)道勤網(wǎng)的鏈接變化一個(gè)顏色呢，其他的顏色不發(fā)生變化，（當(dāng)然也是可以通過設(shè)置類和id進(jìn)行設(shè)置，但是我們不通過這個(gè)方法進(jìn)行設(shè)定，我們換個(gè)其他的方法，大家有沒有知道的呢？好，下面我們來看今天非常重要的一個(gè)知識點(diǎn)；）

看css代碼：

<blockquote>a{color:#F00;}

復(fù)制代碼

這個(gè)代碼是什么意識呢？
1.首先呢，標(biāo)簽為a的顏色為#F00
2，其次呢，把h1 標(biāo)簽下的 a標(biāo)簽的顏色變?yōu)?F0
那么效果如下;

這個(gè)

h1 a{color:#0F0;}

復(fù)制代碼

就是包含選擇器；
h1之后呢空格在寫標(biāo)簽a 之后在定義內(nèi)容就可以的。
---------------------------------------------------------------------
好，那么如果我們想要對這個(gè)<p>標(biāo)簽里面的內(nèi)容進(jìn)行單獨(dú)定義a標(biāo)簽的顏色，我們該如何操作呢？
看css代碼：

p a{color:#9C9;}

復(fù)制代碼

那么這樣就可以的。
它的源代碼為

<!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="07.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1><a href="#">道勤網(wǎng)</a></h1>
<h2><a href="#">道勤網(wǎng)</a></h2>
<h3><a href="#">道勤網(wǎng)</a></h3>
<h4><a href="#">道勤網(wǎng)</a></h4>
<h5><a href="#">道勤網(wǎng)</a></h5>
<p><a href="#" target="_blank">道勤網(wǎng)一起免費(fèi)學(xué)習(xí)</a></p><br/><span><a href="#">道勤網(wǎng)QQ群226547332</a></span>
</body>
</html>

復(fù)制代碼

完整的css代碼如下;

a{color:#F00;}
h1 a{color:#0F0;}
p a{color:#9C9;}

復(fù)制代碼

那么今天我們學(xué)到了這個(gè) *｛｝通配選擇器和包含選擇器 p a{ }的用法，大家不懂的可以好好看下這個(gè)教程哦。

點(diǎn)擊查看其他div+css教程
第一節(jié) div css基本書寫規(guī)則和原理詳細(xì)解答
第二節(jié)在div css當(dāng)中并列標(biāo)簽的應(yīng)用規(guī)則詳解
第三節(jié) div+ css中文字和圖片背景的常用css熟悉詳解
第四節(jié)div+css當(dāng)中的內(nèi)聯(lián)樣式和外聯(lián)的區(qū)別講解
第五節(jié)div+css當(dāng)中 class類別選擇符的應(yīng)用詳解
第六課. DIV +CSS當(dāng)中的 id選擇器的應(yīng)用和匹配原理詳解
第七課 div css當(dāng)中組合選擇符的應(yīng)用和原理詳解
第八課 div css 通配選擇符和包含選擇器的用法技巧
第九課 div css里面常用選擇器的課程總結(jié)
第十課 div css 中css偽類元素的講解和應(yīng)用原理詳解
第十一課 div css當(dāng)中的背景圖片的定位概念

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