「前端架構師詳解Css04」案例“類天貓國際專欄”及復合選擇器

. 此篇文章講解目錄：

案例和由此案例重點講解的知識點介紹
案例代碼實現
復合選擇器知識點詳解

2. 案例和相關知識點介紹

此案例是頁面，效果如下：

此頁面的技術實現解析：

如上圖所示，六個圖片內容，大部分樣式相同，但是又都具有不同的樣式，這種情況，需要使用復合選擇器來定義這些不同的樣式

此案例中主要用到了，基于此，我們會系統的將如下知識點全部講解：

復合選擇器

3. 此案例的代碼實現

第一步：書寫國際專欄效果html

第二步：使用通配符選擇器以及標簽選擇器定義整體通用樣式

第三步：使用類選擇器定義通用樣式，然后使用復合選擇器分別定義樣式不同的地方

第四步：定義內部標題圖片樣式

4. 此案例的知識點詳解

CSS復合選擇器

復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，具體如下

標簽指定式選擇器（即....又....）

標簽指定式選擇器又稱交集選擇器，由兩個選擇器構成，其中第一個為標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如

h3.special或p#one。

大家好接下來我們會邀請前端架構師以連載的方式，并且結合阿里天貓商城的門戶，系統講解Css的專業知識，歡迎大家關注頭條號“互聯網IT技術”。

合屬性font

就是咱們上面講到的屬性可以用一個屬性來代替, 像這樣的屬性我們稱之為復合屬性。

基本語法：

font:[font-style|font-weight]||font-size/line-height|| font-family

[]-可有可無(字體傾斜和字體加粗可以省略不寫)

p{
font: italic 900 20px/48px "宋體";
}

盒子屬性值的聲明

padding margin border-width border-color border-style

以border-style樣式為例:

取一個值:

border-style:solid:

說明:邊框的四條邊都是實線

取兩個值:

border-style:solid dotted;

說明:上下邊框使用第一個值,左右邊框使用第二個值,兩個值一定要用空格隔開

取三個值:

border-style:solid dotted double;

說明:上邊框使用第一個值,左右邊框使用第二個值,下邊框使用第三個值

取四個值:

四條邊框按照上、右、下、左的順序來調用取值，取值之間也要用空格隔開

z-index 只對已經有定位的元素生效(position:relative/absolute/fixed)

人熟悉前端(html,css,js,vue等)，后端(python)，爬蟲，小程序等，老板有需求私信聯系我。

第01階段.前端基礎

CSS 第二天

今天我們圍繞一個導航欄案例進行學習知識點。

今日重點：

復合選擇器后代選擇器并集選擇器
標簽顯示模式
CSS背景背景位置
CSS三大特性優先級

1. CSS復合選擇器

目標

理解理解css復合選擇器分別的應用場景
應用使用后代選擇器給元素添加樣式使用并集選擇器給元素添加樣式使用偽類選擇器

為什么要學習css復合選擇器

CSS選擇器分為基礎選擇器和復合選擇器，但是基礎選擇器不能滿足我們實際開發中，快速高效的選擇標簽。

目的是為了可以選擇更準確更精細的目標元素標簽。
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的

1.1 后代選擇器（重點）

概念：后代選擇器又稱為包含選擇器
作用：用來選擇元素或元素組的子孫后代
其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，先寫父親爺爺，再寫兒子孫子。

父級 子級{屬性:屬性值;屬性:屬性值;}

語法：

.class h3{color:red;font-size:16px;}

當標簽發生嵌套時，內層標簽就成為外層標簽的后代。
子孫后代都可以這么選擇。或者說，它能選擇任何包含在內的標簽。

1.2 子元素選擇器

作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接
語法：

.class>h3{color:red;font-size:14px;}

一句話說出他們

這里的子指的是親兒子不包含孫子重孫子之類。

白話：

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含著h3。

1.3 交集選擇器

條件交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。

語法：

其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。

記憶技巧：

交集選擇器是并且的意思。即...又...的意思

比如：   p.one   選擇的是： 類名為 .one  的 段落標簽。

用的相對來說比較少，不太建議使用。

1.4 并集選擇器（重點）

應用：如果某些選擇器定義的相同樣式，就可以利用并集選擇器，可以讓代碼更簡潔。
并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。
語法：

任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。
記憶技巧：并集選擇器通常用于集體聲明，逗號隔開的，所有選擇器都會執行后面樣式，逗號可以理解為和的意思。

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 這三個選擇器都會執行顏色為紅色。 
通常用于集體聲明。

1.5 鏈接偽類選擇器（重點）

偽類選擇器：

為了和我們剛才學的類選擇器相區別類選擇器是一個點比如 .demo {} 而我們的偽類用 2個點就是冒號比如 :link{} 偽娘

作用：

用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第1個，第n個元素。

因為偽類選擇器很多，比如鏈接偽類，結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。

a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標移動到鏈接上 */
a:active /* 選定的鏈接 */

注意

