hover前面有空格和沒有空格有不一樣的效果

2022-02-04 04:50:07 字數 2812 閱讀 1268

最近在寫一些html樣式發現:hover前面有空格和沒有空格有不一樣的效果,:hover前面沒有空格,影響的只是該元素的兄弟節點;但是,如果前面有了乙個空格,那效果就大大不一樣了,有個空格影響的就是 該元素下面的  子節點了。

例項:

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>document

title

>

6<

style

type

="text/css"

>

7ul:hover

1011

style

>

12head

>

13<

body

>

14<

ul>

15<

li>1

li>

16<

li>2

li>

17<

li>3

li>

18<

li>4

li>

19<

li>5

li>

20ul

>

21<

ul>

22<

li>/

li>

23<

li>*

li>

24<

li>-

li>

25<

li>+

li>

26<

li>.

li>

27ul

>

28<

ul>

29<

li>a

li>

30<

li>b

li>

31<

li>c

li>

32<

li>d

li>

33<

li>e

li>

34ul

>

35body

>

36html

>

效果圖:

但是如果在ul:hover中,ul與:hover中間有乙個空格 比如這樣:ul :hover   就會又不一樣的效果,

例項:

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>document

title

>

6<

style

type

="text/css"

>

7ul :hover

1011

style

>

12head

>

13<

body

>

14<

ul>

15<

li>1

li>

16<

li>2

li>

17<

li>3

li>

18<

li>4

li>

19<

li>5

li>

20ul

>

21<

ul>

22<

li>/

li>

23<

li>*

li>

24<

li>-

li>

25<

li>+

li>

26<

li>.

li>

27ul

>

28<

ul>

29<

li>a

li>

30<

li>b

li>

31<

li>c

li>

32<

li>d

li>

33<

li>e

li>

34ul

>

35body

>

36html

>

效果圖:

仔細觀察的同學,你會發現這兩張實現的效果是不一樣的

第一張上的第二個ul的字型顏色變為紅色,而第二張上只有第二個ul下的某個子節點的字型顏色變為紅色了。

總結:ul:hover與ul :hover的區別,也就是第乙個影響的是ul的兄弟節點,第二個影響的是ul的子節點。

也就是說:hover前面沒有空格影響的是元素的兄弟節點,:hover前面有空格影響的就是元素的子節點了。

Sql Server去除所有空格

前後的空格,使用ltrim和rtrim即可,例如 ltrim rtrim name 中間的空格,使用replace函式替換,例如 replace name,如果是普通的空格,很容易替換,但有時候會遇到一些特殊的空格,就比較麻煩,看起來跟普通的空格一模一樣,但就是無法替換掉。這就需要特殊的方法去找出空...

phpcms 允許英文目錄有空格

第一步 開啟下面檔案 phpcms modules admin templates category add.tpl.php phpcms modules admin templates category edit.tpl.php phpcms modules admin templates cat...

beautiful soup解析有空格的class

用python寫乙個爬蟲,用beautifulsoup解析html。其中乙個地方需要抓取下面兩類標籤 blabla1 blabla2 第一類class的值的末尾有乙個空格。第二類class的值中間有乙個空格,而且開頭部分和第一類相同。在css中,class的值不應該有空格,所以第一類會忽略空格,第二...