我在Twitter 中有看到如下selector:

.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}

有哪位童鞋知道这种写法.

答: 这是一个属性通配符selector. 在你提供的例子中, 会在引用了.show-grid 样式的容器内查找包含span样式的任何元素并设置对应的样式

下面这个例子中, 将会找到 <strong> 组件.

<div class="show-grid">
<strong class="span6">Blah blah</strong>
</div>

你也可以定义'以... 开始'的样式, 例如:

div[class^="something"] { }

将会查找到如下的组件:-

<div class="something-else-class"></div>

亦可以定义 '以...结尾'

div[class$="something"] { }

将会查找到如下组件

<div class="you-are-something"></div>

原文地址:

What is this CSS selector? [class*=“span”]

CSS selector? [class*=“span”]怎么理解的更多相关文章

  1. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  2. [译文]通过ID, TagName, ClassName, Name, CSS selector 得到element

    致谢原文: <http://xahlee.info/js/js_get_elements.html> 通过ID得到element: Document.getElementById(id s ...

  3. CSS魔法堂:深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

  4. Selenium - CSS Selector

    Selenium - CSS Selector http://www.cnblogs.com/bugua/archive/2012/08/16/2641647.html   昨天我练习了用CSS(即层 ...

  5. 转:Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  6. css selector

    文章一: http://www.jb51.net/css/68287.html 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记,今天是CSS的选择器,以后还有一部分xPath ...

  7. Scrapy学习系列(一):网页元素查询CSS Selector和XPath Selector

    这篇文章主要介绍创建一个简单的spider,顺便介绍一下对网页元素的选取方式(css selector, xpath selector). 第一步:创建spider工程 打开命令行运行以下命令: sc ...

  8. css selector: xpath:

    css selector: $$(".mainLeft>div>h1") xpath: $x(".mainLeft>div>h1") n ...

  9. Selenium 使用css selector (资源来源于网络)

    Selenium - CSS Selector 昨天我练习了用CSS(即层叠样式表Cascading Stylesheet) Selector来定位(locate)页面上的元素(Elements).S ...

随机推荐

  1. DM7的SQL批量插入for、while方法

    示例1,for用法: begin for i in 1...10000 loop insert into test values(i,i,'aaa',sysdate); if i mod 20 = 0 ...

  2. @Configuration结合@Bean实现对象的配置

    @Configuration结合@Bean实现对象的配置 前提:最近项目中需要做支付接口,支付宝以及微信支付,本文并不介绍如何写支付接口,而是通过这个示例讲解配置应该怎么写,项目中使用的是Kotlin ...

  3. Java开发中的各种乱码问题

    乱码问题 其实解决乱码问题,就是保证所有的编码格式一致,就不会出现问题. 控制台乱码 修改idea的控制台格式 修改 idea.exe.vmoptions和idea64.exe.vmoptions 在 ...

  4. 更好用的 Python 任务自动化工具:nox 官方教程

    英文| nox tutorial 出处| nox 官方文档 译者| 豌豆花下猫@Python猫 Github地址:https://github.com/chinesehuazhou/nox_doc_c ...

  5. Oracle Autonomous Health Framework (AHF) 解读

    AHF介绍 Oracle在2019年10月18日发布自治健康框架Autonomous Health Framework (AHF) 19.3,将ORAchk,EXAchk,TFA三种诊断工具合并入AH ...

  6. mysql 行增删改查

    一.增 ); ),(); insert into student(name, age) select name, age from info; 二.删 delete from db1; delete ...

  7. ORM跨表查询总结

    一.基于对象的查询-->子查询 1.一对多 正向查询:基于 字段 反向查询:基于 表名__set.all() 注意:表名全部小写 2.多对多 正向查询:基于 字段.all() 反向查询:基于 表 ...

  8. 把 CPU “玩”起来

    前言 从开始学习编程之后,就渐渐痴迷于技术,平时遇到购书满减活动时就忍不住买一堆书.前两天闲着无聊,翻开了去年买的<编程之美>,目录里的“让 CPU 占用率听你指挥”吸引力我的眼球.这一年 ...

  9. java小心机(4)| 继承与组合的爱恨情仇

    在java中,有两种主要复用代码的方法:继承和组合. 继承,是OOP的一大特性,想必大家都非常熟悉了;组合,其实也很常见,只是不知道它的名字罢了. 继承 子类拥有父类的基本特性,需使用extend关键 ...

  10. 5分钟搭建网站实时分析:Grafana+日志服务实战

    原文地址:https://yq.aliyun.com/articles/227006 阿里云日志服务是针对日志类数据一站式服务,用户只需要将精力集中在分析上,过程中数据采集.对接各种存储计算.数据索引 ...