寫的時候，他們的順序盡量不要顛倒按照 lvha 的順序。否則可能引起錯誤。
記憶法 love hate 愛上了討厭 lv 包包非常 hao
因為叫鏈接偽類，所以都是利用交集選擇器 a:link a:hover
因為a鏈接瀏覽器具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式。
實際工作開發中，我們很少寫全四個狀態，一般我們寫法如下：

a {   /* a是標簽選擇器  所有的鏈接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是鏈接偽類選擇器 鼠標經過 */
            color: red; /*  鼠標經過的時候，由原來的 灰色 變成了紅色 */
}

1.6 復合選擇器總結

選擇器	作用	特征	使用情況	隔開符號及用法
后代選擇器	用來選擇元素后代	是選擇所有的子孫后代	較多	符號是空格 .nav a
子代選擇器	選擇最近一級元素	只選親兒子	較少	符號是> .nav>p
交集選擇器	選擇兩個標簽交集的部分	既是又是	較少	沒有符號 p.one
并集選擇器	選擇某些相同樣式的選擇器	可以用于集體聲明	較多	符號是逗號 .nav, .header
鏈接偽類選擇器	給鏈接更改狀態		較多	重點記住 a{} 和 a:hover 實際開發的寫法

2. 標簽顯示模式（display）重點

目標：

理解標簽的三種顯示模式三種顯示模式的特點以及區別理解三種顯示模式的相互轉化
應用實現三種顯示模式的相互轉化

2.1 什么是標簽顯示模式

什么是標簽的顯示模式？標簽以什么方式進行顯示，比如div 自己占一行，比如span 一行可以放很多個
作用：我們網頁的標簽非常多，在不同地方會用到不同類型的標簽，以便更好地完成我們的網頁。
標簽的類型(分類)HTML標簽一般分為塊標簽和行內標簽兩種類型，它們也稱塊元素和行內元素。

2.2 塊級元素(block-level)

例：

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標簽是最典型的塊元素。

塊級元素的特點

（1）比較霸道，自己獨占一行

（2）高度，寬度、外邊距以及內邊距都可以控制。

（3）寬度默認是容器（父級寬度）的100%

（4）是一個容器及盒子，里面可以放行內或者塊級元素。

注意：只有文字才能組成段落因此 p 里面不能放塊級元素，特別是 p 不能放div 同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素。

2.3 行內元素(inline-level)

例：

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標簽最典型的行內元素。有的地方也成內聯元素

行內元素的特點：

（1）相鄰行內元素在一行上，一行可以顯示多個。

（2）高、寬直接設置是無效的。

（3）默認寬度就是它本身內容的寬度。

（4）行內元素只能容納文本或則其他行內元素。

注意：

鏈接里面不能再放鏈接。
特殊情況a里面可以放塊級元素，但是給a轉換一下塊級模式最安全。

2.4 行內塊元素（inline-block）

例：

在行內元素中有幾個特殊的標簽——<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。

行內塊元素的特點：（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。一行可以顯示多個（2）默認寬度就是它本身內容的寬度。（3）高度，行高、外邊距以及內邊距都可以控制。

2.5 三種模式總結區別

元素模式	元素排列	設置樣式	默認寬度	包含
塊級元素	一行只能放一個塊級元素	可以設置寬度高度	容器的100%	容器級可以包含任何標簽
行內元素	一行可以放多個行內元素	不可以直接設置寬度高度	它本身內容的寬度	容納文本或則其他行內元素
行內塊元素	一行放多個行內塊元素	可以設置寬度和高度	它本身內容的寬度

2.6 標簽顯示模式轉換 display

塊轉行內：display:inline;
行內轉塊：display:block;
塊、行內元素轉換為行內塊： display: inline-block;

此階段，我們只需關心這三個，其他的是我們后面的工作。

3. 行高那些事（line-height）

目標

理解能說出行高和高度三種關系能簡單理解為什么行高等于高度單行文字會垂直居中
應用使用行高實現單行文字垂直居中能會測量行高

3.1 行高測量

行高的測量方法：

3.2 單行文本垂直居中

行高我們利用最多的一個地方是：可以讓單行文本在盒子中垂直居中對齊。

文字的行高等于盒子的高度。

這里情況些許復雜，開始學習，我們可以先從簡單地方入手學會。

行高 = 上距離 + 內容高度 + 下距離

上距離和下距離總是相等的，因此文字看上去是垂直居中的。

行高和高度的三種關系

如果行高等高度文字會垂直居中
如果行高大于高度文字會偏下
如果行高小于高度文字會偏上

4. CSS 背景(background)

目標

理解背景的作用css背景圖片和插入圖片的區別
應用通過css背景屬性，給頁面元素添加背景樣式能設置不同的背景圖片位置

4.1 背景顏色(color)

語法：background-color:顏色值; 默認的值是 transparent 透明的

4.2 背景圖片(image)

語法：

background-image : none | url (url)

參數	作用
none	無背景圖（默認的）
url	使用絕對或相對地址指定背景圖像

