首頁 web前端 css教學 偽類和偽元素的使用方法介紹

偽類和偽元素的使用方法介紹

Oct 30, 2020 pm 04:54 PM
偽元素 偽類

偽類和偽元素的使用方法介紹

css偽類別和偽元素

line-height (行高官方定義:兩行文字基線對齊)

(影片教學建議: css視訊教學

目標偽類別

:link    (a:link 未访问的链接  浏览器有缓存!!所以刷新没用)
	a:active{color:   ;}
:active (长按住)
:visited (已经访问的链接)
:hover (鼠标放上去)
:focus (获取用户焦点)
登入後複製

偽元素(是行內元素不能設定寬度和高度)

::after  (在元素后面添加内容)
::before  (在元素前面添加内容)
display:...
	inline-block(能够设置高度,和行内元素并排显示)
	inline
	block(独占一行)
	none(隐藏
登入後複製

css特性

##

	继承(一个元素如果没有设置某个属性的值,那么就会跟随父属性的值。如果设置了,就用自己的值)
		color ,font-size  line-height text-align
	层叠(后面的样式会覆盖前面的样式)
		当选择器相同时 后面的选择器会覆盖前面的
		当选择器不同时,根据选择器的权重设置
登入後複製

列表

	ul(无序列表)
	ol   (有序列表)
登入後複製

表格

table
		tr单元行
		td单元格
		boder 边框
		cellpadding   单元格内部的间距
		cellspacing 单元格之间的距离
		width 表格的宽度
		align 表格的水平对齐方式
登入後複製

css元素類型的分割(根據元素能不能在一行中顯示)

	块级元素 (独占父元素的一行) 常用的块级元素 
		●	div
		●	p
		●	h1-h6
		●	ul--li
		●	table
		●	from
登入後複製
行內級元素(可以和其他行內元素同一行顯示)
		●	img
		●	span
		●	a
	●	inupt
登入後複製

相關推薦:CSS教學#########

以上是偽類和偽元素的使用方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

為什麼偽元素失效了 為什麼偽元素失效了 Nov 21, 2023 pm 05:13 PM

偽元素失效了的原因:1、選擇器問題;2、樣式衝突;3、繼承問題;4、語法錯誤;5、瀏覽器相容性問題等。詳細介紹:1、選擇器問題,偽元素的選擇器可能不正確,導致無法選擇到目標元素;2、樣式衝突,如果在CSS中存在樣式衝突,可能會導致偽元素失效;3、繼承問題,偽元素可能無法繼承某些樣式屬性;4、語法錯誤,如果在CSS中存在語法錯誤,可能會導致偽元素失效;5、瀏覽器相容性問題等等。

使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式 使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式 Nov 20, 2023 am 11:20 AM

使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式,具體程式碼範例如下:HTML程式碼:<divid="container"><divclass="item"&gt ;第一個子元素</div><divclass="item"&

實作CSS ::placeholder偽元素選擇器的多種應用場景 實作CSS ::placeholder偽元素選擇器的多種應用場景 Nov 20, 2023 pm 03:17 PM

實作CSS::placeholder偽元素選擇器的多種應用場景,需要具體程式碼範例在Web開發中,CSS是一種常用的樣式表語言,用於控制網頁的佈局和樣式。而::placeholder偽元素選擇器則是CSS3新增的一種選擇器,用來修改輸入框(包含文字輸入框、密碼輸入框等)的佔位符樣式。以下將為大家介紹多種應用場景,並提供對應的程式碼範例。修改輸入框佔位符的顏色:

css偽選擇器學習之偽類選擇器解析 css偽選擇器學習之偽類選擇器解析 Aug 03, 2022 am 11:26 AM

在之前的文章《css偽選擇器學習之偽元素選擇器解析》中,我們學習了偽元素選擇器,而今天我們詳細了解一下偽類選擇器,希望對大家有所幫助!

hover為什麼是偽元素 hover為什麼是偽元素 Oct 09, 2023 pm 05:45 PM

hover不是偽元素,是偽類。偽類用於選擇元素的特定狀態或行為,而偽元素則用於在元素的特定部分中添加樣式。因為:hover用於選擇元素的特定狀態,而不是在元素的特定部分添加樣式,使用:hover偽類可以為元素的滑鼠懸停狀態添加樣式,可以透過:hover偽類為連結添加懸停效果,當滑鼠懸停在連結上時,連結的顏色、背景色等可以改變。

使用:active偽類選擇器實現滑鼠點擊效果的CSS樣式 使用:active偽類選擇器實現滑鼠點擊效果的CSS樣式 Nov 20, 2023 am 09:26 AM

使用:active偽類選擇器實現滑鼠點擊效果的CSS樣式CSS是一種層疊樣式表語言,用來描述網頁的表現和樣式。 :active是CSS中的一個偽類別選擇器,用於選擇元素在滑鼠點擊時的狀態。透過使用:active偽類選擇器,我們可以為被點擊的元素添加特定的樣式,以達到滑鼠點擊效果的目的。以下是一個簡單的範例程式碼,示範如何使用:active偽類選擇器實現滑鼠點擊效果

加上偽元素有什麼用 加上偽元素有什麼用 Oct 09, 2023 pm 05:45 PM

加上偽元素可以用來創造裝飾性的效果、實現特定的佈局效果、創造互動效果、修飾特定的元素狀態和創造一些特殊效果等。詳細介紹:1、創造裝飾性的效果,透過設定:before或:after偽元素的內容屬性和樣式,可以在元素之前或之後插入圖示、形狀或其他裝飾性元素,這樣可以為網頁添加更多的視覺吸引力和個人化;2、實現特定的佈局效果,透過:before和:after偽元素可以創造等等。

探索CSS偽類與偽元素的基礎概念與使用場景 探索CSS偽類與偽元素的基礎概念與使用場景 Dec 23, 2023 pm 01:21 PM

了解CSS偽類和偽元素的基本概念及應用程式場景CSS(CascadingStyleSheets)是一種用於描述網頁樣式的標記語言,它可以控制網頁中的元素的外觀和佈局。在CSS中,偽類和偽元素是非常有用的功能,可以進一步擴展CSS的應用範圍和彈性。一、偽類偽類是用來選擇特定狀態元素的關鍵字。常見的偽類有:hover、active、focus等。下面是一些常見

See all articles