html+css中偽類偽元素之分及標籤書寫
css選擇器有偽類和偽元素之分,以下是兩者區別:
偽類:書寫時元素加一個冒號然後寫屬性值;
偽元素:書寫時元素加兩個冒號然後寫屬性值;
一般偽元素同樣只寫一個冒號,瀏覽器照常識別,所以兩者寫法區分目前並不嚴格;
實際運用時根據作用物件,兩者運用範圍有差異:偽類運用於樣式,偽元素運用於結構。
偽類:
a:link; a:visited; a:hover; a:active; element:first-child;等
偽元素:
element::first-line; element::fitst-letter; element::before; element::after;等
怎麼區分:簡單來說,如果不用這個選擇器,要實現同樣的效果,是通過給具體元素取類名實現,還是通過在結構裡新增元素標籤來實現,一目瞭然。
兩者寫法差異會逐漸區分,就像<br />與<br>,
隨著程式語言規範統一,程式碼寫法也將趨於規範化,這是一種好的發展方向。
這是菜鳥HTML程式碼書寫規範
相關推薦
html+css中偽類偽元素之分及標籤書寫
css選擇器有偽類和偽元素之分,以下是兩者區別: 偽類:書寫時元素加一個冒號然後寫屬性值; 偽元素:書寫時元素加兩個冒號然後寫屬性值; 一般偽元素同樣只寫一個冒號,瀏覽器照常識別,所以兩者寫法區分目前並不嚴格; 實際運用時根據作用物件,兩者運用範圍有差異:偽類運用於樣式,偽元素運用於結構
css中偽類/偽元素詳解
input 其他 中文 tro 網頁 單元 web link 語言 一、偽類和偽元素 偽類和偽元素都是用來修飾不在文檔樹中的部分,區別在於, 偽類用於當已有元素處於的某個狀態時,為其添加對應的樣式,這個狀態是根據用戶行為而動態變化的(如:hover/:active)。
css中的連結偽類選擇器、結構偽類選擇器、目標偽類選擇器
連結偽類選擇器 :link /*未訪問的連結 */ :visited /*已訪問的連結 */ :hover /*滑鼠移動到連結上 */ :active /*選定的連結 當我們點選別鬆開滑鼠 顯示的狀態 */ 注意寫的時候,他們的順序儘量不要顛倒 按照lvha的順序 結構偽類選擇器
CSS偽類偽元素詳解
CSS選擇器大致可以分成5類:基本選擇器,層次選擇器,屬性選擇器,偽類,偽元素。基本,層次,屬性選擇器比較容易理解,畢竟它們選擇的物件都屬於DOM中看得見摸得著的元素。但偽類和偽元素相對比較抽象,稍微有一點點理解上的難度。本篇就是我對偽類和偽元素的理解。 先介紹一下偽類和偽元素有什麼區別?其
css總結17:HTML塊級元素&行內元素之分: <div> 和<span>
1.2 文檔 block 介紹 沒有 多個 實例 區塊 不可 1 HTML 區塊元素: 大多數 HTML 元素被定義為塊級元素或內聯元素。 1.1 塊級元素實例: <div> <h1>, <p>, <ul>, <tabl
三、偽類偽元素
一、用偽元素做平行四邊形 .button { position: relative; width: 100px; height: 100px; background-color: rgba(0,0,0,.0); margin: 100px;&n
CSS 中的內聯元素、塊級元素、display的各個屬性的特點
ron 但是 splay 之間 height 多個 ext 情況 div CSS的內聯元素和塊級元素 塊級元素<h1>-<h6>、p、dt是不可以內聯塊級元素的 1、block和inline這兩個概念是簡略的說法,完整確切的說應該是 block-le
css中常見margin塌陷問題之解決辦法
com str 出現 bottom 分享 border text ren 間隙 塌陷問題 當兩個盒子在垂直方向上設置margin值時,會出現一個有趣的塌陷現象。 ①垂直並列 首先設置兩個DIV,並為其制定寬高 1 /*HTML部分*/ 2 <
HTML5--(2)屬性選擇器+結構性偽類+偽類
htm 跳轉 鏈接 ref checkbox 控件 radi 禁止 獲取 一.屬性選擇器 [att] 匹配所有具有att屬性的 [att=val] 匹配所有att屬性等於“val”的 [att~=val] 匹配所有att屬性包含“val”或者等於“val”的(val必須是
第一章入門篇偽類偽物件
1.偽類 偽類用來指定HTML元素某個狀態下的樣式,格式 選擇符:偽類{屬性:屬性值} <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <titl
在HTML+CSS中 使用opacity後float無效的問題
<!DOCTYPE html> <html> <head> <title>Document</title> <style type="text/css"> #a1 { widt
QT中圖表類QChart系列之(1)-基本用法,畫折線圖、各個類之間的關係
首先要注意3點: (1)在.pro檔案中新增:QT += charts。 (2)用到QChart的檔案中新增:QT_CHARTS_USE_NAMESPACE,或者:using namespace QtCharts; 在ui介面中拖入一個graphicsVi
css中的流,元素,基本尺寸
流 元素 基本尺寸 流之所以影響整個css世界,是因為它影響了css世界的基石 --HTML HTML 常見的標籤有雖然標籤種類繁多,但通常我們就把它們分為兩類: 塊級元素(block-level element)和內聯元素(inline element)。 1.塊級元素 1.1 概念相關 “塊級元素”對
QT中圖表類QChart系列之(7)-小結,chart中顯示曲線的標準步驟
在chart中建立曲線的標準步驟: 必須嚴格按以下步驟操作,否則會出現這樣那樣的顯示問題。寫法1: (1)建立chartView、chart、N個series、2個axis物件 (2)chart->setAxisX/Y() (3)chart->addSeries
html+css中title與alt用法
針對alt與title常同時出現,做出以下記錄: alt和title的區別:alt存在的圖片載入失敗的時候,顯示圖片位置的替換文字,用於img、area和input元素中(包括applet元素) alt屬性的功能是不能顯示影象資訊時候的替換文字(即在圖片顯示的位置上顯示文字,說明
html+css中margin-top高度坍塌成因及解決方法
margin垂直高度坍塌成因 初學html+css時margin-top造成的高度坍塌(這裡暫時稱為坍塌)屬於首類要自己思考查詢資料才能理解的問題,這裡做個記錄。 margin-top坍塌表現為子元素的margin-top數值作用於父元素上,對於佈局產生影響。 來理解一些名詞定義:段
css中的類選擇器多關鍵字的相容問題
當我們在使用類選擇器的時候,經常會使用多個關鍵字來給一個元素新增樣式。如下所示: CSS程式碼: <span style="font-size:18px;">p.warning.help {background: red;}</span> HTML
css中絕對定位的元素如何讓其居中顯示
對於前端工程師來說,頁面佈局是必備技能之一,我們經常有過這樣的需求,就是讓某個元素上下左右居中顯示的業務。常規來說一般水平居中使用margin:0 auto就能夠解決居中問題,但是當我們的元素居於父類是相對定位,自己是絕對定位的如何讓其相對於父類垂直居中對齊呢?
html+css中定位物件
定位有四種:預設位置(static),相對定位(position:relative;),絕對定位(position:absolute;),固定定位(position:fixed;)。 定位用法簡單明瞭,不過定位物件可能存在混淆的情況,以下總結: 相對定位相對於文字流中元素定位前所在的位置
HTML/CSS中a標籤用法詳解
Html中<a> 標籤定義一個超連結,用於從一張頁面連結到另一張頁面,主要包括的屬性有: href:指定<a>標籤的連結路勁,包括已經寫好的連結文字路勁和連結到頁面中的一個錨點(id或name來定義的,這時瀏覽器地址後面會加上其id或name的值);