CSS系列(8) CSS後代選擇器和子選擇器詳解

時間 2019-12-09

標籤 css 系列後代選擇器詳解欄目 CSS 简体版

原文原文鏈接

1、CSS後代選擇器詳解css

1，生動介紹基本概念html

一個標籤嵌B在另外一個標籤A內部，B就是A的後代。web

並且，B的後代也是A的後代，這就叫「子子孫孫無窮盡也」。瀏覽器

好比：網絡

<div>ide

<p>這個p標籤是div的後代</p>學習

<div>字體

後代選擇器就是用來選擇一個標籤的後代的；網站

兩個選擇器中間添加一個【空格】就構成了後代選擇器，空格後面的那個是後代。設計

例如：

div p { color : red; }

它會選擇一堆的p標籤，只要這個p標籤是嵌套在某個div標籤內部的，也就是隻要p有一個爹或祖先是div就行。

那麼，選中的p標籤內部的字體，都會被設置爲紅色。

2，具體例子一個

新建一個網頁a.html，複製下面的內容

<html>

<head>

.YeYe div { color : red; }

</style>

</head>

<body >

爺爺

<div>

爸爸

<div >

我

</div>

<div>

叔叔

<div>

堂弟

</div>

</body>

</html>

在瀏覽器中查看，效果圖以下：

過春節了，爺爺給後代都發了紅包，所以把後代都設置爲了紅色字體。

.YeYe div { color : red; }

這裏給爺爺添加了一個類 YeYe；

爸爸、叔叔、我、堂弟，都是div，咱們又都是爺爺的後代；

所以使用後代選擇器，對咱們設置一個相同的樣式就特別簡單。

3，注意事項

(1) 避免類名氾濫

自從出現了CSS，就有點使用類名氾濫。

動不動就給不少標籤添加類名，而後使用類名選擇器設置樣式，當有過多的類名的時候，你的html結構其實已經被污染了，或者你的html設計有問題。

像這個例子，一些人可能就會給爸爸、叔叔、我、堂弟分別添加上類名，而後統一設置一下樣式，這就不如使用後代選擇器。

給你說個類名氾濫的例子吧，你們看看下面的這段html源代碼，

</div>

是否是使用了不少類名，每一個a標籤都有重複的類名tab tab-hook g-fc0

你們知道這是哪一個網站的源代碼嗎？

這是我複製hao123.com菜單中的源代碼。

這但是大名鼎鼎的hao123網站導航網啊。竟然犯這種錯誤。

不過，咱們也不能怪設計人，hao123的創始人李興平之前是一個網吧管理員，和專業的前段開發工程師比起來固然不行。

不過，他憑藉敏銳的市場嗅覺、吃苦耐勞的精神、中國網絡起步的時機，創辦了hao123導航網，這一點但是值得咱們全部人學習啊。

2004年8月，百度以1190萬元和4萬股股票收購了hao123。

當時，李興平也是捨不得賣掉本身的孩子啊，對於每個站長來講，本身的網站都是本身的孩子，可是他實在是想不出來hao123的下一步發展方向是哪裏，所以就賣給了百度。

從李興平的身上，咱們能夠學習到，技術，並非最重要的成功因素，成功是不少因素湊到一塊兒得來的，就像打麻將，三缺一是打很差的。

(2) 後代選擇器是從右向左開始的

好比下面這個例子

div p { color : red; }

瀏覽器會先找到全部的p標籤，由於瀏覽器是從右向左看的，不像咱們人眼，是從左向右看的。

找到一個p後，它會向上找，看看有沒有標籤div，若是p有一個爹或祖先是div，那麼這個p就被選中了。

參考文章：

2、CSS子選擇器詳解

1，基本概念介紹

子就是兒子。

子選擇器說的就是選擇一個標籤的兒子。

好比

<div>

<p>這個p標籤是div的兒子</p>

<div>

這個p標籤是div的下一級，嵌套在div內部，它就是div的兒子。

和後代選擇器不一樣的是，在兩個標籤中間使用【>】就構成了子選擇器。

好比

div > p { color : red; }

這裏就設置div的兒子p的字體爲紅色。

2，例子

新建一個網頁a.html，複製粘貼下面的內容

<html>

<head>

.YeYe div { color : red; }

.YeYe > div { margin-left: 50px; }

</style>

</head>

<body >

爺爺

<div>

爸爸

<div >

我

</div>

<div>

叔叔

<div>

堂弟

</div>

</body>

</html>

效果圖以下：

這裏設置了爺爺div的後代都爲紅色字體，代碼以下：

.YeYe div { color : red; }

而後又設置了爺爺的兒子左外邊距爲50px，就是讓兒子都退後50步：

.YeYe > div { margin-left: 50px; }

由於我和堂弟的爹都後退了50步，咱們是嵌套在爹的裏面的，也跟着後退了50步。

若是你在添加上下面的樣式：

.YeYe > div > div { margin-left: 50px; }

那麼，我相對我爹、堂弟相對叔叔，各自退後50步，效果圖以下：

如今輩分不亂了，爺爺第一級，爸爸和叔叔第二級，我和堂弟第3級，並且使用CSS讓html表現出來的樣式也有層次感了。

完整的代碼以下：

<html>

<head>

.YeYe div { color : red; }

.YeYe > div { margin-left: 50px; }

.YeYe > div > div { margin-left: 50px; }

</style>

</head>

<body >

爺爺

<div>

爸爸

<div >

我

</div>

<div>

叔叔

<div>

堂弟

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。