热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在到达某个类之前,将CSS应用于一组HTML标记

如何解决《在到达某个类之前,将CSS应用于一组HTML标记》经验,为你挑选了1个好方法。

我在无序列表中有一组列表标记,例如:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

有没有办法通过CSS在活动类之前或之后定位所有列表元素?



1> David..:

您可以针对所有兄弟元素~

li.active ~ li
{
    color: green;
}

的jsfiddle


在CSS中,您不能在元素之前定位兄弟节点,因此您必须执行以下操作:

给他们一个规则:

li
{
    color: orange;
}

然后覆盖活动的那个

li.active
{
    color: red;
}

然后覆盖之后的那些

li.active ~ li
{
    color: green;
}

的jsfiddle


推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • Day2列表、字典、集合操作详解
    本文详细介绍了列表、字典、集合的操作方法,包括定义列表、访问列表元素、字符串操作、字典操作、集合操作、文件操作、字符编码与转码等内容。内容详实,适合初学者参考。 ... [详细]
  • 一篇文章搞定css3 3d效果
    css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]
  • 这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读 ... [详细]
  • Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 一款清新的jQuery日历插件带日期的Tooltip提示543人浏览发表回复这是一款非常简单清新的jQuery日历插件,它并没有特别的日期或者时间选择功能,仅仅是展示一个简单的日历控件。这款jQu ... [详细]
  • 怎么使用css3画三角形
    小编给大家分享一下怎么使用css3画三角形,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!首先看一下css3画三角形的原理我们先来看 ... [详细]
  • 你有什么见解
    本文主要介绍关于html5,css3的知识点,对【关于雾霾网站设计】和【你有什么见解】有兴趣的朋友可以看下由【-你在暮色中】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的【】相关技术问题。你有 ... [详细]
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 个项目)
    过往项目2018年9月份项目汇总(共26个项目)2018年8月份项目汇总(共29个项目)2018年7月份项目汇总(共29个项目)2018年6月份项目汇总(共27个项目)2018年5 ... [详细]
author-avatar
年轻的蒲山公_777
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有