溫故知新 CSS學習筆記(並集和交集選擇器)

2021-10-05 00:27:30 字數 947 閱讀 7162

這一節我們介紹另外兩個「復合選擇器」,並集選擇器和交集選擇器。

複習一下上一講的「子代選擇器」,看下面的例子,要求將「上級選單」置為紅色。

要是簡單的將style中的選擇器寫成「ul > li > a」則會將「一級選單」和「二級選單」都置為紅色,正確的解法如下:

並集選擇器

並集選擇器(集體宣告)是各個選擇器通過逗號連線而成的,任何形式的選擇器(包括標籤選擇器、類選擇器、id選擇器等等)都可以作為並集選擇器的一部分,如果某些選擇器定義的樣式完成相同,或者部分相同,就可以利用並集選擇器為他們定義相同的css樣式。

比如下面的例子:

並集選擇器

並集選擇器

並集選擇器並集選擇器

簡單理解,並集選擇器就是「和」的意思,只需要用逗號隔開即可。相對而言,並集選擇器比較常用。

2、交集選擇器

交集選擇器由兩個選擇器組成,其中第乙個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,比如下面例子裡面的 「div.current」。

交集選擇器

交集選擇器

交集選擇器是並且的意思,簡單理解成既…又…的意思。相對而言,交集選擇器的使用情境較少。

溫故知新 css基礎

css練習 專案參考至mdn 點此檢視效果哦 任務介紹 為整體卡片的容器提供乙個固定的寬 高,背景顏色,邊框,以及邊框圓角等等。為header提供乙個漸變的背景顏色,從更暗到更亮,加上圓角,配合在卡片容器上設定的圓角。為footer提供乙個漸變的背景顏色,從更亮到更暗,加上圓角,配合在卡片容器上設定...

溫故知新 css布局

本文針對多種css布局進行解析 github 浮動 float left 將元素浮動到左側。right 將元素浮動到右側 none 預設 不浮動 inherit 繼承父元素的浮動屬性 定位 position static 預設 靜態定位 將元素放在文件布局流的預設位置 relative 相對定位 允...

css溫故知新 彈性盒子

css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。通過display flex 來指定盒子型別 彈性父元素屬性 flex direction 指定了彈性子元素在父容器中的位置。flex direction...