当前位置：首页 > 前端技术 > CSS >内容正文

CSS

工作中的CSS总结

发布时间：2025/5/22 CSS 91 豆豆

生活随笔收集整理的这篇文章主要介绍了工作中的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
工作