原文: https://stackoverflow.com/questions/20322740/odd-css-syntax-class-icon-class-icon

I am going through someone else's CSS code at the moment and found something I have not seen before, nor am I able to find anything on W3C schools about these types of selectors. Google also doesn't return anything if I type in "class^="

Would appreciate it if someone could shed some light on this please?

-----------------------------------------------------------------------

This is somewhat comprehensively covered here:

http://reference.sitepoint.com/css/css3attributeselectors

Quick summary:

[class^='icon-'] - classes starting with 'icon-' (eg. class='icon-blah blah')
[class$='-icon'] - classes ending with '-icon' (eg. class='blah blah-icon')
[class*='icon'] - classes containing 'icon' (eg. class='blah xxx-icon-blah')

It's worth noting that this is a full string matching pattern not a partial matching pattern. So for example, the class:

<div class='mystyle-type'/>

Will match to the selector [class^='mystyle'] but the class:

<div class='active mystyle-type'/>

Will not match, because the string 'active mystyle-type' does not start with 'mystyle'.

This can be problematic with javascript that adds classes dynamically like jquery's 'addClass'.

Odd CSS syntax. [class^='icon-'], [class*=' icon-']的更多相关文章

  1. CSS之fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  2. 字体图标 icon font

    Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...

  3. HTML及CSS学习笔记

    推荐博客:付铭 day-01 HTML 1.HTML 基本语法 html标签 单标签 <img /> .<img> 双标签 <html> </html> ...

  4. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  5. html和css的重难点知识

    目录 html总难点总结: 1. 块级标签与内联标签的区别 1.1 块级标签: 1.2 内联标签: 2. 选择器 2.1 定义 2.2 选择器的分类 2.1 选择器的分类 3. css中margin, ...

  6. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  7. CSS 概念 & 作用

    http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html 式样定义   如何显示 HTML内容 通常存储在式样表中 作用 : 解 ...

  8. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  9. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

随机推荐

  1. python-使用递归实现二分法

    在上一篇中简单介绍了递归的使用,请戳这里 .  在此篇中,主要介绍如何用递归实现二分法. 在使用二分法之前,首先要有个前提,那就是这个数组必须是有序数组.主要的思路为: ①先取出数组中的一个中间值, ...

  2. localStorage和cookie操作

    localStorage和cookie操作代码: cookie: { isSupportCookie: function() { return navigator.cookieEnabled; }, ...

  3. PAT——1012. 数字分类

    给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字: A1 = 能被5整除的数字中所有偶数的和: A2 = 将被5除后余1的数字按给出顺序进行交错求和,即计算n1-n2+n3-n4...: ...

  4. 【luogu P3946 ことりのおやつ】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3946 交好几遍是因为虽然能过一直有提醒..强迫症qwq #include <bits/stdc++.h ...

  5. Python 学习笔记(九)Python元组和字典(三)

    字典常用方法 copy() 返回一个字典的浅复制 示例:浅拷贝d.copy() 深拷贝引入import copy   copy.deepcopy() >>> help(dict.co ...

  6. 搜索 水题&&错误集锦

    引子: 本以为搜索的题目老师也不会检查,结果今天早上loli慢悠悠的说:“请同学们提交一下搜索的题目~”,顿时心旌摇曳,却也只能装作镇定自若的样子,点了点头.. 然后就开始了今天的疯狂做题,虽说题目都 ...

  7. Oracle条件判断列数量非where

    sum(case when typename='测试' then 1 else 0 end)

  8. Vmware文件类型

    ### vmx ###> 虚拟机启动的配置文件+ 包含`.encoding`.`displayName`.`memsize`等基本配置信息,还包括一些链接文件的位置如`nvram`(非易变RAM ...

  9. es6 Proxy对象详解

    Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改.这个词的原理为代理,在这里可以表示 ...

  10. MySQL5.7主从同步--点位方式及GTID方式

    MySQL5.6加入了GTID的新特性,其全称是Global Transaction Identifier,可简化MySQL的主从切换以及Failover.GTID用于在binlog中唯一标识一个事务 ...