大发六合彩

大发六合彩提示:你现在浏览的网站是镜像网站

请访问原网站:1079wrnb.com
声明:大发六合彩唯一指定网址为:mybj123 .com,其他网址均为冒充,望周知!!!前端技术交流群:565733884

[CSS系列]content你不可忽略的属性

HTML/CSS 码云 27℃ 0评论
目录
[隐藏]

CSS的content属性,大家应该都不陌生,很多时候我们都使用过,一般情况下你看到最多的用法无外乎这样两种:一种用于清除浮动,一种用于我们经常使用的字体图标。

.clear:after {
  content: "";
  display: block;
  clear: both;
}
.icon:before {
  content: "\e778";
}

大多数都会停留这个阶段,很少会探索更多的用法,甚至有些人认为它的用法也就这么多。

不过当你看到这篇文章时,会发现这是一种多么错误的想法。你会发现原来还有这么多,被你忽略而且好用的功能。

接下来大发六合彩就让我们一起见识见识它的更多用法。

介绍

首先我们先来看看MDN上对content是如何描述的。

CSS的content属性用于在元素的::before和::after伪元素中插入内容。使用content属性插入的内容都是匿名的可替换元素。

从上面看到它只能用于「伪元素」中,但其实它在chrome浏览器中,可用于任何元素,这个可能很多人都不知道,不信你可以看下面这个例子。

content属性
<template>
  <div class="box"></div>
</template>
<style>
.box {
  content: url(http://1079wrnb.com/id/237/300/200?_sp_=_photos_picsum_);
}
</style>

不过除了chrome浏览器,其它浏览器并不支持直接在元素上使用,只能用在「伪元素」上。所以使用场景并不多。

你已经看到content的值可以为字符与url。那它还可以使用那些值呢?让我们一一来看。

属性值

1.String

指定的文本值。字符串是最常见的用法,比如上面说的字体图标。不过你还可以做的更多。

大发六合彩
<template>
<div>
  <form class="form">
    <label>用户名</label><input type="text" />
    <label>手机号</label><input type="text" />
    <label>邮箱</label><input type="text" />
  </form>
</div>
</template>
<style>
.form label:before {
  content: "*";
  color: red;
}
</style>

Q:是不是发现了新大陆?

A:是

Q:登哥,你是如何看待别人都说你很帅的?

A:我这该死的,无处安放的魅力

<template>
  <p class="question">是不是发现了新大陆?</p>
  <p class="answer">是</p>
  <p class="question">登哥,你是如何看待别人都说你很帅的?</p>
  <p class="answer">我这该死的,无处安放的魅力</p>
</template>
<style>
.question:before {
  content: "Q:";
}
.answer:before {
  content: "A:";
}
</style>

2.url

值可以为:图像,声音,视频等内容。

通常你想在网页中显示一张图片,一般是两种方式:使用<img>或者使用background-image。

除此之外,你还可以利用content属性,它的值可以是图片的地址。

比如下面这种方式:

<template>
  <div class="image"></div>
</template>
<style>
.image:before {
  content: url(http://1079wrnb.com/id/237/300/200?_sp_=_photos_picsum_);
}
</style>

不过以这种方式插入时无法更改图像的尺寸。所以我们很少这么使用,不过有个场景是比较适合这种方式它可以很容易实现一个图片的切换。比如下面这个例子。

<template>
<img class="img-item" src="/head.png">
</template>
<style>
.img-item {
  width: 200px;
}
.img-item:hover {
  content: url(http://1079wrnb.com/gonghao.jpg);
}
</style>

虽然效果上把图片替换,其实如果细心的你,打开控制台会发现它的src值是没有改变的。也就是说它修改的是我们的视觉效果而已。

3.attr

可以用它获取HTML属性的值。

年龄:18

<template>
  <label class="label" data-label="年龄">18</label>
</template>
<style>
.label:before {
  content: attr(data-label) ": ";
}
</style>

4.counter(计数器)

这个就比较厉害了,是一个非常强大的功能,如何强大的呢?接下来我们就来看看。通常你要实现一个动态的递增数,都是通过JavaScript实现,你可能都没有想过CSS也是可以实现递增数。

这个牛逼的东西就是「计数器」。

先来看看什么叫计数器:

本质上CSS计数器是由CSS维护的变量,这些变量可能根据CSS规则增加以跟踪使用次数。

计数器的值通过使用counter-reset和counter-increment操作,然后通过counter()或counters()函数来显示在页面上。

光说不练假把式,来看看如何使用它。

首先,使用前必须要通过counter-reset重置一个初始值。它默认是0。大发六合彩你也可以指定初始值。

counter-reset: record; /* 重置计数器为 0 */
counter-reset: record 2; /* 重置计数器为 2 */

除此之外,它的值还可以是多个。

24

<template>
  <h3></h3>
</template>
<style>
h3 {
  counter-reset: first 2 second 4;
}
h3:before {
  content: counter(first) counter(second);
}
</style>

利用计数器我们很容易实现这种有序列表的效果。

实现这种有序列表的效果
<template>
  <div class="page-list">
    <p>你瞧,我这该死的,无处安放的魅力</p>
    <p>你瞧,我这该死的,无处安放的魅力</p>
    <p>你瞧,我这该死的,无处安放的魅力</p>
  </div>
</template>
<style>
.page-list {
  counter-reset: counter;
}
.page-list p:before {
  padding: 2px 8px;
  border: 1px solid  #ccc;
  counter-increment: counter;
  content: counter(counter);
}
</style>

少侠且慢,你以为到这里就结束了吗?counter()函数可以接受两个参数。

counter(name, list-style-type)
list-style-type 的值可以为:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit

所以我们可以把上面的一个案例改成这样。如果你感兴趣,你可以这些值都玩一遍。

[CSS系列]content你不可忽略的属性
content: counter(counter, upper-roman);

上面我们提到,除了counter()之外还有一个counters(),那它是做什么的呢?

counters()对嵌套的计数器非常有用,它可以在不同级别的嵌套计数器之间插入字符串。

比如:我们生成一个目录结构。

生成一个目录结构
<template>
  <ol class="list">
  <li>item</li>
  <li>item
    <ol class="list">
      <li>item</li>
      <li>item</li>大发六合彩
      <li>item
        <ol class="list">
          <li>item</li>
          <li>item</li>
        </ol>
      </li>
      <li>item</li> 
    </ol>
  </li>
  <li>item</li>
</ol>
</template>
<style>
.list {
  counter-reset: section;
  list-style-type: none;
}
.list li:before {
  counter-increment: section;
  content: counters(section, "-") ".";
}
</style>

好了到这里本篇文章结束了,今天说了很多好用的方法,而且是经常容易忽略的甚至是没有使用过的。通过今天的文章我相信大家应该对content属性有了更多的了解。

不过有一点需要注意,content还有其它的属性,不过我认为其它属性和这几个比起来,就显比较不实用了,如果你对其感兴趣,不防自己研究下。

转载请注明:大发六合彩 » [CSS系列]content你不可忽略的属性

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址