作用:選擇頁面上的某乙個或者某一類元素整個html屬於乙個dom樹
標籤選擇器
標籤選擇器會選中頁面中所有該標籤的元素
弊端:所有該標籤會被同時修改樣式
類選擇器 class
給標籤加上class屬性,然後選擇器用.class
的格式
好處:可以多個標籤歸類,是同乙個class
示例:
id選擇器
給標籤寫上id,然後選擇器使用#id
id必須保證全域性唯一,適用於精準定位網頁上的某些元素
示例:
補充思考:如果多個選擇器選中同樣的標籤,哪個生效?
id選擇器 > 類選擇器 > 標籤選擇器
注:想要修改css可以在瀏覽器的除錯狀態下測試,完成之後再把**複製到css檔案中小結:
對html檔案的結構,當成一顆樹來看後代選擇器 : 在某個元素的後面,所有的後代
/*後代選擇器*/
body p
子選擇器 :元素後面的直接孩子
/*子選擇器*/
body>p
/*某個元素下方的乙個*/
.active + p
通用兄弟選擇器 :同輩的下面所有
/**/
.active~p
偽類:加了一些條件,起過濾的作用比如滑鼠移動到位置上就會變色的鏈結
例子:
ul li:first-child
ul li:last-child
/*選擇父級元素的第乙個元素,並且使當前元素才生效*/
p:nth-child(1)
p:nth-of-type(1)
相當於將標籤、id、類別選擇器結合,功能比較強大
/*
屬性名 = 屬性值(正規表示式)
= 表示絕對等於
*= 包含
^= 以xx開頭
$= 以xx結尾
*/a[class="class1"]
/*a[id] 存在id屬性的
a[class] 存在class屬性的
*/
css,js,jquery,vue都會用到,甚至寫爬蟲的時候也會用到,是整個技術棧的核心 css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
CSS3學習筆記 2 CSS中的選擇器 上
css選擇器即是定位到想要選擇的元素,然後對其配置樣式。目前已經有css3選擇器了,不過使用較多的還是css1和css2,而css3用於擴充套件。選擇器分類 基本選擇器 復合選擇器 偽選擇器 還分為偽元素和偽類 基本選擇器 即使用簡單且頻率高的一些選擇器。1.通用選擇器 匹配所有html元素,包括和...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的 在高版本的瀏覽器中,頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾...