理解content(二)

2020-06-07 16:00:13来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

理解content(二)

从零开始的前端生活-理解content(二)

应用

清除浮动

伪元素加content最常见的应用是清除浮动带来的影响

.clear::after{
    content:'';
    display:table;
    clear:both;
}

字符内容的生成

content还可以插入Unicode字符(万国码),例如content: '\A'; 就是换行的意思。案例如下,实现 “正在加载中...” ,三个点来回切换。

<div>
    正在加载中
    <dot>...</dot>
</div>
dot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}

@keyframes dot {
    33% {
        transform: translateY(-2em);
    }
    66% {
        transform: translateY(-1em);
    }
}

原理我觉得是这样的

dot

dot容器高为1em,如图矩形所示,使用伪元素before是把原来html中的三个点挤出去。或者html里面三个点都不用写了,这样用before和after都可以。然后使用overflow: hidden; 把超过容器部分的内容隐藏起来。/A是换行的意思。

图片生成

div::before{
    content:url(1.jpg);
}

不过这种方式用的不多,主要是图片的尺寸不好控制

attr 属性值内容生成

获取元素属性的值

比如

<div class= "box"></div>
.box::before{
    content: attr(class);
}

结果将显示box,出来原生的HTML属性,还可以自定义的HTML属性。注:不用括号里加引号

content计数器

我觉得这可以应用在列表新增或减去元素的计数功能,比如这样的需求:左边一个ul 购物车,当我们点击一件商品加入购物车,购物车ul里要生成对应商品的li,并实现计数功能。js可以实现,不过css也可以实现。

先来看看计数器的两个属性和一个方法。

  • counter-reset

    意思是:“计数器-重置”,格式是 counter-reset : count 1; 创建一个叫count的计数器,起始值为1,如果没写起始值默认为0. 当然也可以同时设置多个计数器,如 counter-reset : count1 2 count2 3; 用空格隔开就行。

  • counter-increment

    意思是:“计数器递增”,后面可以跟数字,表示每次计数的变化值,没写默认为1。

    遵循普照规则--普照源(counter-reset)唯一,每普照(counter-increment)一次,普照源增加一次计数值。下面会用到

    格式如下:

    .counter{
        counter-reset: count 1;
        counter-increment: count;// 也可以普照多个计数器,用空格就行
    }
    .counter::before{
        content: counter(count);
    }
    
    <p class="counter"></p>
    

    当然counter-increment可以放在自身元素上,也可以在伪元素上。不过有时候效果不一样,反正记住,普照一次,就increment一次。

  • 方法 counter() / counters()

    content: counter(name);// name 是 计数器名字

    content: counter(name, style); style 的值就是 list-style-type 的那些值。

    .couter {
        font-size: 32px;
        color: red;
        counter-reset: zhangsan 2 lisi 3;
        counter-increment: zhangsan;
    }
    
    .couter::before {
        content: counter(lisi);
    }
    
    .couter::after {
        content: counter(zhangsan, square);
    }
    

    counter只能1、2、3、4,如果要实现1-1 , 1-2 , 2-1 这种分级效果,就可以使用counters()

    格式: content: counters( name , string);

    这个时候普照规则就很重要

    <div class="reset">
        <div class="counter">HTML
            <div class="reset">// 直接嵌套在里面,遵循 一个容器里的普照源唯一的原则
                <div class="counter">div
                    <div class="reset">
                        <div class="counter">……</div>
                    </div>
                </div>
                <div class="counter">span</div>
            </div>
        </div>
        <div class="counter">CSS
            <div class="reset">
                <div class="counter">content</div>
                <div class="counter">color</div>
            </div>
        </div>
        <div class="counter">JS</div>
    </div>
    
    .reset {
        counter-reset: count 0;
        padding-left: 20px;
    }
    
    .counter::before {
        content: counters(count, '-') '. ';
        counter-increment: count;
    }
    

    demo

虽然看起来有点乱,仔细看一下就会发现,要实现嵌套,就得遵循普照源唯一,每次嵌套都得外面包一层reset。

还可以counters(name , string , style);

大杂烩

content 内容生成语法是可以混合在一起使用的,比如

a::before{
   content: "(" attr(href) ")"; 
}
.counter::before {
    content: counters(count, '-') '. ';
    counter-increment: count;
}

不用 + 号字符串拼接

结语

读张鑫旭老师的css世界记录的笔记!


原文链接:https://www.cnblogs.com/Dusks/p/13060787.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:转行前端很迷茫,该怎么学习?

下一篇:HTML基础01