CSS容易被忽视的小技巧

一、title---鼠标移到元素上时显示一段工具提示文本

定义

title 属性规定关于元素的额外信息。

这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）

语法

<element title="text">

实例

发现漏洞

如上图所示，title可以展示element元素的额外信息。现在title字数比较少显示的没有什么问题，如果需求变了，title内容特别特别长直接这么演示用户体验将会相当糟糕（如下图）

毫无美感可言，用户体验也是相当不友好，那么怎么修改呢？

隐藏技能

这里我们用到自定义属性data-title和伪类相结合的办法，如下：

js 复制代码

//html
<div class="tooltip-data-title">
    <a data-title="核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水核污水">核污水</a>
</div>
//css
.tooltip-data-title a{position: relative;}
.tooltip-data-title a:after{content: attr(data-title);position: absolute;bottom:43px;left:-1px;width:400px;border:1px solid #1890ff;background-color: #e9f0fe;color:#657296;border-radius: 4px;padding:10px;
  opacity:0;text-align:left;transition: all .5s;z-index:12;}
.tooltip-data-title a::before{content:"";width:0;height:0;border:10px solid transparent;border-top: 10px solid #1890ff;position: absolute;top:-15px;left:20px;opacity: 0;}
.tooltip-data-title a:hover,.tooltip-data-title a:hover::after,.tooltip-data-title a:hover::before{opacity: 1;}

上述代码可以简单的分成两块：蓝色的框和向下的等腰三角形。

这里最关键的一步 在于content:attr(data-title)。attr能够在css中获取到元素的某个属性值，然后插入到伪元素的content中去。这里它取到了自定义属性data-title的值，插入到了content中。其他代码无非是尺寸颜色这类的样式，这里不予赘述。

让我们来看看效果：

二、 counters（）

大多数时候我们需要行号自动填充。html 里面有一个标签叫做 ol------order list。通过 ol 和 li 的嵌套，我们能够得到前面有数字标号的列表。但是对于上面的方式，都不太灵活，而且需要做额外的工作。css counter作为古老又实用的属性给予我们更灵活更强大地控制列表标号的能力。

定义

counters() 函数允许嵌套的计数器, 返回指定计数器当前值。CSS 中的计数器类似于变量，可以实现简单的计数功能，并将结果显示在页面上。

属性介绍

属性	详细
counter-reset	此值是必需的。必须用于选择器，主要用来标识该作用域，其值可以自定义创建或者重置计数器；如：`counter-reset:level`;其中level只是示例，实际上可以任意命名的一个名字标志符。
counter-increment	递增变量，计数器累加。用来标识计数器与实际相关联的范围; 如：`counter-increment: level1 1` 其中，level1 是通过 counter-reset 定义的计数器名，这里的 1 也可以是任意其他整数，甚至可以是负数。当浏览器渲染页面时，带这个属性的元素每出现一次，当前层级内对应名字的计数器就增加相应的值。如不写，默认是 1。
content	插入生成的内容。其为:before、:after或::before、::after的一个属性。在生成计数器内容，主要配合counter()一起使用。
counter() /counters()	将计数器的值添加到元素。该函数用来设置插入计数器的值。前面两个属性定义了计数器和计算规则，不过，这些计数器的计算目前都是在内存中进行的。`counter()` 和 `counters()` 就负责把计数器显示出来。这两个计算方法要和伪元素的 content 属性搭配使用。如：`content: counter(level1)`。counter 计算符前后可以随意加字符串来对最后的效果做拼接。

实例

js 复制代码

//html
<div class="m-steptab f-clear"> 
    <a class="cur"><span>第一步</span></a>
    <a><span>第二步</span></a>             
    <a><span>第三步</span></a>              
</div>
//css step tab
.m-steptab {counter-reset: step;}
.m-steptab a span::before { content: counter(step); counter-increment: step 1; }

看到此处想必大家对css counter的属性的基本用法有所了解了。让我们来看看效果：

三、 has（）

:has() 选择器允许我们可以通过后面及里面的元素确定前面或外面的元素的CSS样式。我们根据子元素来为父元素设置样式。如：

js 复制代码

//html
<div class="card">
        <img src="16.png">
        <dl>
            <dt>小皮球香蕉梨</dt>
            <dd>zaixiaoxiaodehuayuanliwayawayawazaidadadehuayuanliwayawayawazanamedadehuayuanliwayawayawa</dd>
        </dl>
    </div>  
    <div class="card">
        <dl>
            <dt>小皮球香蕉梨</dt>
            <dd>zaixiaoxiaodehuayuanliwayawayawazaidadadehuayuanliwayawayawazanamedadehuayuanliwayawayawa</dd>
        </dl>
    </div>  
    <div class="card">
        <dl>
            <dt>小皮球香蕉梨</dt>
            <dd>zaixiaoxiaodehuayuanliwayawayawazaidadadehuayuanliwayawayawazanamedadehuayuanliwayawayawa</dd>
        </dl>
    </div>
    <img src="16.png" style="margin-left:20px;">
 //html

js 复制代码

//css
 img {width: 100px;height: 100px;border-radius: 4px;margin-right: 10px;}
.card {display: flex;width:50%;border-top:3px solid #fff;background-color: white;padding: 10px;border-radius: 4px;margin: 20px;box-shadow: 0 0 10px rgba(58, 88, 227, .2);}
.card:has(img){border-top-color:#3a58e3;} /*表示当div中有子元素img时*/
.card:has(+img){border-top-color:#ff9600;} /*表示当.card后面紧跟着img类型的兄弟元素时*/
.card:has(~img){border-left:3px solid green;} /*表示当.card后面有img类型的兄弟元素时*/
.card:has(>img){border-right:3px solid pink;} /*表示当div中有子元素img时*/
.card dl{word-break: break-all;}
.card dt{font-weight: 700;font-size: 18px;color:#333;line-height: 40px;}
.card dd{font-size:14px;color:#666;}

效果图：

边学习边整理，后续继续补充，如有问题欢迎指正，大家一起加油！侵删~