響應式基礎教學 | 響應式網頁設計教學

相关文章推荐

追风的作业本 · 使用層疊樣式表（CSS）設計應用程式的樣式 ...· 1 月前 ·

气宇轩昂的春卷 · WPF ListView关闭选择开发者社区· 2 周前 ·

活泼的硬盘 · jQuery UI 使用 | 菜鸟教程· 1 年前 ·

英勇无比的双杠 · Android || ...· 2 年前 ·

聪明的海龟 · 有哪些应用于移动机器人路径规划的算法？ - 知乎· 2 年前 ·

爱吹牛的包子 · SQL Server：函数中的基本if条件· 2 年前 ·

安静的手套 · idea 不识别 ftl 文件_idea ...· 2 年前 ·

<style>

a[src*="abc"]:hover > SPAN

{

background-color:red;

}

</style>

答案在滑鼠移至第二個 A 元素上時，A 下面的 SPAN 的背景就會變紅色。

需注意的是，滑鼠不需要移至 SPAN 元素上，就可以讓 SPAN 變色 !

一般來說這樣寫就好

<style>

BODY /* 預設背景是白色 */

{

background-color: WHITE ;

}

@media screen and ( max-width :440px) /* 440px 以下背景是紅色 */

{

BODY

{

background-color: RED ;

}

@media screen and ( max-width :860px) /* 860px 以下背景是藍色 */

{

BODY

{

background-color: BLUE ;

}

</style>

但是有點不正確 ! 哪裡呢 ?

瀏覽器寬度為 360px 時

BODY /* 預設背景是白色 */

background-color:WHITE;

@media screen and (max-width: 440px ) /* 440px 以下背景是紅色 */

background-color: RED ;

@media screen and (max-width:860px) /* 860px 以下背景是藍色 */

background-color:BLUE;

條件符合，但排在比較後面，故優先採用

上述設定不符合我們的期待 ! 所以必須修改順序

BODY /* 預設背景是白色 */

{

background-color:WHITE;

}

@media screen and (max-width:860px) /* 860px 以下背景是藍色 */

{

BODY

{

background-color:BLUE;

}

@media screen and (max-width: 440px ) /* 440px 以下背景是紅色 */

{

BODY

{

background-color: RED ;

}

移到最下面才對

推荐文章

追风的作业本 · 使用層疊樣式表（CSS）設計應用程式的樣式 - .NET MAUI | Microsoft Learn

1 月前

气宇轩昂的春卷 · WPF ListView关闭选择开发者社区

2 周前

活泼的硬盘 · jQuery UI 使用 | 菜鸟教程

1 年前

英勇无比的双杠 · Android || 运行时权限介绍_magic_ll的博客-CSDN博客

2 年前

聪明的海龟 · 有哪些应用于移动机器人路径规划的算法？ - 知乎

2 年前

爱吹牛的包子 · SQL Server：函数中的基本if条件

2 年前

安静的手套 · idea 不识别 ftl 文件_idea ftl_二一同学的博客-CSDN博客

2 年前