教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

怎樣給:root選擇器設(shè)置樣式？設(shè)置過(guò)程演示

更新時(shí)間:2021年03月31日11時(shí)42分 來(lái)源:傳智教育 瀏覽次數(shù):

傳智教育-一樣的教育，不一樣的品質(zhì)


:root選擇器用于匹配文檔根標(biāo)簽，在HTML中，根標(biāo)簽始終是html。也就是說(shuō)使用“:root選擇器”定義的樣式，對(duì)所有頁(yè)面標(biāo)簽都生效。對(duì)于不需要該樣式的標(biāo)簽，可以單獨(dú)設(shè)置樣式進(jìn)行覆蓋。示例代碼如下：

  <title>root選擇器的使用</title>

  <style type="text/css">

  :root{color:red;}

  h2{color:blue;}

  </style>

  </head>

  <body>

  <h2>《面朝大海春暖花開(kāi)》</h2>

  <p>從明天起做個(gè)幸福的人

  喂馬劈柴周游世界 

  從明天起關(guān)心糧食和蔬菜

  我有一所房子 

  面朝大海春暖花開(kāi)</p>

  </body>
運(yùn)行代碼效果如圖1所示：

：root選擇器

圖1 root選擇器效果展示1

如果不指定h2元素的字體顏色，僅僅使用“:root選擇器”設(shè)置的樣式，即刪除第4行代碼，效果如圖2所示：

：root選擇器

圖2 root選擇器效果展示2




猜你喜歡：

CSS滑動(dòng)門(mén)是什么？有什么用處？[web前端培訓(xùn)]

CSS結(jié)構(gòu)的特點(diǎn)有哪些？CSS樣式規(guī)則介紹

jQuery如何使用css方法修改單個(gè)樣式？

傳智教育web前端培訓(xùn)

0 分享到：
和我們?cè)诰€交談！