css让div显示不同内容

css让div显示不同内容

思路:

1、使用nth-of-type伪类选择器选择不同的div;

2、使用::before伪类元素添加不同内容即可。

(相关课程推荐:css视频教程

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*设置统一的div样式, 也可以单独设置*/
        div{
            color: #fff;
            width: 100px;
            height: 100px;
            margin: 8px;
            background: skyblue;
        }

        /* 选中第一个div 设置一个背景用于区分 下同 */
        div:nth-of-type(1){
            background: red;
        }
        /* 利用伪类元素 添加不同的内容到div中 */
        div:nth-of-type(1)::before{
            content: "这是div1的内容";
        }

        div:nth-of-type(2){
            background: pink;
        }
        div:nth-of-type(2)::before{
            content: "这是div2的内容";
        }

        div:nth-of-type(3){
            background: green;
        }
        div:nth-of-type(3)::before{
            content: "这是div3的内容";
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

Snipaste_2019-12-21_11-18-12.jpg

Image placeholder
前端答疑
未设置
  87人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jq设置css让元素不显示

jq设置css让元素不显示使用jQuery设置元素的css属性,需要使用.css()方法,具体操作如下:$("#id").css("display","none");//隐藏 $("#id").css

css让超链接不加下划线?

css让超链接不加下划线?css中去除下划线,可以设置a标签的text-decoration属性为none。使用一个案例来说明:1、代码部分 document 我要去除超链接下划线 (推荐

css背景图片显示不完怎么解决?

css设置背景图片显示不全是因为背景图片过大导致的,我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。示例:下面我们来看一下通

css before显示不出来怎么办

cssbefore显示不出来怎么办cssbefore伪类元素要显示,需要设置content属性,而且要具有一定的宽高,可以设置display为inline-block和block,让元素的宽高生效。下

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

IE浏览器页面显示不全怎么办?

快速修复浏览器方案(鉴于系统环境不同→请活学活用以下方法→根据具体情况决定做哪些)1、打开浏览器,点“工具”→“管理加载项”那里禁用所有可疑插件,或者你能准确知道没问题的保留。然后→工具→INTERN

css设置div滚动条内容不超过就不显示

css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示滚

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css不同浏览器兼容性问题怎么解决?

css不同浏览器兼容性问题的解决方案1.浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把ma

css怎么适配不同分辨率屏幕?

这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。我们可以使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变

如何调用不同css样式?

1、根据不同分辨率来调用不同css样式可以使用@media查询来根据不同分辨率调用不同css样式。使用@media查询,你可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不

多个ul怎么定义不同css?

多个ul怎么定义不同css?相同的元素,定义不同的css,只需要活用选择器就可以实现了。1、给ul命名,idclass都行,例如 CSS中就是把ul换成相应的名字:(注意空格)div#myul{}//

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

iis部署html css无法显示怎么解决

iis部署htmlcss无法显示怎么解决如果你的网站在VS或其他软件中运行时具有CSS和JS功能,但到了IIS中就消失了,导致网站变成纯文字界面。你需要进行如下尝试。1、首先确认是否打开IIS中的“动

如何不写css使div居中显示

如何不写css使div居中显示不使用css使div居中显示,可以使用标签,对其所包括的文本进行水平居中。html代码如下: 这是div 效果:(相关课程推荐:css视频教程)标签说明HT

css设置radio不显示小圈

css设置radio不显示小圈选中变红默认情况下,input的type为radio时会显示小圆圈,去除的方法很简单,只需要设置input{-webkit-appearance:none;}即可。设置了

ie11无法显示css

ie11无法显示css解决方法如下:1、在css文件的顶部加上@charset"utf-8";2、打开注册表编辑器,找到HKEY_CLASSEC_ROOT.CSS下的ContentType,然后把这个

css怎么让输入框不显示光标?

css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大神提供的方法完美解决。一、首先隐

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格

css图片在ie8中不显示怎么办?

css图片在ie8中不显示怎么办?css背景图片在ie8中不能显示是因为no-repeat前面缺少空格,添加一个空格,改成background:url(图片地址)no-repeat即可。代码:(相关课

css如何设置元素不显示仅占位置?

css如何设置元素不显示仅占位置?隐藏页面元素可以使用visibility:hidden属性,它将元素设置为不可见,并且占据原来的位置,不能响应点击事件。不可见 .hide{ visibility:

dw怎么显示css效果?

dw怎么显示css效果?dw中显示css效果,可以开启实时视图模式。我们现在来看看,Dreamweaver如何显示实时视图。1、打开软件后我们点击菜单栏上方的【查看】按钮。2、接下来我们就可以点击【实

iis不显示css引用的图片?

iis不显示css引用的图片?原因有两个:项目文件夹权限问题未开启IIS的静态内容功能(相关课程推荐:css视频教程)解决方法:1、文件夹权限问题的解决方法项目文件夹→属性→安全→编辑→添加→高级→立

css背景图片调用不显示是什么原因?

css背景图片无法显示,有以下几方面原因:  1、css没有被调用;请检查css调用是否成功。  2、css图片地址不对;请检查css图片地址是否正确。  3、元素的高度没有固定,是auto或者没有设