網(wǎng)站專業(yè)術(shù)語中seo意思是網(wǎng)站制作基本流程
文章目錄
- 一、 組合選擇器
- 二、屬性選擇器
- 三、偽類選擇器
- 1、動態(tài)偽類選擇器
- 2、狀態(tài)偽類選擇器
- 3、結(jié)構(gòu)性偽類選擇器
- 4、否定偽類選擇器
一、 組合選擇器
- 后代選擇器：E F
- 子元素選擇器： E>F
- 相鄰兄弟選擇器：E+F
- 群組選擇器：多個選擇器以逗號隔開（selector1,selector2,…）
二、屬性選擇器
- 屬性選擇器：E[attr]，E[attr=“value”], E[attr~=“value”]
- CSS 屬性選擇器通過已經(jīng)存在的屬性名或?qū)傩灾灯ヅ湓?br />
- CSS 屬性選擇器通過已經(jīng)存在的屬性名或?qū)傩灾灯ヅ湓?br />
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* 后代選擇器 */.section1 .first{color: pink;}/* 子元素選擇器 */.section1>.second{color: blue;}/* 相鄰兄弟選擇器 */.second+.third{color: purple;}/* 群組選擇器 */.first,.second,.third{font-size: 16px;}/* -------------- *//* 屬性選擇器 */.input1[type="text"]{color:green}/* a標(biāo)簽以.md結(jié)尾 */a[href$='.md']{color: pink;}/* a標(biāo)簽以http開頭 */a[href^='http']{color: yellow;}/* a標(biāo)簽title屬性有連接符且以on開頭 */a[title|='on']{color: red;}</style></head><body><section class="section1"><h1>組合選擇器</h1><p class="first">first</p><p class="second">second</p><div class="third">third</div></section><section class="section2"><input class="input1" type="text" value="input1"><a href="test.md">link1</a><a href="http://www.baidu.com">link2</a><a href="https://www.baidu.com" title="on-click">有連接符以on開頭</a></section></body>
</html>三、偽類選擇器
- 偽類選擇器(簡稱:偽類)通過冒號來定義，它定義了元素的狀態(tài)，如點擊按下，點擊完成等，通過偽類可以為元素的狀態(tài)修改樣式。
- 偽類的功能和一般的DOM中的元素樣式相似，但和一般的DOM中的元素樣式不樣，它并不改變?nèi)魏蜠OM內(nèi)容。只是插入了一些修飾類的元素，這些元素對于用戶米說是可見的，但是對于DOM米說不可見。偽類的效果可以通過添加一個實際的類來達到。
- 分類：
- 動態(tài)偽類選擇器
- UI元素狀態(tài)偽類選擇器
- 結(jié)構(gòu)偽類選擇器
- 否定偽類選擇器
1、動態(tài)偽類選擇器
- ·E:link (鏈接偽類選擇器): 選擇匹配的E元素，且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點上
- E:visited(鏈接偽類選擇器 ):選擇匹配的E元素，且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點上
- E:active(用戶行為選擇器):選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點上
- E:hover (用戶行為選擇器): 選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上
- E:focus (用戶行為選擇器):選擇匹配的E元素，且匹配元素獲取焦點
a標(biāo)簽有4種含糊（對應(yīng)四種狀態(tài)），如下：
- :link“鏈接”:超鏈接點擊之前
- :visited“訪問過的”:鏈接被訪問過之后
- :hover“懸?！?鼠標(biāo)放到標(biāo)簽上的時候
- :active“激活”:鼠標(biāo)點擊標(biāo)簽，但是不松手時。
2、狀態(tài)偽類選擇器
- E:checked(選中狀態(tài)偽類選擇器):匹配選中的復(fù)選按鈕或者單選按鈕表單元素
- E:enabled(啟用狀態(tài)偽類選擇器):匹配所有啟用的表單元素
- E:disabled(不可用狀態(tài)偽類選擇器):匹配所有禁用的表單元素
3、結(jié)構(gòu)性偽類選擇器
以下，E代表子元素，
- E:fisrt-child :作為父元素的第一個子元素的元素E。
- E:last-child :作為父元素的最后一個子元素的元素E。
- E:root:選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html,此時該選擇器與htmI類型選擇器匹配的內(nèi)容相同
- E F:nth-child(n): 選擇父元素E的第n個了元素F。
- ·n可以是整數(shù) (1，2，3)、關(guān)鍵字 (even，odd)、可以是公式(2n+I)·
- n值起始值為1，而不是0
- E F:nth-last-child(n): 選擇父元素E的倒數(shù)第n個子元素F
- E:nth-of-type(n):選擇父元素內(nèi)具有指定類型的第n個E元素
- 以下不常用
- E:nth-last-of-type(n):選擇父元素內(nèi)具有指定類型的倒數(shù)第n個E元素
- E:first-of-type:選擇父元素內(nèi)具有指定類型的第一個E元素
- E:last-of-tye : 選擇父元素內(nèi)具有指定類型的最后一個E元素
- E:only-child :選擇父元素只包含一個子元素，且該子元素匹配E元素
- E:only-of-type: 選擇父元素只包含一個同類型子元素，且該子元素匹配E元素
- E:empty: 選擇沒有子元素的元素，而且該元素也不包含任何文本節(jié)點
nth-child和nth-of-type的區(qū)別
- :nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的類型，n 可以是數(shù)字、關(guān)鍵詞或公式。
- :nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素，n 可以是數(shù)字、關(guān)鍵詞或公式。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 結(jié)構(gòu)選擇器 p元素匹配的父元素內(nèi)為奇數(shù)子元素背景改青色 */p:nth-child(odd){background: cyan;}/* p元素匹配的父元素內(nèi)為奇數(shù)的P標(biāo)簽字體改紅色 */p:nth-of-type(odd){color: red;}</style>
</head>
<body><div class="parent"><p>1-p，1-child</p><p>2-p，2-child</p><div>3-div，3-child</div><p>3-p，4-child</p><p>4-p，5-child</p></div>
</body>
</html>
4、否定偽類選擇器
- E:not(F):匹配所有除元素F外的E元素
- 例:對form中所有input加邊框，但又不想submit也起變化，
:input:not([type="submit"]) [border: 1px solid red;
- 例:對form中所有input加邊框，但又不想submit也起變化，