工作中的总结-CSDN博客

本文链接：https://blog.csdn.net/tlp604667633/article/details/83095032

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>