當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

工作中的CSS总结

發布時間：2025/5/22 CSS 63 豆豆

生活随笔收集整理的這篇文章主要介紹了工作中的CSS总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.hover同級標簽樣式

“ + ” 用于同級選擇

==注意：只對相鄰的同級起作用，非相鄰的同級無效==

<body> <style>.first {color: #5d756e;}.first:hover + .fourth {color: red}/*>或空格均可用于子代選擇*/.first:hover > .first-child {color: #000000}.first:hover + .second {color: rgba(0, 0, 0, 0.38);}.first:hover + .second > .third {color: #0000FF;}/* ‘+’ 用于同級選擇 *//* ‘>’ 或 ‘ ’ 用于后代選擇 */</style> <div class='first'>計劃hover元素<div class="first-child">hover元素的子元素</div> </div> <div class='second'>緊鄰hover的下個同級元素<div class='third'>緊鄰hover的下個同級元素的子元素</div> </div> <div class="fourth" style="">非緊鄰hover的同級元素，無法改變</div> </body>復制代碼

2.幾次方，平方米，立方米,上標，下標，刪除線等的表示方法

上標下標刪除線小號字插入字 M2 54 X24+Y1<3=100 N5N<sup>上標</sup><sub>下標</sub><del>刪除線</del><small>小號字</small><ins>插入字</ins>M<sup>2</sup>5<sup>4</sup><h1>X<sub>2</sub><sup>4</sup>+Y<sub>1</sub><<sup>3</sup>=<del>100</del></h1><h1>N<ins>5</ins><small>N</small></h1> 復制代碼

轉載于:https://juejin.im/post/5bc5b2f2e51d450e6b0e3446

總結

以上是生活随笔為你收集整理的工作中的CSS总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
工作