首頁 web前端 css教學 屬性選擇器和偽類選擇器的使用方法

屬性選擇器和偽類選擇器的使用方法

Nov 24, 2017 am 10:00 AM
使用方法 屬性 選擇器

今天我們來跟大家說一下屬性選擇器和偽類別選擇器的使用方法和相關的聯繫以及區別,下面給大家舉一個小列子。

屬性選擇器:

 [attr~="value"]   單字               空格單字-單字

注意:

屬性選擇都是用則很難規則

表達式

來判別選擇元素,效率要高一些偽類選擇器:

:before

:after

:lang(val)   val/val-單字

:nth-​​child(n) n從1開始算起  odd基數 even偶數

:nth-of-type(n) 選擇器符合屬於父元素的特定類型的第 N 個子元素的每個元素.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
--->
<div>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
</div>
</body>
</html>
Css部分:
@charset "utf-8";
/* CSS Document */
/*
p:before{
       content:"ccc"; 
}
 
p:lang(en){
       border:1px solid #ff0000;  
}
p:nth-child(even){
       background:#F00; 
}
*/
p:nth-of-type(3){  /* p标记的父元素 下的 第3个p元素*/
       background:#F00; 
}
登入後複製

相關閱讀:

怎麼隱藏溢出DIV的內容

CSS佈局有哪些技巧

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

DirectX修復工具怎麼用? DirectX修復工具詳細使用方法 DirectX修復工具怎麼用? DirectX修復工具詳細使用方法 Mar 15, 2024 am 08:31 AM

  DirectX修復工具是專業的系統工具,主要功能是偵測目前系統的DirectX狀態,如果發現異常就可以直接修復。可能還有很多用戶不清楚DirectX修復工具怎麼用吧,以下就來看看詳細教學。  1、使用修復工具軟體進行修復檢測。  2、如果修復完成後提示C++元件有異常的問題,請點選取消按鈕,然後點選工具選單列。  3、點選選項按鈕,選擇擴展,點選開始擴展按鈕。  4、擴展完成後再重新進行檢測修復即可。  5、如果修復工具操作完成後仍未解決問題,可以嘗試卸載重新安裝報錯的程序。

百度網盤怎麼用-百度網盤的使用方法 百度網盤怎麼用-百度網盤的使用方法 Mar 04, 2024 pm 09:28 PM

有很多朋友還不知道百度網盤怎麼用,所以下面小編就講解了百度網盤的使用方法,有需要的小伙伴趕緊來看一下吧,相信對大家一定會有所幫助哦。第一步:安裝好百度網盤後直接登入(如圖);第二步:接著可依頁面提示選擇「我的分享」與「傳輸清單」(如圖);第三步:在「好友分享」裡可以把圖片和檔案直接分享給好友(如圖所示);第四步:接著選擇「分享」後可勾選電腦檔案或是網盤檔案(如圖所示);第五步:然後就可以尋找好友(如圖所示);第六步:還可以在「功能寶箱」中尋找自己需要的功能(如圖所示)。上面就是小編為大

KMS啟動工具是什麼? KMS啟動工具怎麼用? KMS啟動工具使用方法? KMS啟動工具是什麼? KMS啟動工具怎麼用? KMS啟動工具使用方法? Mar 18, 2024 am 11:07 AM

KMS啟動工具是一種用來啟動微軟Windows和Office產品的軟體工具。 KMS是KeyManagementService的縮寫,即金鑰管理服務。 KMS啟動工具透過模擬KMS伺服器的功能,使得電腦可以連接到這個虛擬的KMS伺服器,從而實現對Windows和Office產品的啟動。 KMS激活工具體積小巧,功能強大,可以一鍵永久激活,無需聯網狀態就可以激活任何版本的window系統和任何版本的Office軟體,是目前最成功的且經常更新的Windows激活工具,今天小編就跟大家介紹一下kms激活工

如何使用快捷鍵合併儲存格 如何使用快捷鍵合併儲存格 Feb 26, 2024 am 10:27 AM

合併儲存格的快速鍵怎麼用在日常工作中,我們常常需要對表格進行編輯和排版。而合併單元格是一種常見的操作,可以將相鄰的多個單元格合併為一個單元格,以提高表格的美觀程度和資訊展示效果。在MicrosoftExcel和GoogleSheets等主流的電子表格軟體中,合併儲存格的操作非常簡便,可以透過快速鍵來實現。以下將介紹在這兩個軟體中合併儲存格的快速鍵用法。在

potplayer怎麼用-potplayer的使用方法 potplayer怎麼用-potplayer的使用方法 Mar 04, 2024 pm 06:10 PM

potplayer是一款非常強大的媒體播放器,但不少夥伴還不知道potplayer怎麼用,今天小編就來詳細介紹一下potplayer的使用方法,希望能幫助大家。 1.PotPlayer快捷鍵PotPlayer播放器預設常用快捷鍵如下:(1)播放/暫停:空格(2)音量:滑鼠滾輪,上下方向鍵(3)前進/後退:左右方向鍵(4)書籤:P-加入書籤,H-查看書籤(5)全螢幕/還原:Enter(6)倍速:C-加速,X-減速,Z-復位(按一次調整0.1倍速度,可以在0.2到12倍速之間調節)( 7)上/下一幀:D/

PyCharm是什麼?功能介紹與使用方法詳解 PyCharm是什麼?功能介紹與使用方法詳解 Feb 20, 2024 am 09:21 AM

PyCharm是一款由JetBrains公司開發的專業的Python整合開發環境(IDE),它為Python開發者提供了強大的功能和工具,使得編寫Python程式碼更有效率、更方便。 PyCharm支援多種作業系統,包括Windows、macOS和Linux,同時也支援多種Python版本,並且提供了豐富的插件和擴充功能,方便開發者根據自己的需求客製化IDE環境。 P

小馬win7啟動工具如何使用-小馬win7啟動工具使用的方法 小馬win7啟動工具如何使用-小馬win7啟動工具使用的方法 Mar 04, 2024 pm 06:16 PM

相信很多用戶都在使用小馬win7激活工具,但是你們知道小馬win7激活工具如何使用嗎?接著,小編就帶來了小馬win7激活工具使用的方法,對此感興趣的用戶快來下文看看吧。第一步,在重裝系統後,進入“”我的電腦,點擊上方選單中的“系統屬性”,查看Windows啟動狀態。第二步,點選上網下載win7啟動工具,點選打開,(資源很多哪裡都有)。第三步,開啟小馬啟動工具後,點選「一件永久啟動Windows」。第四步,等待啟動程序完成啟動。第五步,再次查看Windows啟動狀態,發現系統已啟動。

磁力連結怎麼用-磁力連結使用方法 磁力連結怎麼用-磁力連結使用方法 Mar 04, 2024 pm 04:37 PM

你們是不是也在使用磁力連結軟體呢?不過你們曉得磁力連結怎麼用嗎?下文就是小編為各位帶來的磁力連結使用方法,有興趣的用戶快來下文看看吧。第一個方法比較簡單,【電腦】使用磁力連結下載的話,首先是打開迅雷。接著,將磁力鏈接直接複製,在迅雷中會自動檢測到鏈接,然後彈出下載窗口,只需點擊確認下載即可開始下載過程。注意:個別舊版的迅雷是沒用辦法自動檢測出你複製的磁力鏈接,使用需要更新成最新版的迅雷版本。

See all articles