SS 有哪些用途?
CSS 可以用來修飾靜態(tài)網(wǎng)頁,還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。下面我們就從幾個(gè)方面來講解 CSS。
01
CSS簡介
●CSS 指層疊樣式表 (Cascading Style Sheets)
● 樣式定義如何顯示 HTML 元素
● 樣式通常存儲在樣式表中
● 把樣式添加到 HTML 中,是為了解決內(nèi)容與表現(xiàn)分離的問題
● 外部樣式表可以極大提高工作效率
● 外部樣式表通常存儲在 CSS 文件中
● 多個(gè)樣式定義可層疊為一
樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中,在 HTML 頁的頭元素中,或在一個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。
層疊次序
當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí),會使用哪個(gè)樣式呢?
瀏覽器缺省設(shè)置(沒有定義樣式表,引用瀏覽器樣式)
外部樣式表(.css文件)
內(nèi)部樣式表(位于 <head> 標(biāo)簽內(nèi)部)
內(nèi)聯(lián)樣式(在 HTML 元素內(nèi)部)
多重樣式將層疊為一個(gè)元素舉例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/a.css"> <!--.yang_shi{background:yellow;} -->
<link rel="stylesheet" href="css/b.css"> <!--.yang_shi{background:green;} -->
<style>
.yang_shi{background:red;}
</style>
</head>
<body>
<div class=“yang_shi” style=“background:black;”></div>
</body>
</html>
因此,內(nèi)聯(lián)樣式(在 HTML 元素內(nèi)部)擁有最高的優(yōu)先權(quán),這意味著它將優(yōu)先于以下的樣式聲明:<head> 標(biāo)簽中的樣式聲明,外部樣式表中的樣式聲明,或者瀏覽器中的樣式聲明(缺省值)。
02
CSS語法
CSS 語法規(guī)則由兩個(gè)主要的部分構(gòu)成:選擇器,以及一條或多條聲明:
● 選擇器通常是你需要改變樣式的 HTML 元素。
● 每條聲明由一個(gè)屬性和一個(gè)值組成。
屬性(property)是你希望設(shè)置的樣式屬性(style attribute)。每個(gè)屬性有一個(gè)值,屬性和值被冒號分開,聲明組以大括號{}括起來。
03
CSS選擇器
?? 類選擇器:類選擇器以一個(gè)點(diǎn)號顯示。如:.center{color:red;}
?? Id選擇器:id選擇器以#來定義,id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次。
?? 屬性選擇器:帶有指定屬性的選擇器。如:[title]{color:#999}或者[title=hello]{color:red;}
?? 元素選擇器:HTML 標(biāo)簽元素作為選擇器。如:a{color:#999}
?? 派生選擇器:根據(jù)元素在其位置的上下文關(guān)系定義樣式,派生選擇器包括后代選擇器、子元素選擇器、相鄰兄弟選擇器。
?? 偽類、偽元素
?? 選擇器分組、結(jié)合選擇器
CSS 選擇器——屬性選擇器
CSS 選擇器——派生選擇器
后代選擇器、子元素選擇器、相鄰兄弟選擇器。
CSS 選擇器——偽類與偽元素
偽類:包含兩種狀態(tài),偽類和結(jié)構(gòu)性偽類。狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的,在與用戶的交互過程中元素根據(jù)動態(tài)變化的,展示相對應(yīng)狀態(tài)下的樣式。
常見的狀態(tài)偽類主要包括:
結(jié)構(gòu)性偽類是 css3 新增選擇器,利用 dom 樹進(jìn)行元素過濾,通過文檔結(jié)構(gòu)的互相關(guān)系來匹配元素,能夠減少 class 和 id 屬性的定義,使文檔結(jié)構(gòu)更簡潔。
常見的結(jié)構(gòu)性偽類主要包括:
偽元素是對元素中的特定內(nèi)容進(jìn)行操作,而不是元素本身。它的操作層次比偽類更深一層并不存在于文檔結(jié)構(gòu)中。實(shí)際上,偽元素就是選取某些元素前面或后面這種普通選擇器無法完成的工作。
常見的偽元素主要包括:
注意:
有時(shí)你會發(fā)現(xiàn)偽類元素使用了兩個(gè)冒號(::) 而不是一個(gè)冒號 (:),這是 css3 規(guī)范中的一部分要求,目的是為了區(qū)分偽類和偽元素,大多數(shù)瀏覽器都支持這兩種表示方式。單冒號(:)用于 css3 偽類,雙冒號(::)用于 css3 偽元素。對于 css2 中已經(jīng)有的偽元素,例如 :before,單冒號和雙冒號的寫法 ::before 作用是一樣的。
CSS 選擇器——選擇器分組、結(jié)合選擇器
1.選擇器分組
假設(shè)我們有以下樣式
2.結(jié)合選擇器
span.class2 {color:red;}
<div>
<span>11111</span>
<span class=“class2”>2222</span>
<p class=“class2”>3333</span>
</div>
04
CSS常用屬性
?? Calc()
此 calc()函數(shù)用一個(gè)表達(dá)式作為它的參數(shù),用這個(gè)表達(dá)式的結(jié)果作為值。
支持加減乘除括號等。
如:width:calc(100% - 80px);
?? Display
visibility:hidden 隱藏元素,但是元素仍然占據(jù)空間并影響布局。
display:none 隱藏元素,并從布局中刪除元素。
display:block(塊)塊元素嘗試獲取整個(gè)寬度,并在布局中開始新行。
display:inline-block(內(nèi)聯(lián)塊)內(nèi)聯(lián)元素塊與其他內(nèi)聯(lián)元素保持在同一行中,并且不會開始新行。
display:box 盒模型。
?? Background
background-size 設(shè)置背景圖片大小,支持百分比、像素單位等。
background-position 定位背景圖。
如:background-position:20px 100px
?? Border-sizing:border-box;
為元素設(shè)定的寬度和高度決定了元素的邊框盒。
就是說,為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。
通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
?? 盒模型 display:box; 的使用
使用盒模型必須給父容器定義 css 屬性 display:box 其子容器才可以進(jìn)行劃分(如果定了 display:box 則該容器則定義為了內(nèi)聯(lián)元素,使用 margin:0px auto 讓其居中是無效的,要想使其居中只能通過它的父容器的 text-align:center);
HTML代碼:
<article>
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">03</section>
</article>
box-orient 用來確定父容器里子容器的排列方式,是水平還是垂直。(horizontal水平排列)
box-orient:vertical;//垂直排列
盒模型 display:box; 的使用
box-align 表示父容器里面子容器的垂直對齊方式,可選參數(shù)如下所示:
start | end | center | stretch
相信小伙伴們對 CSS 有了大概的了解,它既簡化了網(wǎng)頁的格式代碼、加快了下載顯示的速度,又減少了需要上傳的代碼數(shù)量。可以說,CSS 是 web 的造型師,快和小象一起學(xué)起來,有不懂的問題記得私信小象哦~
這里是云端源想IT,幫你輕松學(xué)IT”
嗨~ 今天的你過得還好嗎?
生命不必每時(shí)每刻都要沖刺
低沉?xí)r
就當(dāng)給自己放了一個(gè)悠長假期
- 2024.04.26 -
在編程的世界里,數(shù)據(jù)是構(gòu)建一切的基礎(chǔ)。就像建筑師需要了解不同材料的強(qiáng)度和特性一樣,程序員也必須熟悉各種數(shù)據(jù)類型。
今天,我們就來深入探討JavaScript中的數(shù)據(jù)類型,看看它們?nèi)绾嗡茉煳覀兊拇a世界。
數(shù)據(jù)類型是計(jì)算機(jī)語言的基礎(chǔ)知識,數(shù)據(jù)類型廣泛用于變量、函數(shù)參數(shù)、表達(dá)式、函數(shù)返回值等場合。JavaScript語言的每一個(gè)值,都屬于某一種數(shù)據(jù)類型。
JavaScript的數(shù)據(jù)類型主要分為兩大類:基本數(shù)據(jù)類型和引用數(shù)據(jù)類型。下面就來詳細(xì)介紹這兩類數(shù)據(jù)類型中都包含哪些及如何使用它們。
首先,讓我們從最基本的數(shù)據(jù)類型開始。JavaScript的基本數(shù)據(jù)類型包括:字符串(String)、數(shù)字(Number)、布爾(Boolean)、空(Null)、未定義(Undefined)、符號(Symbol)。
1、字符串(String)
tring類型用于表示由零或多個(gè)16位的Unicode字符組成的字符序列,即字符串。至于用單引號,還是雙引號,在js中還是沒有差別的。記得成對出現(xiàn)。
let name1='張三'
let name2="李四"
let name3=`王五`
1.轉(zhuǎn)換為字符串有2個(gè)方法:toString()、String()
let n=100
n.toString() // '100' 數(shù)值類型轉(zhuǎn)換為字符串類型
String(200) // '200' 數(shù)值類型轉(zhuǎn)換為字符串類型
2.模板字符串相當(dāng)于加強(qiáng)版的字符串,可以定義多行字符串。還可以利用${}在字符串中插入變量和表達(dá)式
let name='張三豐'
let age=180
`我叫${name},今年${age}歲啦!` // 我叫張三豐,今年180歲啦!
2、數(shù)字(Number)
該類型的表示方法有兩種形式,第一種是整數(shù),第二種為浮點(diǎn)數(shù)。整數(shù):可以通過十進(jìn)制,八進(jìn)制,十六進(jìn)制的字面值來表示。浮點(diǎn)數(shù):就是該數(shù)值中必須包含一個(gè)小數(shù)點(diǎn),且小數(shù)點(diǎn)后必須有一位數(shù)字。
let num=100 // 整數(shù)
let floatNum=3.14 // 浮點(diǎn)數(shù)
// toFixed() 方法可以對計(jì)算結(jié)果進(jìn)行四舍五入
let pi=Math.PI // 3.141592653589793
pi.toFixed(2) // 3.14 保留2位小數(shù)
// 八進(jìn)制的值第一位必須是零0,后面每一位數(shù)的范圍在0~7。如果某一位數(shù)超出范圍,首位的0會被忽略,后面的數(shù)值會按照十進(jìn)制來解析
let octalNum1=076 // 八進(jìn)制的 63
let octalNum2=083 // 八進(jìn)制 83
let octalNum3=06 // 八進(jìn)制 6
// 十六進(jìn)制的值前兩位必須是0x,后面每一位十六進(jìn)制數(shù)字的范圍在0~9及A~F,字母A~F可以大寫也可以小寫。
let hexNum1=0xA // 十六進(jìn)制 10
let hexNum2=0x3f // 十六進(jìn)制 63
// 數(shù)值轉(zhuǎn)換的三個(gè)方法 Number()、parseInt()、parseFloat()
1.Number() // 可以將字符串、布爾值、null、undefined 等轉(zhuǎn)換為對應(yīng)的數(shù)值,如果無法轉(zhuǎn)換返回NaN
Number("123") // 輸出123
Number("hello") // 輸出NaN
2.parseInt() // 可以將字符串轉(zhuǎn)換為整數(shù),如果無法轉(zhuǎn)換返回NaN
parseInt("123") // 輸出123
parseInt("123.45") // 輸出:123
parseInt("hello") // 輸出NaN
3.parseFloat() // 可以將字符串轉(zhuǎn)換為浮點(diǎn)數(shù),如果無法轉(zhuǎn)換返回NaN
parseFloat("123.45") // 輸出123.45
parseFloat("hello") // 輸出NaN
3、布爾(Boolean)
Boolean 數(shù)據(jù)類型只有兩個(gè)值:true 和 false,分別代表真和假。很多時(shí)候我們需要將各種表達(dá)式和變量轉(zhuǎn)換成 Boolean 數(shù)據(jù)類型來當(dāng)作判斷條件。
示例:
1.數(shù)值運(yùn)算判斷
1 + 2===3 // true
1 + 1 > 3 // false
2.數(shù)值類型轉(zhuǎn)換
let bool1=Boolean(0); // 數(shù)值轉(zhuǎn)換為布爾值
let bool2=Boolean(""); // 字符串轉(zhuǎn)換為布爾值
let bool3=Boolean(null); // null 轉(zhuǎn)換為布爾值
let bool4=Boolean(undefined); // undefined 轉(zhuǎn)換為布爾值
let bool5=Boolean(NaN); // NaN 轉(zhuǎn)換為布爾值
let bool6=Boolean([]); // 空數(shù)組轉(zhuǎn)換為布爾值
let bool7=Boolean({}); // 空對象轉(zhuǎn)換為布爾值
ECMAScript 類型的值都有與布爾值等價(jià)的形式。可以調(diào)用 Boolean() 函數(shù)來將其他類型轉(zhuǎn)換為布爾值。不同類型轉(zhuǎn)換為布爾值的規(guī)則如下表
4、未定義(Undefined)
在 JavaScript 中,undefined 是一個(gè)特殊的值和數(shù)據(jù)類型。當(dāng)一個(gè)變量聲明但未賦值時(shí),該變量的值就是 undefined。它表示一個(gè)未定義或未初始化的值。
1.聲明但未賦值的變量
// 當(dāng)使用 var、let 或 const 聲明一個(gè)變量但未對其賦值時(shí),該變量的初始值為 undefined。
let n;
console.log(n) // 輸出 undefined
2.未定義的屬性
// 當(dāng)訪問一個(gè)不存在的屬性時(shí),該屬性的值為undefined
let obj={ name: '張三豐' }
console.log(obj.age) // 輸出 undefined
3.函數(shù)沒有返回值
// 如果函數(shù)沒有明確返回值或者使用 return 語句返回一個(gè)未定義的值,函數(shù)的返回值將是 undefined
function getName() {
// 沒有返回值
}
console.log(foo()) // 輸出 undefined
4.函數(shù)參數(shù)未傳遞
// 如果函數(shù)定義了參數(shù)但未傳遞相應(yīng)的值,那么該參數(shù)的值將是 undefined
function getName(name) {
console.log("Hello, " + name)
}
getName() // 輸出:Hello, undefined
5、空(Null)
在 JavaScript 中,null 是一個(gè)特殊的值和數(shù)據(jù)類型。它表示一個(gè)空值或者不存在的對象。
與undefined不同,null是JavaScript 保留關(guān)鍵字,而 undefined 只是一個(gè)常量。也就是說可以聲明名稱為 undefined 的變量,但將 null 作為變量使用時(shí)則會報(bào)錯(cuò)。
1.空值
// null 表示一個(gè)空值,用于表示變量的值為空
let name=null
console.log(name) // 輸出 null
2.不存在的對象
// 當(dāng)使用 typeof 運(yùn)算符檢測一個(gè)值為 null 的對象時(shí),會返回 "object"
let obj=null
console.log(typeof obj) // 輸出:object
null 與 undefined 區(qū)別
let x;
let y=null;
console.log(x===undefined) // 輸出:true
console.log(x===null) // 輸出:false
console.log(y===null) // 輸出:true
console.log(y===undefined) // 輸出:false
6、符號(Symbol)
符號 (Symbols) 是 ECMAScript 第 6 版新定義的。符號類型是唯一的并且是不可修改的。
1.創(chuàng)建Symbol
// 使用全局函數(shù) Symbol() 可以創(chuàng)建一個(gè)唯一的 Symbol 值
let s=Symbol()
console.log(typeof s) // 輸出 symbol
2.唯一性
// 每個(gè)通過 Symbol() 創(chuàng)建的 Symbol 值都是唯一的,不會與其他 Symbol 值相等,即使它們的描述相同
let s1=Symbol()
let s2=Symbol()
console.log(s1==s2) // 輸出 false
let s3=Symbol('hello')
let s4=Symbol('hello')
console.log(s3==s4) // 輸出 false
3.Symbol 常量
// 通過 Symbol.for() 方法可以創(chuàng)建全局共享的 Symbol 值,稱為 Symbol 常量
let s5=Symbol.for('key')
let s6=Symbol.for('key')
console.log(s5===s6) // 輸出 true
Symbol 的主要作用是創(chuàng)建獨(dú)一無二的標(biāo)識符,用于定義對象的屬性名或者作為一些特殊的標(biāo)記。它在一些特定的應(yīng)用場景中非常有用,如在迭代器和生成器中使用 Symbol.iterator 標(biāo)識可迭代對象。
除了基本數(shù)據(jù)類型,JavaScript還有引用數(shù)據(jù)類型:對象(Object)、數(shù)組(Array)和函數(shù)(Function)
1、對象(Object)
Object 是一個(gè)內(nèi)置的基本數(shù)據(jù)類型和構(gòu)造函數(shù)。是一組由鍵、值組成的無序集合,定義對象類型需要使用花括號{ },它是 JavaScript 中最基本的對象類型,也是其他對象類型的基礎(chǔ)。
1.創(chuàng)建對象
// Object 類型可以用于創(chuàng)建新的對象??梢允褂脤ο笞置媪?{} 或者通過調(diào)用 Object() 構(gòu)造函數(shù)來創(chuàng)建對象
let obj1={} // 使用對象字面量創(chuàng)建空對象
let obj2=new Object() // 使用 Object() 構(gòu)造函數(shù)創(chuàng)建空對象
2.添加、修改、刪除屬性
let obj={}
obj.name='張三豐' // 添加屬性
obj.age=30 // 添加屬性
obj.name='張無忌' // 修改屬性
delete obj.age // 刪除屬性
2、數(shù)組(Array)
JavaScript 中,數(shù)組(Array)是一組按順序排列的數(shù)據(jù)的集合,數(shù)組中的每個(gè)值都稱為元素,而且數(shù)組中可以包含任意類型的數(shù)據(jù)。
在 JavaScript 中定義數(shù)組需要使用方括號[ ],數(shù)組中的每個(gè)元素使用逗號進(jìn)行分隔。
想要快速入門前端開發(fā)嗎?推薦一個(gè)前端開發(fā)基礎(chǔ)課程,這個(gè)老師講的特別好,零基礎(chǔ)學(xué)習(xí)無壓力,知識點(diǎn)結(jié)合代碼,邊學(xué)邊練,可以免費(fèi)試看試學(xué),還有各種輔助工具和資料,非常適合新手!點(diǎn)這里前往學(xué)習(xí)哦!云端源想-程序員必看的精品課程
1、有序集合:數(shù)組是一種有序的數(shù)據(jù)集合,每個(gè)元素在數(shù)組中都有一個(gè)對應(yīng)的索引,通過索引可以訪問和操作數(shù)組中的元素。
2、可變長度:數(shù)組的長度是可變的,可以根據(jù)需要動態(tài)添加或刪除元素,或者修改數(shù)組的長度。
可以使用 push()、pop()、shift()、unshift() 等方法來添加或刪除元素,也可以直接修改數(shù)組的 length 屬性來改變數(shù)組的長度。
3、存儲不同類型的值:數(shù)組可以存儲任意類型的值,包括基本類型和對象類型。同一個(gè)數(shù)組中可以混合存儲不同類型的值。
4、索引訪問:通過索引來訪問數(shù)組中的元素,索引從 0 開始??梢允褂梅嚼ㄌ栒Z法 [] 或者點(diǎn)號語法 . 來訪問數(shù)組的元素。
5、內(nèi)置方法:數(shù)組提供了許多內(nèi)置的方法,用于對數(shù)組進(jìn)行常見的操作和處理,如添加、刪除、查找、排序、遍歷等。
常用的數(shù)組方法包括 push()、pop()、shift()、unshift()、concat()、slice()、splice()、indexOf()、forEach()、map()、filter()、reduce() 等。
6、可迭代性:數(shù)組是可迭代的,可以使用 for...of 循環(huán)或者 forEach() 方法遍歷數(shù)組中的元素。
1.創(chuàng)建數(shù)組
// 可以使用數(shù)組字面量 [] 或者通過調(diào)用 Array() 構(gòu)造函數(shù)來創(chuàng)建數(shù)組。
let arr1=[] // 使用數(shù)組字面量創(chuàng)建空數(shù)組
let arr2=new Array() // 使用 Array() 構(gòu)造函數(shù)創(chuàng)建空數(shù)組
let arr3=[1, 2, 3] // 使用數(shù)組字面量創(chuàng)建包含初始值的數(shù)組
2.訪問和修改數(shù)組元素
// 數(shù)組的元素通過索引訪問,索引從 0 開始??梢允褂盟饕齺碜x取或修改數(shù)組的元素。
let arr=[1, 2, 3]
console.log(arr[0]) // 訪問數(shù)組的第一個(gè)元素,輸出:1
arr[1]=5 // 修改數(shù)組的第二個(gè)元素
arr.length // 獲取數(shù)組長度,輸出:3
3、函數(shù)(Function)
ECMAScript中的函數(shù)是對象,與其他引用類型一樣具有屬性和方法。因此,函數(shù)名實(shí)際是一個(gè)指向函數(shù)對象的指針。
1.創(chuàng)建函數(shù)
// 可以使用函數(shù)聲明或函數(shù)表達(dá)式來創(chuàng)建函數(shù)。函數(shù)聲明使用 function 關(guān)鍵字,后面跟著函數(shù)名稱和函數(shù)體,而函數(shù)表達(dá)式將函數(shù)賦值給一個(gè)變量。
// 函數(shù)聲明
function add(a, b) {
return a + b
}
// 函數(shù)表達(dá)式
let multiply=function(a, b) {
return a * b
}
2.函數(shù)調(diào)用
// 函數(shù)可以通過函數(shù)名后面加括號 () 進(jìn)行調(diào)用。調(diào)用函數(shù)時(shí),可以傳遞參數(shù)給函數(shù),函數(shù)可以接收參數(shù)并進(jìn)行相應(yīng)的處理。
let result=add(3, 5) // 調(diào)用 add 函數(shù)并傳遞參數(shù)
console.log(result) // 輸出:8
3.函數(shù)返回值
// 函數(shù)可以使用 return 語句返回一個(gè)值,也可以不返回任何值。當(dāng)函數(shù)執(zhí)行到 return 語句時(shí),會立即停止執(zhí)行,并將返回值傳遞給函數(shù)調(diào)用者。
function calculateSum(a, b) {
return a + b
}
let result=calculateSum(2, 3)
console.log(result) // 輸出:5
4.函數(shù)作用域
// 函數(shù)作用域是指函數(shù)內(nèi)部聲明的變量在函數(shù)內(nèi)部有效,外部無法訪問。函數(shù)內(nèi)部定義的變量只能在函數(shù)內(nèi)部被訪問和使用,在函數(shù)外部是不可見的。
function myFunction() {
var x=10 // 局部變量
console.log(x) // 在函數(shù)內(nèi)部可見
}
myFunction() // 輸出:10
console.log(x) // 報(bào)錯(cuò):x is not defined
此外,JavaScript還有一些特殊的數(shù)據(jù)類型,如Date(表示日期和時(shí)間)、RegExp(表示正則表達(dá)式),以及ES6新增的Map、Set、WeakMap和WeakSet,用于存儲特定類型的數(shù)據(jù)。
檢測數(shù)據(jù)類型可以使用typeof操作符,它可以檢測基本數(shù)據(jù)類型和function,但無法區(qū)分不同的引用數(shù)據(jù)類型。
var arr=[
null, // object
undefined, // undefined
true, // boolean
12, // number
'haha', // string
Symbol(), // symbol
20n, // bigint
function(){}, // function
{}, // object
[], // object
]
for (let i=0; i < arr.length; i++) {
console.log(typeof arr[i])
}
掌握J(rèn)avaScript數(shù)據(jù)類型是成為一名高效開發(fā)者的關(guān)鍵。它們是構(gòu)建程序的磚石,理解它們的用法和限制將使你能夠構(gòu)建更穩(wěn)健、更可維護(hù)的代碼。
現(xiàn)在,你已經(jīng)了解了JavaScript的數(shù)據(jù)類型,是時(shí)候在你的代碼中運(yùn)用這些知識了。記住,實(shí)踐是學(xué)習(xí)的最佳方式,所以動手嘗試吧!
如果覺得本文對你有所幫助,別忘了點(diǎn)贊和分享哦!
我們下期再見!
END
文案編輯|云端學(xué)長
文案配圖|云端學(xué)長
內(nèi)容由:云端源想分享
CSS中,類選擇器用點(diǎn)號表示。
實(shí)際項(xiàng)目中一個(gè)div元素為了能被多個(gè)樣式表匹配到(樣式復(fù)用),通常div的class中由好幾段組成,如<div class="user login">能被.user和.login兩個(gè)選擇器選中。
如果這兩個(gè)選擇器中有相同的屬性值,則該屬性值先被改為.user中的值,再被改為.login中的值,即重復(fù)的屬性以最后一個(gè)選擇器中的屬性值為準(zhǔn)。
測試代碼如下:
<!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=gb2312" />
<title>無標(biāo)題文檔</title>
<style>
.user
{
font-size: 30px;
background-color:red;
}
.login
{
background-color:blue;
}
</style>
</head>
<body>
</head>
<body>
<div class="user">你好。這是一個(gè) DIV 元素,class='user'。</div>
<div class="login">你好。這是一個(gè) DIV 元素,class='login'。</div>
<div class="user login">你好。這是一個(gè) DIV 元素,class='user login'。</div>
</body>
</body>
</html>
效果如下圖:
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。