整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
載說明：原創(chuàng)不易，未經(jīng)授權，謝絕任何形式的轉載
層疊樣式表（CSS）是一種強大的樣式表語言，可以幫助前端開發(fā)人員為簡單的網(wǎng)頁添加樣式。然而，在使用這種樣式表語言時，開發(fā)人員可能會犯一些錯誤。這些錯誤會妨礙開發(fā)人員編寫高效的代碼。本文探討了一些常見的錯誤，并為每個錯誤提供了解決方案。
以下是我們開發(fā)人員經(jīng)常犯的九個最常見的錯誤；你也犯過其中一些嗎？
!important 是 CSS 中的一個關鍵字，它可以幫助我們將屬性值設置為比其他樣式選項更重要。例如，如果您將 !important 聲明應用于元素樣式，那么該樣式將覆蓋該屬性類別的所有其他樣式。以下是語法：
selector {
property: value !important;
}例如，如果您有一個標題元素 - h1 ，就像這樣：
<h1 class="css-mistake">CSS Mistakes</h1>然后您應用以下樣式規(guī)則：
h1 {
color: red;
}
.css-mistake {
color: green;
}默認情況下，標題文本的顏色將為“綠色”，因為類選擇器具有比元素（標簽）選擇器更高的CSS特異性選擇器。但是使用 !important ，您可以覆蓋該樣式CSS規(guī)則（從而使元素（標簽）選擇器覆蓋類選擇器）。通過這種方式，標題文本的顏色將為紅色，優(yōu)先于類選擇器設置的綠色。
h1 {
color: red !important;
}過度使用 !important 會導致特異性戰(zhàn)爭-一種狀態(tài)，其中樣式開始互相覆蓋，無法按照樣式表的作者定義的方式工作。下一節(jié)將通過列舉適當使用 !important 的實例來提供解決此問題的方法。
什么時候應該使用？
就像本節(jié)標題所說的那樣——“過度使用 !important ”，我們在使用這個關鍵詞時必須小心謹慎。只有在迫切需要時才應該節(jié)制地使用 !important 。以下是一些使用它的情況：
在進行樣式設計時，使用正確的長度單位對于創(chuàng)建響應式設計至關重要。CSS有兩類長度單位：絕對單位和相對單位。許多CSS屬性，如“寬度”、“高度”、“字體大小”等，都使用單位來表示其值。下面的代碼片段給出了單位的使用示例：
selector {
font-size: 14px;
}在上面的代碼片段中，我們聲明了“font-size”CSS屬性，然后給它賦了一個14px的值。
什么是絕對單位？
這些是長度單位，無論渲染媒體如何，都具有固定的值，與設備的屏幕尺寸無關。這些單位非常適合在不同屏幕尺寸上保持元素的相同大小。你可能已經(jīng)使用過一些標準的絕對單位，如像素 - px, 點 - pt, 英寸 - in, 毫米 - mm, 厘米 - cm, 和派卡 - pc. 絕對單位為我們提供了準確、固定和精確的樣式值，但它們不會根據(jù)屏幕尺寸進行縮放。絕對單位不適用于實現(xiàn)響應式設計。因此，將它們限制在不需要根據(jù)瀏覽器尺寸或設備屏幕尺寸進行調整的元素上。另一方面，相對單位如其名稱所示，是相對于另一個屬性（大多數(shù)情況下是父元素）的。這些單位具有靈活性，可以根據(jù)視口動態(tài)增長，適應響應式設計，與絕對單位不同。一些相對單位的例子是百分比（%）- rem, em, 等等。
如何使用相對單位及其解釋
了解每個相關單位的重要性，使您具備有效使用它們的知識。以下是一些相關單位及其解釋：
% - 這個單位完全依賴于父元素。因此，它是相對于父元素的。例如，如果你將一個元素的寬度設置為80%，它將是父元素寬度的80%。請注意，在以下屬性的值中使用百分比：寬度、高度、邊距和內(nèi)邊距。
em - 這與父元素的字體大小相關。例如，如果您將元素的字體大小設置為4em，則它將是父元素字體大小的四倍。在處理排版（文本）時使用 em - 這使文本按比例縮放。
rem - 這是相對于根元素的字體大小。通常使用 rem 來實現(xiàn)整個布局的一致樣式。
vh - 相對于視口高度的1%。
vw - 相對于視口寬度的1%。
內(nèi)聯(lián)樣式是一種通過 style 屬性將直接樣式傳遞給HTML元素的樣式系統(tǒng)。雖然存在這種樣式系統(tǒng)，但重要的是要理解它的使用不支持應用程序構建的最佳實踐，因為它會創(chuàng)建不可重用的代碼。只有在測試或美化簡單的HTML文件時才使用內(nèi)聯(lián)樣式。以下是一些避免使用這種樣式系統(tǒng)的原因：
最佳實踐
為了克服內(nèi)聯(lián)樣式的缺點，您必須使用內(nèi)部樣式表（位于 <style> 標簽內(nèi)的樣式）或外部樣式表來保持您的代碼健康和有組織。
不同的瀏覽器具有各種默認樣式，這些樣式不同，導致元素的外觀不一致。這就是為什么我們必須定義一些樣式，以便在其他瀏覽器上為網(wǎng)頁樣式提供一致的起點。這些樣式被稱為“CSS重置”。CSS重置是一種CSS樣式，用于刪除瀏覽器默認樣式的規(guī)則。如果您熟悉CSS，并且在使用過程中有時會注意到某些特定屬性的默認樣式，如 margin. ，CSS重置可以幫助我們將樣式基礎調整到一致的水平。以下是使用這些重置的原因：
如何創(chuàng)建自己的CSS重置
這里是要遵循的簡單步驟：
* {
margin: 0;
padding: 0;
border: 0;
}上面的代碼是一個基本的CSS重置，它針對邊距、內(nèi)邊距和邊框屬性，將每個屬性的值設為0。這個過程被稱為“標準化過程”，它可以消除瀏覽器默認的間距和邊框。這里有一些在線的CSS重置：
CSS中的單行代碼是CSS代碼的速記樣式。它可以使代碼更加清晰和有結構。掌握這些速記技巧將有助于您編寫更簡潔的代碼（將多行代碼壓縮為單行）。例如，當您想要在所有邊緣（上，下，左，右）處對元素邊距進行樣式設置時，您不需要明確地指定所有屬性（如 margin-top, margin-right, margin-bottom, 和 margin-left, ），您可以直接使用邊距屬性的速記方式。下面的代碼解釋了這一點：
/* Don't do this */
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 15px;
/* Instead, use Margin Shorthand */
margin: 10px 20px 10px 20px;
/* Margin Shorthand can even be more simplified */
margin: 10px 20px;這些簡短的話語帶來了許多優(yōu)點：
CSS選擇器可以在外部或內(nèi)部樣式表中定位HTML元素。CSS中有許多選擇器方法，包括標簽（元素）、類、ID和偽元素。知道何時使用選擇器以及何時不使用選擇器非常重要。此外，您還必須了解CSS選擇器的工作原理。
如何避免使用過于復雜的選擇器
如果你在你的樣式表中遇到了像下面這樣的代碼片段，那就意味著你正在使用過于復雜的選擇器。
#container > .box > content .section .title p > span .italic {
color: blue;
font-weight: bold;
}以下是避免過于復雜選擇器的技巧：
瀏覽器兼容性很重要，因為你不希望樣式在一個瀏覽器上良好運行，在另一個瀏覽器上則運行不正常。忽略瀏覽器兼容性可能會導致用戶在不同瀏覽器上的體驗不一致。這是因為不同的瀏覽器有其自己的CSS樣式渲染方式。但是，你可以通過考慮瀏覽器兼容性并確保你的樣式與不同瀏覽器兼容來實現(xiàn)樣式一致性。實現(xiàn)瀏覽器兼容性代碼的一種方法是實施以下操作：
使用供應商前綴：某些CSS屬性需要您使用前綴來渲染，無論使用哪種瀏覽器。需要這些前綴的瀏覽器包括Internet Explorer，Mozilla Firefox和Safari。這些前綴被稱為供應商前綴，因為它們是特定類型的瀏覽器獨有的。前綴的示例： -webkit-, -moz-, 和 -ms-. 。
/* webkit-prefixed version - used by browsers that use the WebKit layout engine, such as Chrome and Safari- */
-webkit-border-radius: 8px;
/* ms-prefixed version -used by browsers that use the Microsoft layout engine, such as Internet Explorer. */
-ms-border-radius: 10px;
/* standard version */
border-radius: 8px;聲明字體回退：在為“font-family”等屬性分配值時，您必須添加回退字體。如果自定義字體不可用，回退字體將是實施的選項之一。
利用Can I Use網(wǎng)站檢查CSS屬性在各種瀏覽器中的兼容性。（https://caniuse.com/）
Hex碼是顏色的十六進制表示。它是一個由“#”符號前綴的6位代碼，后跟三對十六進制數(shù)字，其中第一對表示紅色值，第二對表示綠色值，最后一對表示藍色值。語法：
使用直接的顏色關鍵詞有一些限制：
顏色名稱在不同的瀏覽器中是不一致的。例如，如果你將顏色屬性設置為綠色，不同的瀏覽器對其解釋的方式也會有所不同。因此，不同瀏覽器之間的渲染是不一致的。
顏色名稱受到限制，因為您無法調整它們的色調、陰影等。
顏色名稱的選擇有限。由于使用顏色名稱的限制，我們需要選擇使用十六進制代碼，這些代碼沒有這些限制。以下是十六進制代碼比顏色關鍵字更合適的原因：
尋找十六進制代碼的高效方法
以下是獲取十六進制代碼的幾種方法：
使用0px替代0：毫無疑問，這可能不會對樣式表產(chǎn)生影響，但為了最佳實踐，請確保使用0而不是0px。
selector {
/*Don't do this*/
padding: 10px 12px 15px 0px;
/*Do this*/
padding: 10px 12px 15px 0;
}設置高的z-index值：給 z-index 分配高值是非常不必要和過度的。遲早，這將在你的樣式表中造成問題，特別是當 z-index. 有多個實現(xiàn)時。
selector {
/*Don't do this*/
z-index: 50;
/*Do this*/
z-index: 2; /*Let the value be minimal*/
}
本文深入探討了常見的CSS錯誤，并為每個錯誤提供了深入的解決方案。通過閱讀本指南，毫無疑問您已經(jīng)了解了一些常見的CSS錯誤，并且從此以后，您將知道如何解決它們，因為我們還要研究每個錯誤的解決方案。
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
1. 常規(guī)流
2. 浮動
3. 定位
1. 文字環(huán)繞
字體環(huán)繞
2. 橫向排列
修改float屬性值為：
- left：左浮動，元素靠上靠左
- right：右浮動，元素靠上靠右
默認值為none
1. 當一個元素浮動后，元素必定為塊盒(更改display屬性為block)
2. 浮動元素的包含塊，和常規(guī)流一樣，為父元素的內(nèi)容盒
1. 寬度為auto時，適應內(nèi)容寬度
2. 高度為auto時，與常規(guī)流一致，適應內(nèi)容的高度
3. margin為auto，為0.
4. 邊框、內(nèi)邊距、百分比設置與常規(guī)流一樣
1. 左浮動的盒子靠上靠左排列
2. 右浮動的盒子考上靠右排列
3. 浮動盒子在包含塊中排列時，會避開常規(guī)流塊盒
4. 常規(guī)流塊盒在排列時，無視浮動盒子
5. 行盒在排列時，會避開浮動盒子
6. 外邊距合并不會發(fā)生
> 如果文字沒有在行盒中，瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒。
高度坍塌的根源：常規(guī)流盒子的自動高度，在計算時，不會考慮浮動盒子
清除浮動，涉及css屬性：clear
- 默認值：none
- left：清除左浮動，該元素必須出現(xiàn)在前面所有左浮動盒子的下方
- right：清除右浮動，該元素必須出現(xiàn)在前面所有右浮動盒子的下方
- both：清除左右浮動，該元素必須出現(xiàn)在前面所有浮動盒子的下方
層疊樣式表(英文全稱：Cascading Style Sheets) *層疊：多個樣式可以作用在同一個html的元素上，同時生效
是一種用來表現(xiàn)HTML或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
CSS很像化妝，通過不同的CSS將同樣的HTML內(nèi)容打造為不同的呈現(xiàn)結果。
所以，前端程序員相互表白的時候可以說：you are the CSS to my HTML.
這是不是CSS是對HTML進行美化和布局作用的最好總結？
根據(jù)定義CSS的位置不同，分為行內(nèi)樣式、內(nèi)部樣式和外部樣式
也稱為內(nèi)聯(lián)樣式
直接在標簽中編寫樣式，通過使用標簽內(nèi)部的style屬性；
一般在測試的時候使用居多：
語法：
<html標簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標簽>
案例：
<div style="color: red;">hello my css</div>弊端：只能對當前的標簽生效，沒有做到內(nèi)容和樣式相分離，耦合度太高。
定義在head標簽內(nèi)，通過style標簽，該標簽內(nèi)容就是CSS代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內(nèi)部樣式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>1、提前定義css資源文件
2、在head標簽內(nèi)，定義link標簽引入外部樣式文件。
lina.css文件，放在與html頁面同級的css文件夾中：
div {
color: red;
}
html頁面中的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>作用域的范圍:外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表
優(yōu)先級：外部樣式表<內(nèi)部樣式表<行內(nèi)樣式表;
同樣的樣式作用在同一個標簽身上：就近原則；不同樣式作用在同一個標簽身上:疊加生效。
基本格式：由兩個主要的部分構成：選擇器，以及一條或多條聲明:
選擇器 {
屬性1:值1;
屬性2:值2;
...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號分割，不同的屬性之間用分號隔開。例如：
注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。
CSS注釋以 /* 開始, 以 */ 結束
/*這是CSS的注釋*/
div {
color: red; /*文字顏色是紅色*/
}選擇具有相同id屬性值的元素，建議html頁面中的id值唯一
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
PS： ID屬性不要以數(shù)字開頭，數(shù)字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
雖然多個元素可以使用同一個id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對多個標簽生效，使用class選擇器。
選擇具有相同的class屬性值的元素。
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
PS：類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。
選擇具有相同標簽名稱的元素。
定義選擇器語法：標簽名稱{}；PS：標簽名稱必須是html提供好的標簽。
使用標簽選擇器：自動使用在所有的同名的標簽上
ID選擇器 > 類選擇器 > 標簽選擇器
當多個選擇器作用在同一個標簽上的時候，如果屬性沖突，看優(yōu)先級；如果不沖突，樣式疊加生效。
行內(nèi)樣式 > 內(nèi)部樣式 >外部樣式
同樣，三個樣式表中都有內(nèi)容作用在同一個html標簽的時候，如果屬性沖突，看優(yōu)先級；如果不沖突，樣式疊加生效。
跟顏色相關的取值分3種：
1、顏色的單詞 red blue...
2、rgb(紅，綠，藍)三色的取值范圍是0-255 rgb(255,0,0)
rgba（紅，綠，藍,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 ：值的范式是00-FF 十六進制數(shù)字組成的 例如：#FF0000
PS：只有塊狀元素可以設置寬高，行級元素設置不生效。
取值方式有2種：
1：數(shù)值 絕對數(shù)字 單位是像素PX
2：百分比：占據(jù)父元素的比例
以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發(fā)者工具調出以下內(nèi)容。
在elements中可以看到當前頁面的所有標簽，在styles中可以看到html元素對應的樣式。
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
盒子模型說明圖：
元素的實際寬度和高度：
當我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的：
總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側不能出現(xiàn)浮動元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--沒有浮動屬性的元素都屬于常規(guī)文檔流：從上往下從左往右依次顯示
浮動的元素都脫離了常規(guī)文檔流；
為了好理解：大家可以認為浮動元素屬于一層，非浮動元素屬于一層
如果想要非浮動元素不受浮動元素的影響，需要使用clear屬性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮動，脫離常規(guī)文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮動，常規(guī)文檔流,
<br/>PS:此時div1在div2的上方顯示，因為div1和div2是不同文檔流中的元素，顯示互不影響
如果不想讓div2被浮動元素影響，需要添加clear屬性。
添加clear: left;之后div2就會忽略div1浮動的影響，在div1層后面顯示，不會重疊了，大家可以自己試驗一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮動，脫離常規(guī)文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮動，常規(guī)文檔流,
<br/>PS:此時div3在div4的上方顯示，因為div3和div4是不同文檔流中的元素，顯示互不影響
如果不想讓div4被浮動元素影響，需要添加clear屬性。
添加clear: right;之后div4就會忽略div3浮動的影響，在div3層后面顯示，不會重疊了，大家可以自己試驗一下
clear屬性有三個取值：left、right、both;分別是取出左浮動、有浮動和所有浮動元素的影響
</div>
<div style="background: lavender;">
div5-未浮動，常規(guī)文檔流,
</div>
</body>
</html>
控制內(nèi)容溢出元素框時顯示的方式。
overflow屬性有以下值：
值 | 描述 |
visible | 默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。 |
hidden | 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。 |
scroll | 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 |
auto | 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 |
inherit | 規(guī)定應該從父元素繼承 overflow 屬性的值。 |
注意:overflow 屬性只工作于指定高度的塊元素上。
注意: 在 OS X Lion ( Mac 系統(tǒng)) 系統(tǒng)上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。
display屬性設置一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。
隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產(chǎn)生不同的結果。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
CSS樣式有以下三個：
由兩個或多個基礎選擇器，通過不同方式組合而成的。
可以更準確更精細的選擇目標元素標簽。
語法：* {} 一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，一般將 * 替換為常用標簽的名稱，并用逗號分隔，其實就是使用并集選擇器。
并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。
語法：選擇器1，選擇器2，......選擇器N{}
意思是多個選擇器都是通用的樣式。任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。
條件：交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。
語法：h3.class{ color:red; }
其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list。
交集選擇器是并且的意思。 即...又...的意思
例如： table.bg 選擇的是： 類名為 .bg 的 表格標簽，但用的相對來說比較少。概念：后代選擇器又稱為包含選擇器。
作用：用來選擇元素或元素組的子孫后代。
其寫法就是把外層標簽寫在前面，內(nèi)層標簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。
格式：父級 子級{屬性:屬性值;屬性:屬性值;}語法：.class h3{color:red;font-size:16px;}
當標簽發(fā)生嵌套時，內(nèi)層標簽就成為外層標簽的后代。
子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi) 的標簽。
作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接。
語法：.class>h3{color:red;font-size:14px;}
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復合選擇器</title>
<style>
/*全局選擇器：
一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，
*/
*{
color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調*/
}
/*并集選擇器：通常用于集體聲明
替換全局選擇器；
*/
div,p,dldt,dd{
/*去掉瀏覽器的默認樣式*/
margin: 0;
padding: 0;
color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調*/
}
/*交集選擇器*/
li.myli{
color: red;
}
/*后代選擇器*/
ul li{
font-size: 28px;
}
.myUL li{
font-family: "微軟雅黑";
}
.myUL li a{
text-decoration: line-through;
}
/*子元素選擇器*/
.demo>h3{
color: red;
}
</style>
</head>
<body>
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444<a href="">點擊我試試</a></li>
<li class="myUL">
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444
<a href="">點擊我試試</a>
</li>
</ul>
</li>
</ul>
<ol>
<li>li11111111111</li>
<li>li22222222222</li>
<li>li33333333333</li>
<li>li44444444444</li>
</ol>
<div class="demo">
div1
<h3>靜夜思</h3>
<ul>
<li><h3>靜夜思----li</h3></li>
</ul>
</div>
</body>
</html>
偽類選擇器：和類選擇器相區(qū)別類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。
作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。
因為偽類選擇器很多，比如鏈接偽類，結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style>
/*偽類選擇器*/
a:link{
color: red;/*默認顏色是紅色*/
}
a:visited{
color: blue;/*訪問過的頁面是藍色*/
}
a:hover{
color: green;/*鼠標懸浮是綠色*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠標不放手是金色*/
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<a href="03-常用樣式.html" target="_blank">常用樣式</a>
<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
<a href="05-綜合練習.html" target="_blank">綜合練習</a>
</body>
</html>
注意**
a { /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經(jīng)過 */
color: red; /* 鼠標經(jīng)過的時候，由原來的 灰色 變成了紅色 */
}選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 p .one |
子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav, .header |
鏈接偽類選擇器 | 給鏈接更改狀態(tài) | 較多 | 重點記住 a{} 和 a:hover 實際開發(fā)的寫法 |
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
