我在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. Linux学习之路--简介

    1 Linux简介 UNIX与Linux发展史 Unix在1969年,美国贝尔实验室的肯汤普森在DEC PDP-7机器上开发出了UNIX系统.Linux出现于1991年,是由芬兰赫尔辛基大学学生李纳斯 ...

  2. 关于AWD线下攻防的经验

    备份:     1.备份源码,使用图像化工具连接ssh后,我喜欢用winscp,         找到根目录后,直接右键后台下载就行.           找根目录这里,有时候比赛不给根目录位置,上次 ...

  3. fastjson使用详解

    目录 二.fastjson使用 三.fastjson 常用 API 四.fastjson使用演示 测试类准备 1.java类转换为json字符串 2.json字符串转为java类 五.fastjson ...

  4. 移动端保存当前屏幕内容为图片,canvas图片拼接

    需求:1.移动端点击分享时,截屏当前屏幕,并保存为图片  2.将截屏的图片与一张二维码图片进行拼接后,生成一张新的图片 技术栈:html2canvas.js.canvas2image.js 代码:(j ...

  5. Android学习进度二

    在最新的Android开发中,Google已经使用了新的开发技术,即使用Jectpack来开发App.所以今天我主要学习了这方面的知识. Jetpack 是一套库.工具和指南,可帮助开发者更轻松地编写 ...

  6. phpstudy nginx设置CORS跨域不起作用的可能解决方法

    今天搞了半天的跨域问题,想通过nginx配置跨域,希望以后本地调试程序都不用为这件事烦心.无非就是设置几个请求头: add_header Access-Control-Allow-Origin *; ...

  7. Eureka 主动下线服务

    原因: 测试环境由于机器换ip,神奇的出现了更新之前,之后的IP同时在Eureka上注册了. 方法一:直接停掉服务 默认情况下,如果Eureka Server在90秒没有收到Eureka客户的续约,它 ...

  8. BeautifulSoup的简单用法

    官方文档加载比较慢(估计是我党的原因) https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html#find-parents ...

  9. AVR单片机教程——UART进阶

    本文隶属于AVR单片机教程系列.   在第一期中,我们已经开始使用UART来实现单片机开发板与计算机之间的通信,但只是简单地讲了讲一些概念和库函数的使用.在这一篇教程中,我们将从硬件与软件等各方面更深 ...

  10. [bzoj3991] [洛谷P3320] [SDOI2015] 寻宝游戏

    Description 小B最近正在玩一个寻宝游戏,这个游戏的地图中有 \(N\) 个村庄和 \(N-1\) 条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择一个村庄,瞬 ...