热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

CSS到class+anyclass

如何解决《CSS到class+anyclass》经验,为你挑选了1个好方法。

当元素具有一个特定的类时,我需要为元素添加不同的样式;当元素具有该特定的类再加上另一个(非特定)时,我需要向其添加其他样式

这是因为第二类随页面而变化

到目前为止,我已经尝试过:

.page {display: none;}
.page[class=""] {display: block;}

要么

.page {display: none;}
.page.* {display: block;}

Quentin.. 5

使用类选择器要求它具有所需的类。

使用属性选择器要求与特定类的属性值完全匹配(即与字符串完全匹配)。

注意属性选择器对空格敏感的限制。

这样:

div {
  margin: 1ex;
  padding: 1ex;
  border: dotted 1px #aaa;
}

.foo {
  /* Includes foo */
  background: yellow;
}

[class="foo"] {
  /* Has *only* foo */
  background: red;
}
No class attribute
No classes
Foo
Foo + whitespace
Foo Bar
Foo Baz

请注意,类选择器和属性选择器具有相同的特异性,因此顺序很重要



1> Quentin..:

使用类选择器要求它具有所需的类。

使用属性选择器要求与特定类的属性值完全匹配(即与字符串完全匹配)。

注意属性选择器对空格敏感的限制。

这样:

div {
  margin: 1ex;
  padding: 1ex;
  border: dotted 1px #aaa;
}

.foo {
  /* Includes foo */
  background: yellow;
}

[class="foo"] {
  /* Has *only* foo */
  background: red;
}
No class attribute
No classes
Foo
Foo + whitespace
Foo Bar
Foo Baz

推荐阅读
  • Vue项目结构分析-项目结构重点在src文件夹:assets——静态资源,如css,jscomponents——公共组件router——路由文件(vuecli3.x没有自 ... [详细]
  • 新闻发布系统 需求分析
    1做一个网站的步骤清楚需求和大概的效果(登录主题新增查看主题列表)2清楚数据库和结构3需要静态资源(htmlcss图片)登录表用户表主题表新闻的id主 ... [详细]
  • FroggerTimeLimit:1000MSMemoryLimit:65536KTotalSubmissions:32257Accepted:10396DescriptionFr ... [详细]
  • 九宫格计算. ... [详细]
  • 22.Container With Most Water(能装最多水的容器)
    thecontainercontainsthemos ... [详细]
  • 1.安装cordovapluginaddcordova-plugin-file-transfercordovapluginaddcordova-plugin-fi ... [详细]
  • WebBrowser控件(1)
    WindowsPhone7内置了一个强大的网络浏览器,该浏览器的内核是基于桌面版的InternetExplorer7(Mango版基于InternetE ... [详细]
  • spotify engineering culture part 1
    原文,因为原视频说的太快太长,又没有字幕,于是借助youtube,把原文听&打出来了。中文版日后有时间再翻译。oneofthebigsucceessfactorshereatSpo ... [详细]
  • MyBatis模糊查询和多条件查询一、ISmbmsUserDao层根据姓名模糊查询publicListgetUser();多条件查询publicList ... [详细]
  • python自学教程哪里好,python比较好的教程
    本文目录一览:1、想学python去哪里比较好? ... [详细]
  • vscode里的html标签导航的一系列问题
    哈喽,我今天带来的经验是,vscode在18年10月更新后的1.29以后,编辑html文档时,会发现最上面有个类似于HTML标签导航的玩意儿,可能部分同学和我一样不习惯用它们,现在 ... [详细]
  • NickLa制作了另伟大的教程。NickLa向我们展示了如何装饰,而无需编辑源图像的图像和照片画廊。诀窍是很简单。所有你需要的是一个额外的标签和应用背景图像创建的叠加 ... [详细]
  • Illustrator绘制逼真的愤怒的小鸟实例教程
    Illustrator教程: ... [详细]
  • 抓取百万知乎用户设计之实体设计
    一.实体的关系实体是根据返回的Json数据来设计的教育经历方面用户可以有很多教育经理,USER和education是一对多的关系,一个education对应一个education一 ... [详细]
  • 软件自动化测试的学习路线
    软件自动化测试的学习步骤软件测试交流群关注软件测试技术公众号获取阅读目录软件自动化测试的学习步骤自动化测试的本质自动化测试学习的误区自动化测试的职位自动化测试分类Web自动化 ... [详细]
author-avatar
老翅几回寒_332
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有