background-image : url(images/demo.png);

小技巧：我們提倡背景圖片后面的地址，url不要加引號。

4.3 背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

參數	作用
repeat	背景圖像在縱向和橫向上平鋪（默認的）
no-repeat	背景圖像不平鋪
repeat-x	背景圖像在橫向上平鋪
repeat-y	背景圖像在縱向平鋪

4.4 背景位置(position) 重點

語法：

background-position : length || length

background-position : position || position

參數	值
length	百分數 \| 由浮點數字和單位標識符組成的長度值
position	top \| center \| bottom \| left \| center \| right 方位名詞

注意：必須先指定background-image屬性position 后面是x坐標和y坐標。可以使用方位名詞或者精確單位。如果指定兩個值，兩個值都是方位名字，則兩個值前后順序無關，比如left top和top left效果一致如果只指定了一個方位名詞，另一個值默認居中對齊。如果position 后面是精確坐標，那么第一個，肯定是 x 第二的一定是y如果只指定一個數值,那該數值一定是x坐標，另一個默認垂直居中如果指定的兩個值是精確單位和方位名字混合使用，則第一個值是x坐標，第二個值是y坐標

實際工作用的最多的，就是背景圖片居中對齊了。

/*以下說明  x 10像素  y 垂直居中的*/
/*background-position: 10px center;*/

4.5 背景附著

背景附著就是解釋背景是滾動的還是固定的
語法： background-attachment : scroll | fixed

參數	作用
scroll	背景圖像是隨對象內容滾動
fixed	背景圖像固定

4.6 背景簡寫

background：屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫：
background: 背景顏色背景圖片地址背景平鋪背景滾動背景位置;
語法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

案例：

導航欄案例

4.7 背景透明(CSS3)

語法：

background: rgba(0, 0, 0, 0.3);

最后一個參數是alpha 透明度取值范圍 0~1之間
我們習慣把0.3 的 0 省略掉這樣寫 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的內容不受影響
因為是CSS3 ，所以低于 ie9 的版本是不支持的。

4.8 背景總結

屬性	作用	值
background-color	背景顏色	預定義的顏色值/十六進制/RGB代碼
background-image	背景圖片	url(圖片路徑)
background-repeat	是否平鋪	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分別是x 和 y坐標，切記如果有精確數值單位，則必須按照先X 后Y 的寫法
background-attachment	背景固定還是滾動	scroll/fixed
背景簡寫	更簡單	背景顏色背景圖片地址背景平鋪背景滾動背景位置; 他們沒有順序
背景透明	讓盒子半透明	background: rgba(0,0,0,0.3); 后面必須是 4個值

5. CSS 三大特性

目標：

理解能說出css樣式沖突采取的原則能說出那些常見的樣式會有繼承
應用能寫出CSS優先級的算法能會計算常見選擇器的疊加值

5.1 CSS層疊性

概念：所謂層疊性是指多種CSS樣式的疊加。是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉
原則：樣式沖突，遵循的原則是就近原則。 那個樣式離著結構近，就執行那個樣式。樣式不沖突，不會層疊

CSS層疊性最后的執行口訣：  長江后浪推前浪，前浪死在沙灘上。

5.2 CSS繼承性

概念：子標簽會繼承父標簽的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用于父元素即可。

簡單的理解就是：子承父業。

注意：恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。比如有很多子級孩子都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

5.3 CSS優先級（重點）

概念：定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，此時，選擇器相同，則執行層疊性選擇器不同，就會出現優先級的問題。

1). 權重計算公式

關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）

標簽選擇器	計算權重公式
繼承或者 *	0,0,0,0
每個元素（標簽選擇器）	0,0,0,1
每個類，偽類	0,0,1,0
每個ID	0,1,0,0
每個行內樣式 style=""	1,0,0,0
每個!important 重要的	∞ 無窮大

值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越。
關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）
div { color: pink!important; }

2). 權重疊加

我們經常用交集選擇器，后代選擇器等，是有多個基礎選擇器組合而成，那么此時，就會出現權重疊加。

就是一個簡單的加法計算

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1注意：

數位之間沒有進制比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不會存在10個div能趕上一個類選擇器的情況。

3). 繼承的權重是0

這個不難，但是忽略很容易繞暈。其實，我們修改樣式，一定要看該標簽有沒有被選中。

1）如果選中了，那么以上面的公式來計權重。誰大聽誰的。 2）如果沒有選中，那么權重是0，因為繼承的權重為0.

6. CSS注釋

CSS注釋規則：

/*  需要注釋的內容  */  進行注釋的，即在需要注釋的內容前使用 "/*" 標記開始注釋，在內容的結尾使用 "*/"結束。

例如：

p {
 /* 所有的字體是14像素大小*/
  font-size: 14px;                 
}

7. 今日總結

在線咨詢

上一篇：十款好用的HTML生成工具推薦，幫你高效完成開發
下一篇：Html中的空格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商