css3新特性-新增3个属性选择器

最新推荐文章于 2022-03-22 22:32:36 发布
最新推荐文章于 2022-03-22 22:32:36 发布
阅读量237 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaochouyu0703/article/details/84695143
版权
CSS3在CSS2的基础上对属性选择器进行了扩展,使得属性选择器有了通配符的概念。

[img]http://dl2.iteye.com/upload/attachment/0105/0778/749cb6fa-06c4-3bc3-be3b-d8422f738eb9.png[/img] 



<style type="text/css">
a[class^="column"]{
    background:red;
    }
a[href$="doc"]{
    background:green;
}
a[title*="box"]{
    background:blue;
}
</style>
</head> 
<body>
<a href="##" class="columnNews">背景红色</a>
<a href="##" class="columnVideo">背景红色</a>
<a href="##" class="columnAboutUs">背景红色</a><br/>
<a href="1.doc">背景绿色</a>
<a href="2.doc">背景绿色</a><br/>
<a href="##" title="this is a box">背景蓝色</a>
<a href="##" title="box1">背景蓝色</a>
<a href="##" title="two boxs">背景蓝色</a>
</body>
xiaochouyu0703
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
m0_53619602的博客
06-06 1194
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 效果图E[att="val"] 效果图： E[att^="val"] 效果图： E[att$="val"] 效果图： E[att*="val“] 效果图： 结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 E:firs...
CSS3新特性之新增的三大选择器
wutong_jun的博客
07-14 257
属性选择器、结构伪类选择器、伪元素选择器 ::before、::after nth-child`与 nth-of-type的区别
CSS3的新特性① -- 选择器
十八岁讨厌编程的博客
03-22 475
文章目录属性选择器结构伪类选择器nth-child（n）nth-child 和nth-of-type的区别总结伪元素选择器伪元素选择器使用场景场景一：伪元素字体图标 新增的CSS3特性有兼容性问题，ie9+才支持 CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 属性选择器 结构伪类选择器 伪元素选择器 属性选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 注意：类选择器、属性选择器、伪类选择器，权重为 10。 例如：
CSS3新特性——属性选择器，结构伪类选择器，伪类选择器
运算符重载之String
04-14 183
CSS3新特性 一. CSS3新增选择器 **1 . 属性选择器[ ]** ![属性选择器](https://img-blog.csdnimg.cn/20200414152358785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0...
CSS3新特性-选择器
wendZzoo的博客
09-29 363
属性选择器 HTML中可通过各种属性给元素增加很多附加信息。譬如，用id属性将不同div区分。CSS3新增的3个属性选择器使得属性选择器有了通配符的概念，也感觉像是正则表达式的样子。 E[att^="val"] E：选择匹配的元素E； att：元素E定义了属性att； ^：其属性值以val开头的任何字符串。 E[att$="val"] $：其属性值以val结尾的任何字符串。 E[at...
详解CSS3中属性选择器新增加的特性
01-21
零、概览CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]1.[class=a]只能匹配class=a的元素2.[class~=a]则可以匹配class=a、class=a b的元素3.[lang|=en]则可以匹配lang=en、lang=en-us的元素。...
front-end:front-end 前端相关文章
05-13
前端收集shine 主要汇集一些工作内容相关的案例或学习工具 基础 （基础） ...CSS.escape和CSS.supports()静态方法 处理css特殊器字符和判断浏览器是否支持某个css特性 文章 ECMAScript2017新特性 E
CSS基础知识.docx
07-23
8. 属性选择器（a[rel = "external"]) 9. 伪类选择器（a:hover, li:nth-child） 继承问题： * 可继承的样式：font-size, font-family, color, ul, li, dl, dd, dt * 不可继承的样式：border, padding, margin, ...
『豪横，让面试官无题可问』☛第二期-Css让人忽视的面试题—–猛男,你还记得吗？
01-08
6.谈谈你对相对定位、绝对定位、固定定位的理解7.CSS选择器有哪些？哪些属性可以继承？8.CSS3新增伪类有哪些并简要描述?9.谈谈你理解的优雅降级和渐进增强？10.style标签写在body前和body后的区别是什么？11.什么是...
CSS3中新增了3个选择器
weixin_30345055的博客
11-26 111
CSS3中新增了3个选择器：E[attr^="value"]——属性值以value开头E[attr$="value"]——属性值以value结尾E[attr*="value"]——属性值包含value选择href以.pdf结尾的代码示例html代码： <a target="_blank" href="http://www.xxx.com.cn/upload/201111161...
[教程] CSS3 选择器——属性选择器（一）
07-24 1068
上一篇在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 E[attr]：只使用属性名，但没有确定
CSS的常用属性（三）
weixin_30443731的博客
01-24 69
静态定位 position: static (默认) 标准流 绝对定位 position: absolute 特点： 元素使用绝对定位之后，不占据原来的位置（脱标） 元素使用绝对定位，位置是从浏览器出发 嵌套的盒子，父盒子没有使用定位，子盒子使用绝对定位，子盒子位置是从浏览器出发 嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素出发 行内元素使...
CSS3新增选择器及用法详细介绍
178技术
09-29 3703
目录 CSS属性选择器 E[att^=value]属性选择器 E[att$=value]属性选择器 E[att*=value]属性选择器 CSS3关系选择器 CSS3子代选择器(>) CSS3结构伪类选择器 :root选择器 :not选择器 :only-child选择器 :first-child和:last-child选择器 :nth-child(n)和:nth-last-child(n)选择器 :nth-of-type(n)和:nth-last-of-type(n)选择..
CSS3新增属性与选择器
CYL_2021的博客
03-22 443
1.CSS3选择器 1.1 属性选择器 选择符 简介 E[att] 选择具有att属性的E元素 E[att=“val”] 选择具有att属性且属性值等于val的E元素 E[att^=“val”] 匹配具有att属性，且值以val开头的E元素 E[att$=“val”] 匹配具有att属性，且值以val结束的E元素 E[att*=“val”] 匹配具有att属性，且值中含有val结束的E元素 1.2 结构伪类选择器 选择符 简介 E：first-child
CSS3新特性-属性选择器、结构伪类选择器、伪元素选择器
weixin_50119334的博客
11-07 279
CSS3新特性 ps:这些新特性都存在兼容性问题，基本都是IE9以上版本才支持 移动端支持优于PC端 新增选择器： 1.属性选择器（类选择器和属性选择器 伪类选择器权重相同） （1）利用属性选择器可以不用借助类或id选择器 例：input [values] { ....; } //选择出input中带有values属性的 （2）属性选择器还可以选择属性等于值的某些元素（重要） input [type=text]{ ...; } //选择处input中type值等于text的 （3）属性选择器可以选择以某
简单说一下CSS的position常用的三个属性：relative,absolute以及fixed,以及嵌套使用的一个常见情况
蘑菇猎手的专栏
06-01 7757
首先要清楚，position需要top,bottom,left,right来配合实现定位，当然根据实际情况，不必要把四个方向的定位全写出来。 举个例子。 position:absolute; top:10px; bottom:10px; left:10px right:10px 接下来就要分别介绍position属性的不嵌套使用（即该元素中没有子元素使用position），和
CSS3-新增属性选择器
月迷津渡丶的专栏
04-16 712
属性选择器早在CSS2中就被引入了，其主要作用就是为带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能
第36章 CSS3中新增的属性选择器
一直专注于互联网
12-08 154
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; /* [id*=section1]{ background:#0C0;} [id*=section2]{ backgroun
css3选择器-属性选择器
最新发布
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值