CSS3通配符

在 CSS3 中,追加了三个属性选择器分别为:

[att*=val] ----内容包含

[att^=val] ----开头匹配

[att$=val] ----结尾匹配

示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
   <style>
       [id*=box]{
           background: #75d8ff;
       }

       [id^=box]{
           background: #ff0000;
       }

       [id$=blue]{
           background: blue;
       }
   </style>
</head>
<body>
实例1:
    <div id="box1">sdf</div>
    <div id="2box">sdf</div>
    <div id="box3blue">sdf</div>
</body>
</html>

时间: 2024-04-17 13:46:26

CSS3通配符的相关文章

CSS3属性选择通配符

CSS3增加了更多的CSS选择器,可以实现更简单但是更强大的功能,比如:nth-child()等. Attribute selectors:在属性中可以加入通配符,包括^,$,* [att^=val]:表示开始字符是val的att属性 [att$=val]:表示结束字符是val的att属性 [att*=val]:表示包含至少有一个val的att属性

CSS3选择器

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我.和我一样的小白们希望能相互学习,谢谢了. 选择器的使用 通过选择器的使用,可以不再需要在编辑任何多余的无语义的class属性. 属性选择器: 在使用属性选择器时,需要声明属性和属性值. 声明方法:[att=val],其中att代表属性,val代表属性值. E[att=val]:前面的E表示在何种标签如:div[id=momo],a[he

CSS3新增属性选择器: [attribute*=value] 、[attribute^=value] 和[attribute$=value]

在CSS3中新增了 [attribute*=value] .[attribute^=value] 和[attribute$=value] 三个选择器,使得属性选择器有了通配符的概念. 下边是一个使用这三个属性的完整示例代码,及运行后的页面展示效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结(一)--概要.选择器.特殊性与刻度单位 目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先级) 3.2.计算特殊性值 四.刻度 4.1.绝对长度单位 4.2.文本相对长度单位 4.3.Web App与Rem 五.示例与帮助下载 web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面

HTML5和CSS3基础教程(第8版)-读书笔记(2)

第7章 CSS构造模块 7.1 构造样式规则 样式表中包含了定义网页外观的规则.样式表中的每条规则都有两个主要部分:选 择 器(selector) 和 声 明 块(declaration block). 选择器决定哪些元素受到影响:声明块由一个或多个属性 - 值对(每个属性 -值对构成一条声明,declaration)组成,它们指定应该做什么. 声明块内的每条声明都是一个由冒号隔开.以分号结尾的属性- 值对. 声明的顺序并不重要,除非对相同的属性定义了两次. 在样式规则中可以添加额外的空格.制表

Css3选择器-基本选择器

一.通配符选择器(*) 通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素. 二.元素选择器(E) 元素选择器,是css选择器中最常见而且最基本的选择器. 三.类选择器(.className) 类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类 四.id选择器(#ID) ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中

CSS3 01. CSS3现状、属性选择器、伪类选择器、

CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围  {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

HTML5与CSS3基础教程读书笔记 2015/11/28

第七章 1.css分类 (1)控制基本格式的属性:font-size和color (2)控制布局的属性:position和float (3)控制在哪里换页的打印控制元素 (4)控制项目显示和消失的动态属性 (5)创建下拉列表和其他交互性组件 2.css3的新特性 圆角.阴影效果.文字阴影.自定义字体.旋转文本.半透明背景颜色.多图像背景.渐变等 3.基本格式 注意,上一行没写完的换到下一行要空连个字符 注:h1叫做选择器(h1和{之间最好用一个空格隔开),{}之间叫做声明块 提示:可以添加空格和