在,Safari(技術預覽版106)和Firefox(版本78)的預覽版均支持新的CSS :is() 和 :where() 偽類。 Chrome的實施仍然落后。
你可以使用 :is() 偽類來刪除選擇器列表中的重復項。
/* BEFORE */
.embed .save-button:hover,
.attachment .save-button:hover {
opacity: 1;
}
?
/* AFTER */
:is(.embed, .attachment) .save-button:hover {
opacity: 1;
}
此功能主要在未處理的標準CSS代碼中有用。如果使用Sass或類似的CSS預處理程序,則可能更喜歡嵌套。
注意:瀏覽器還支持非標準的 :-webkit-any() 和 :-moz-any() 偽類,它們與 :is() 相似,但限制更多。WebKit在2015年棄用了 :-webkit-any() ,Mozilla已將Firefox的用戶代理樣式表更新為使用 :is() 而不是 :-moz-any()。
:where() 偽類與 :is() 具有相同的語法和功能。它們之間的唯一區別是 :where() 不會增加整體選擇器的特殊性(即某條CSS規則特殊性越高,它的樣式越優先被采用)。
:where() 偽類及其任何參數都不對選擇器的特殊性有所幫助,它的特殊性始終為零。
此功能對于應易于覆蓋的樣式很有用。例如,基本樣式表 sanitize.css 包含以下樣式規則,如果缺少 `` 屬性,該規則將設置默認的填充顏色:
svg:not([fill]) {
fill: currentColor;
}
由于其較高的特殊性(B=1,C=1),網站無法使用單個類選擇器(B=1)覆蓋此聲明,并且被迫添加 !important 或人為地提高選擇器的特殊性(例如 .share- icon.share-icon)。
.share-icon {
fill: blue; /* 由于特殊性較低,因此不適用 */
}
CSS庫和基礎樣式表可以通過用 :where() 包裝它們的屬性選擇器來避免這個問題,以保持整個選擇器的低特殊性(C=1)。
/* sanitize.css */
svg:where(:not([fill])) {
fill: currentColor;
}
?
/* author stylesheet */
.share-icon {
fill: blue; /* 由于特殊性較高,適用 */
}
1、點贊+評論(勾選“同時轉發”)
2、關注哦。并私信回復關鍵字【資料】(一定要私信哦~手機APP點擊我的頭像就能看到私信按鈕了),部分資料如下
1.1頁面基礎元素:<html>
<html>是頁面的基礎元素,主要用來定義頁面的開始和結束部分。元素語法結構如下<html>....</html>(開頭標記為<>,結束標記為</html>)先介紹一下完整的HTML文件的基本結構
<html> 文件開始標記
<head> 文件頭開始標記
......... 文件頭部分的內容
</head> 文件頭結束標記
<body> 文件主體開始標記
......... 文件主題部分的內容
</head> 文件主題結束標記
</html> 文件結束標記
在<html>和</html>之間寫入想要編輯的頁面內容就構成了一個簡單的頁面
1.1.1 文本顯示方向屬性:dir
【作用與語法】dir屬性用來指定瀏覽器文本顯示的方向,同時也決定瀏覽器滾條的位置。dir屬性的語法結構如下
<html dir="瀏覽器中文本的方向">......</html>(在元素名稱和屬性之間要加入空格)
dir屬性可以取兩個值,ltr(left title right)和rtl(right title left),分別表示從左向右顯示和從右向左顯示
1.1.2 指定語言屬性:lang
【作用與語法】lang屬性用來指定文檔中所使用的語言。lang屬性的語法結構如下
<html lang="指定的語言">包含的內容部分</html>
lang屬性的取值可以使用ISO標準中的語言代碼。在<html>元素中加入lang屬性,使瀏覽器更好的顯示界面,并不會更改頁面的文字編碼
ISO標準中語言代碼的取值及含義語言名稱寫法語言名稱寫法英語en法語fr漢語zh德語de日語ja意大利語it
1.2 頁面頭部元素:<head>
【作用與語法】HTML的頭部元素是以<head>為開始標記,以</head>為結束標記。它用于包含當前文檔的相關信息,可包含<title>元素、<meta>元素等,分別用來定義頁面的標題、編碼。使用<head>元素可以將基本信息部分和頁面主體內容區分開來。<head>元素的語法結構如下
<head>......</head>
1.3 頁面標題元素:<title>
【作用與語法】HTML頁面的標題一般是用來說明頁面用途的,它顯示在瀏覽器的標題欄中。在HTML文檔中,標題信息設置在頁面的頭部,也就是<head>和</head>之間。<title>元素的語法結構如下。
<title>......</title> (說明:在標記中間的“......”就是標題的內容,它位于HTML文檔的頭部,即<head>和</head>之間)
1.4 元信息元素:<meta>
【作用與語法】元信息元素<meta>用來定義頁面的附加信息,其中包括頁面的作者、版權、關鍵字等相關信息。<meta>元素的語法結構如下。
<meta 屬性=“屬性值”/>
<meta>元素是一個自封閉的元素,通過其中的屬性來添加各種附加信息。<meta>元素在不適用任何屬性時,對頁面沒有影響。
1.4.1 元信息元素名稱屬性:name
【作用與語法】name屬性用來制定文檔中附加信息的名稱。例如,最常用的值“keywords”用來定義文檔中的關鍵字,方便搜索引擎的搜索。name屬性的語法結構如下。
<meta name="信息名稱"/>
在<meta>元素中,名稱必須對應有相關的值才能生效
1.4.2 元信息元素的值:content
【作用與語法】content屬性用來指定文檔中附加信息的值,它與name屬性成對出現。content屬性的語法結構如下
<meta name="信息名稱" conten="附加信息的值"/>
<meta>元素中所定義的“keywords”信息是用來為搜索引擎定義關鍵字的,所以對頁面顯示效果并不產生影響,故頁面顯示效果并無太大變化
1.4.3 元信息元素的附加屬性:http-equiv
【作用與語法】http-equiv屬性和name屬性類似,用來指定附加信息的名稱。在瀏覽器加載頁面之前,服務器會把http-equiv屬性定義的相關信息發送給瀏覽器,便于在瀏覽器中正確顯示頁面。http-equiv屬性的語法結構如下
【作用與語法】<meta http-equiv="信息名稱",content="附加信息的值">
說明:和name屬性相似,http-equiv屬性一般要和conten屬性成對出現
1.4.4 定義頁面的跳轉
【作用與語法】在瀏覽器網頁的時候經常會看到一些歡迎信息的頁面,并經過一段時間后,這一頁面會自動轉到其他頁面,這就是網頁的跳轉。使用HTML中的HTTP代碼就可以很輕松的實現這一功能。頁面跳轉的語法結構
<meta http-equiv="refresh" content="跳轉時間";url="鏈接地址">
說明:在該語法中,refresh表示網頁的刷新,而在content中則設定刷新的時間和刷新后的地址,時間和鏈接地址之間用分號相隔。默認情況下,跳轉時間是以秒為單位的
1.5 基本設置元素:<base>
在HTML中,基本設置元素<base>使用來定義相對路徑的根目錄。使用<base>元素,可以方便的定義頁面中的超級鏈接。語法結構如下
<base 屬性="屬性值"/>
<base>元素在不使用任何屬性時,對頁面沒有影響。<base>元素中可以使用的屬性有鏈接路徑屬性href和鏈接窗口屬性target
1.5.1 鏈接路徑屬性:href
【作用與語法】href屬性用來指定文檔中相對鏈接的根目錄。文檔中的所有鏈接(包括圖片、音頻等內容)都按照href屬性所指定的根目錄顯示。href屬性的語法結構如下
<base href="指定路徑">包含的內容部分</base>
href屬性的取值為url值。它可以使用絕對路徑,也可以指
向某個文件夾。
學習一門編程語言之前,了解它的特性,帶著對特性的好奇和疑問去學習是最快最好的學習方法。就像你知道某個地方有很多寶藏,帶著藏寶圖去尋找寶藏,你一定會大有收獲的。
編程語言就是人與計算機進行溝通的語言,在現實生活中,見什么人說什么話我們都很清楚,那在與計算機溝通的世界中,做什么事用什么編程語言溝通也是同樣的道理,前提就是我們要了解這些編程語言,在你需要選擇的時候做出正確的判斷,這也正是我寫此篇文章的意義。
HTML的英文全稱是 Hyper Text Marked Language,中文意思為超文本標記語言。
什么是超文本標記語言?我們先對超文本標記這五個字進行一一的拆分,然后去更好的理解它的意思。在理解超文本時,我們先來理解一下文本在我們的日常生活中代指的是什么東西?
文本包含了比如說你新建的一個Word文檔,一個txt文件,甚至一個Html文件。這三個文件有相同的地方, 也有不同的地方。
相同的地方在于不論是Word文檔,還是txt文件或者是Html文件,我們都能編寫文本的內容。Word文檔的不同在于我們可以在Word文檔中設置一些超鏈接,放一些圖片等操作。
txt文件就有一定的局限性,比如你放一張圖片或者設置超鏈接等這些行為都是不行。在Html文件中,可以存放文本、圖片、音頻、視頻等,甚至在網頁中見到的一些很炫酷的小游戲,都可以在Html文件中去編寫。
那接下來解釋下超文本。我們在Html文件中編寫代碼,其實編寫的是超文本。所謂超文本,大家應該能聯想到超,即超出文本,超文本比文本更高一級,它包含了我們常見的音頻、視頻以及超鏈接等。
這些被我們稱為超文本,在Html文件里面既能存放這些內容,也能存放文本內容,甚至是文章里的一級標題、二級標題、列表、選項等,都可以通過HTML代碼去編寫,這些內容我們就稱為超文本。
那么這些內容到底用哪些來去展現或展示呢?標記。
什么是標記呢?
用百度官網來分析一下“標記”,在網頁頁面上存放很多的內容,有超鏈接、圖片、輸入框等。我們先看看右上角的新聞字樣,這是一個超鏈接,我們看下源碼,打開后的樣子是這樣的:
我們把藍色的新聞部分,也就是我用紅框標記的部分復制一下,其他代碼刪除:
“新聞”被左邊和右邊的“a”包裹起來了,這就構成了超鏈接,這就像我們常見的書名號。如果我們單是輸出紅樓夢字樣,就是一個文本,但如果用《》書名號包裹起來,《紅樓夢》,大家都能知道這是一本書。
把包裹在“新聞”兩邊的a標簽對應包裹在紅樓夢兩邊的書名號來看很類似。用書名號這個標記把紅樓夢給包裹起來,就叫做書名,同理,用帶尖括號的a這個標記把新聞這個文本內容給包裹起來,在網頁中稱為超鏈接,這對帶尖括號的a就叫做標記。
標記是用HTML自己的語法規則把文本內容給包裹起來,這就叫做標記。這種標記的書寫也非常簡單,包裹在文本左邊的叫開始標記,包裹在文本右邊的叫結束標記。我們看到的網頁中顯示的一級標題、二級標題、超鏈接、圖片、音頻等內容其實學習它們所對應的標記就可以了。
接著我們來看下HTML從最原始到現在至今整個HTML語言的歷史發展過程。
HTML5的誕生,標記著互聯網時代的發展。比如在HTML5里面誕生的音頻、視頻、圖像、動畫等都做了新的標準,它對于瀏覽器的兼容也是得到了一定的處理,由此可見,HTML的整個歷史發展目前為止我們所使用的版本主要是99年誕生的HTML 4.01以及2014年誕生的HTML5。
時代在進步,科技在發展,這個超文本標記語言從HTML1.0版本發展到如今的HTML5版本,已經有了極大的改善。
在以前的HTML版本中,常用的是對文本的編輯、超鏈接、圖片等,其用途很廣泛,許多公司用來創建和發布消息,比如布告、技術手冊、各種信函等,都能用它來描述。
HTML是一門嚴謹的編程語言,有組織性、模塊化、規范化的。不過對于開發者而言,不同瀏覽器HTML的兼容性是考慮的問題。隨著HTML5的誕生,我們迎來了一個新的網絡世紀,各種動畫、音頻、視頻、圖像等炫酷的東西都可以做。還有各種小程序、小游戲以及App的開發應用數不勝數,其兼容性也得到了很大的改善,這意味著對前端的需求以及重視程度都有了極大的改變。
HTML是前端很重要的一環,我們學好它才能在前端大軍中齊頭并進,在各種應用小程序的使用中游刃有余,未來的美好生活就掌握在你的手中。
【END】
*請認真填寫需求信息,我們會在24小時內與您取得聯系。