H5新特性 CSS選擇器

2021-10-04 22:49:24 字數 2568 閱讀 5213

是在原先的css基礎上延伸出來的,為了更方便、快捷的選中元素,有利於開發人員的開發

div[class~

=box]

"box" style=

"display: inline-block;"

>

<

/div>

"box a" style=

"display: inline-block;"

>

<

/div>

"box po" style=

"display: inline-block;"

>

<

/div>

[name|

=en]

"en-lish" style=

"display: inline-block;"

>

<

/div>

"english" style=

"display: inline-block;"

>

<

/div>

div[class^

=u]"use" style=

"display: inline-block;"

>

<

/div>

"user" style=

"display: inline-block;"

>

<

/div>

"use-name" style=

"display: inline-block;"

>

<

/div>

"use-name" style=

"width: 100px;height: 100px;border: 1px solid;"

>

<

/p>

div[

class$=r]

="user"

>後悔<

/div>

="marker"

>絕望<

/div>

="user"

>

123<

/p>

div[class*

=o]"cook"

>皓月<

/div>

"col"

>美人<

/div>

a:link

a:visited

a:active

>

234<

/a>

"css選擇器.html"

>cs<

/a>

#me:before

#me:after

"me"

>我的<

/span>

/* :first-letter 選擇每個元素的首字母*/

p:first-letter

/* :first-line 選擇每個元素的首行*/

div:first-line

/* :first-child 選擇屬於其父元素的首個子元素*/

.one:first-child

/* p:first-of-type	選擇屬於其父元素的首個 元素的每個 元素*/			

body div:first-of-type

/* p:last-of-type 指定父元素的最後乙個 p 元素*/

/* p:only-of-type 選擇屬於其父元素唯一的 元素的每個 元素 */

/* p:nth-of-type(2) 選擇屬於其父元素第二個 元素的每個 元素 */

/* p:nth-last-of-type(2) 同上,但是從最後乙個子元素開始計數 */

/* p:only-child	選擇屬於其父元素的唯一子元素的每個 元素*/

/* p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 元素 */

/* p:nth-last-child(2) 同上,從最後乙個子元素開始計數 */

/* first-child 匹配父元素下第乙個子元素*/

/* p:last-child 選擇屬於其父元素最後乙個子元素每個 元素 */

/* :root 選擇文件的根元素 */

/* p:empty 選擇沒有子元素的每個 元素(包括文字節點 */

/* #news:target 選擇當前活動的 #news 元素 */

:target

/* input:enabled 選擇每個啟用的 元素 */

/* input:disabled 選擇每個禁用的 元素 */

/* input:checked 選擇每個被選中的 元素 */

/* ::selection 選擇被使用者選取的元素部分 */

::selection

/*:not(p)

*/

H5常用新特性

注意 這些新特性都有相容性的問題,基本是ie9 以上版本的瀏覽器才支援,如果不考相容性問題,可以大量使用這些新特性 html5新增的語義話標籤 html新增的多 標籤 屬性值描述 autoplay autoplay controls controls width pixels height pxlo...

H5教程(二),CSS入門(一)選擇器

這是我的第二篇部落格,h5教程css入門,適合剛開始學習h5的新手,讓我們共同進步。css稱為樣式層疊表,是用於增強或控制網頁樣式,並允許將樣式資訊與網頁內容分離的一種標記性語言。1.為了方便樣式的復用,方便 後期維護。2.為了達到頁面的精準控制,實現精美複雜的頁面。簡單點說,css就是為了讓你的網...

css 特性 選擇器

標籤選擇器級別最低 類別選擇器比標籤選擇器高 id選擇器比類別選擇器高 行內樣式比id選擇器級別高 類別預設第乙個 交集選擇器 類別 棕色 交集選擇器 id 棕色 並集選擇器 並集選擇器 並集選擇器 後代選擇器 標籤選擇器級別最低 類別選擇器比標籤選擇器高 id選擇器比類別選擇器高 行內樣式比id選...