這篇文章主要介紹“HTML選擇器的概念是什么”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“HTML選擇器的概念是什么”文章能幫助大家解決問題。
1.通配選擇器—*:匹配頁面中所有的標簽元素
語法規定是:*{屬性:值};常用于定義全局樣式,如字體大小顏色等
2.元素/標簽選擇器—p、div、span等:就是匹配某一類標簽
語法規范:p{屬性:值}
3.類選擇器—“.className”:就是匹配某一個或一組class名的標簽“
語法規范:.className{屬性:值}
4.分類選擇器—“p.name”:就是匹配某一標簽中,指定類名的目標標簽
語法規范:p.name{屬性:值} 就是匹配p標簽中類名為name的p標簽;
5.id選擇器—“#idName”:就是匹配某一個id值的標簽
語法規范:#idName{屬性:值},注意這個匹配絕對是只有一個目標,因為id是不允許重復的,唯一的,因為id對應的目標元素也是唯一的,這個方式定位到目標元素是最準確的。
6.群組選擇器:這個選擇器,不是特別的選擇器,是指多個元素在有相同樣式的情況下,可以通過在選擇器之間加","隔開,這樣能使多個元素運用{}后的樣式
語法規范:p,div{屬性:值},意思即p div有相同的樣式,這個方式使得CSS代碼能加簡潔,方便
7.后代選擇器:這個方式就通過元素的位置來匹配,后代選擇器是指某一個元素即<標簽></標簽>內所有的元素,通過選擇器1 選擇器2的方式定位到某一元素的后代元素;如<div> <p>我的div的后代1</p><p>我的div的后代2</p></div>
語法規范:div p{屬性:值} 這樣就能選擇匹配到div后代所有的p了,不管是第一層還是第n層的p;
8.子代選擇器:這個方式也是通過元素的位置來匹配,和后代選擇器不同的時,子代選擇器匹配到的是某一個標簽的第一層后代,僅僅是父子關系,方式也和后代選擇器不同,方式是通過“>”;
語法規范:div>p{屬性:值}
9.偽類選擇器:這個選擇器通過匹配識別元素的某一個狀態;偽類選擇器分類:
a)鏈接偽類:適用于未訪問的鏈接a即a:link,適用于訪問過后的鏈接a即a:visited。
b)動態偽類:適用于鼠標懸停時即:hover,適用于元素被激活時即:active,適用于元素獲取焦點時(一般是指表單)即:focus.
c)目標偽類。
d)元素狀態偽類。
e)結構偽類。
f)否定偽類。
關于“HTML選擇器的概念是什么”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注億速云行業資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。