第36章 CSS3中新增的属性选择器

最新推荐文章于 2024-07-16 09:28:46 发布
最新推荐文章于 2024-07-16 09:28:46 发布
阅读量155 收藏
点赞数
分类专栏： 阅-H52 文章标签： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_17658/article/details/82644670
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
[id*=section1]{ background:#0C0;}
[id*=section2]{ background:#9C0;}
[id*=section1-1]{ background:#CF0;}
*/
[id*=section]{ background:#F03;}
[id^=s]{ background:#0Fd;}
[id^=b]{ background:#00C;}
[id*=n]{ background:#0F0;}
[id$=c]{ background:#009;}
[id$=\-1]{ background:#FF0;}
[id$=_2]{ background:#F03;}
</style>
</head>
<body>
<h1>CSS3中的属性选择器</h1>
<div id="section1a">section1a</div>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bsection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
<div id="section2_2">section2_2</div>
<div id="section2_2">section2_2</div>
<div id="section2_2">section2_2</div>
<div id="section2_3">section2-3</div>
</body>
</html>

 效果图：

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a[href$=php]:after{
	content:"[网站链接]";
	color:#9F3;
}
a[href$=png]:after{
	content:"[图片链接]";
	color:#3F6;	
}
</style>
</head>
<body>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
</body>
</html>

效果图：

 

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3新增属性与选择器
CYL_2021的博客
03-22 455
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
HTML5新增的3种选择器
liuhongyu666的博客
09-10 1090
引言 在HTML5中，DOM拓展了querySelectorAll()、querySelector()和matchesSelector()这3种方法，通过CSS选择符查询DOM文档取得元素的引用的功能变成了原生的API，解析和树查询操作在浏览器内部通过编译后的代码来完成，极大地改善了性能。本文将详细介绍html5新增的3种selector方法以及和ES3中选择器的对比。
前端知识学习-----CSS3新增选择器
kf_qyl的博客
01-08 5271
CSS常见的选择器有： 通配符选择器, 元素选择器，类选择器， ID选择器，后代选择器 CSS3新增基本选择器有： 子元素选择器，相邻兄弟选择器，通用兄弟选择器，群组选择器 基本选择器—-子元素选择器 概念：子元素选择器只能选择某元素的子元素 语法格式： 父元素 > 子元素 (father > children ) 兼容性： IE8+，FireFox，Chrome，Saf
html5新增选择器,CSS3新增属性选择器
weixin_36429702的博客
06-03 176
CSS选择器大致可分为三类：基本选择器、属性选择器和伪类选择器。大家都知道，选择器主要是用来确定html的树形结构中的DOM元素节点。每个学习使用CSS的人都是从基本选择器开始的，自然而然就运用自如了吧，像通配符选择器(＊)、类选择器(.className)、ID选择器(#IDName)、元素选择器(ul、li等)等等，这里就不赘述了。而属性选择器早在CSS2中就被引入了，其主要作用就是通过选择带...
CSS3的新增选择器示例-属性选择器
07-09 1348
一. CSS3概述css3是css2的升级版本，新增了许多特性，弥补了css2的众多不足之处。css3许多查找元素的方法，极大的提高了查找元素的效率和精准度。css3目前在市场上，对pc端的支持很差，有些需要添加私有前缀但在移动端的支持要优于pc端 二. 选择器1. 属性选择器 css3中对属性选择器元素元素的查找提供了五种形式 1.1 E[attr] 表示存在attr属性即可找到<!DOCT
HTML5+CSS3(容易).pdf
11-28
CSS3还引入了新的选择器，如类选择器（`.class`）、ID选择器（`#id`）和伪类选择器（`:hover`, `:active`, `:focus`等），这些增强了样式规则的灵活性和精准性。在定义列表`<dl>`中，`<dt>`用于定义名词，`<dd>`则...
前端大厂最新面试题-css.docx
06-06
54. CSS中的类选择器和ID选择器的区别是，类选择器可以应用于多个元素，而ID选择器只能应用于一个元素。 55. 伪元素::before和:before的区别是，::before是CSS3中的新语法，而:before是CSS2中的老语法。 56. 伪类:...
灰色宽屏三栏简洁的博客html5模板4424_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-05
CSS3提供了许多新的选择器和模块，如媒体查询（Media Queries）就是实现响应式设计的关键，它允许开发者定义不同屏幕尺寸下的样式规则，从而实现跨设备的兼容性。此外，CSS3还带来了过渡（Transitions）、动画...
第6章 CSS3颜色特性
itzyjr的专栏
05-29 246
㊀网页中的色彩特性 在Web页面的设计中，颜色主要运用16进制数值的表示方法，为了用HTML表现RGB颜色，使用十进制0~255，对应十六进制00~FF。在HTML编码中“000000”就是指R、G、B都没有，就是0状态，也就是黑色。相反“FFFFFF”就是R、G、B都是255，也就是白色。 为了解决Web调色板的问题，人们一致通过了一组在所有浏览器中都类似的Web安全颜色。这些颜色使用了一种颜色模型，在这个模型中，可以使用相应的十六进制值00、33、66、99、CC和FF来表达三原色(RGB)中的每一
CSS选择器（包括CSS3新增特性）
weixin_45790634的博客
06-11 322
一、HTML标签的id和class属性和HTML标签的关系 •id属性值和HTML标签的关系：就像身份证号码和我们之间的关系差不多，具有唯一性，也就是说在同一个页面中相同的id只能出现一次。 •class属性值和HTML标签的关系：就像名字和我们之间的关系差不多，属性不具有唯一性，我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class的元素具有相同的CSS样式。 •id就像你的身份证号，而class就像你的名字，但是都能通过他们来联系到你。 二、选择器 •..
CSS3新增选择器及新增属性
weixin_42617917的博客
09-24 315
CSS常见选择器： 通配符选择器,* 元素选择器：div 类选择器，.class ID选择器，#id 后代选择器 CSS伪类 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ ...
css3新特性-新增3个属性选择器
wangjingyi
01-09 243
CSS3在CSS2的基础上对属性选择器进行了扩展,使得属性选择器有了通配符的概念。 [img]http://dl2.iteye.com/upload/attachment/0105/0778/749cb6fa-06c4-3bc3-be3b-d8422f738eb9.png[/img] [code="html"] a[class^="column"]{ backgro...
css3第二课时！css3新增属性选择器！
csdncsdn9876的博客
06-15 249
css3属性选择器，说的通俗一点就是根据元素的属性来选取元素！在css3中新增的属性选择器，如下表所示： 通过上面的表格我们可以看到，对于某个元素的属性，我们可以通过^=来判断该属性是不是以某个字符串开头；通过$=来判断该属性是不是以某个字符床结尾；通过*=来判断是不是包含某个字符串。满足条件的元素，将会被选中。<!DOCTYPE html> <html> <head> <meta
css3新增选择器+属性
weixin_45457515的博客
08-03 386
1：c3属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。 chrome 、Safiri 浏览器 ： -webkit- FireFox : -moz- IE: -ms- opera : -o- 先写标准的CSS3属性,在写css3属性 2：c3选择器 (1)毗邻选择 和兄弟选择器 /* E1 + E2 毗...
ns3-gym入门（二）：linear-mesh例子详解
zoe2222226666的博客
07-15 892
学习ns3-gym中关于IEEE 802.11网状网络中控制随机接入的例子linear-mesh
喰星云·数字化餐饮服务系统 多处 SQL注入漏洞复现
0xSec
07-14 481
喰星云·数字化餐饮服务系统 not_out_depot.php、shelflife.php、not_finish.php、stock.php等多处接口存在SQL注入漏洞，未经身份验证的远程攻击者除了可以利用SQL注入漏洞获取数据库中的信息（例如，管理员后台密码、站点的用户个人信息）之外，甚至在高权限的情况可向服务器中写入木马，进一步获取服务器系统权限。
【框架】PHP框架详解-symfony框架
最新发布
Xiaoxin的博客
07-16 823
1. 起源与开发者Symfony由SensioLabs（现为Symfony公司）开发，最初由Fabien Potencier于2005年创建。Symfony框架自发布以来，经历了多个版本的迭代，每个版本都引入了新的特性和改进，以满足不断变化的Web开发需求。2. 设计理念Symfony框架遵循MVC（Model-View-Controller）设计模式，将应用程序分为模型、视图和控制器三个核心部分，有助于实现代码的分离和重用。
css3选择器-属性选择器
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值