CSS3的一些新選擇器簡介

2021-08-19 18:14:56 字數 801 閱讀 6827

屬性選擇器

一、 5個input標籤type: text 文字框 password密碼框 radio 單選按鈕 cheakbox核取方塊 submit 提交

二、 選擇器的使用:

1.attr=val 相等就選擇到了

2.attr~=val 表示的是乙個單獨的屬性值,這個屬性值是以空格分割的

3.attr|=val 表示的是乙個單獨的屬性值,這個屬性值是以-分割的

4.attr*=val 表示的是乙個單獨的屬性值,這個屬性值只要包含某個字元就可以

5.attr^=val 表示的是乙個單獨的屬性值,這個屬性值要在起始位置

6.attr$=val 表示的是乙個單獨的屬性值,這個屬性值要在末尾位置

三、偽類選擇器

only-child 只選擇唯一的元素

***:nth-of-type(n) 選擇第幾個***元素,從1開始

nth-child(n) 選擇第幾個子元素

nth-last-of-type(n)倒數第n個

empty 表示元素沒有內容才被顯示

target 錨點

四、顏色

opacity 的子元素會繼承父元素的透明度

transparent 就是完全透明,類似玻璃一樣

rgba()就是rgb後面加上了乙個透明度的引數

五 、文字換行

滿足省略號要三個條件

1.文字強行不換行: white-space:nowrap

2.超出部分隱藏:overflow:hidden

3.後面加上省略號:text-overflow:ellipsis

常用的一些 CSS3 選擇器

list item list item list item 選擇器 container ul只會匹配到第乙個ul,也就是 container的子元素ul,而不是li裡面的ul,但是div ul則可以匹配到所有div裡面的ul。檢視演示 相容性ie7 但是如果我們給a標籤新增乙個data filety...

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

css3 選擇器 CSS3選擇器詳解

css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的 在高版本的瀏覽器中,頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾...