css3中追加的三种选择器

最新推荐文章于 2021-08-04 00:08:08 发布
最新推荐文章于 2021-08-04 00:08:08 发布
阅读量153 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/comefuture/p/8305989.html
版权
1.css3追加的3中选择器：[att*=val],[att^=val],[att$=val]

2.[att*=val]
*是通配符，表示只要字符串中出现了这个val的（哪怕val只是一部分），如这个例子：[class*=div]:表示凡是div这个类都会出现效果（包含即可，不论是sdfas div还是 divsfas）。
比如下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
[class*=div]{
    color:#00F;}
</style>

</head>

<body>
<div class=div1>
i'm a student
</div>
<div class=div2>
i'm a student
</div>
<div class=div3>
i'm a student
</div>
<div class=di>
i'm a student
</div>
</body>
</html>


3.[att^=val]:表示首字母串是val的会出现效果，比如下面的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
[class^=div]{
    color:#0F0}
</style>

</head>

<body>
<div class=1div1>
i'm a student
</div>
<div class=2div2>
i'm a student
</div>
<div class=div3>
i'm a student
</div>
<div class=di>
i'm a student
</div>
</body>
</html>

4.[att$=val]：表示结束字母串是val的出现效果，如下面这个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
[class$=i]{
    color:#0F0}
</style>

</head>

<body>
<div class=1div1>
i'm a student
</div>
<div class=2div2>
i'm a student
</div>
<div class=div3>
i'm a student
</div>
<div class=di>
i'm a student
</div>
</body>
</html>

转载于:https://www.cnblogs.com/comefuture/p/8305989.html

weixin_34072637
关注
【37】CSS3（1）—— 新增选择器④伪元素选择器
倏存的博客
04-08 763
1.新增伪元素2. h5 写法和传统写法区别3. 伪元素的注意事项4.举例
css 选父元素,CSS中模拟父元素选择器
weixin_30750685的博客
08-03 7077
很多情况下，我们需要找到父元素，但可惜的是css中并没有这样的一个选择器。至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章。简单来说这个实现并不是真正的父元素选择器，只是利用其它思路来实现相同效果罢了。HTML：ppppppppCSS：div,p{margin:0;padding:0;}#box{width:300px;height:300px;position:relative;}#...
CSS3 新增选择器
小马过河
08-18 847
结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一...
css选择器补充
CSDN_1999的博客
12-21 207
前面文章总结了常用的8种选择器，今天再来补充5中选择器，其中一部分是css3中新加入的。 1、相邻选择器 E+F{ sRules } 相邻选择符只会命中符合条件的相邻的兄弟元素。 2、兄弟选择器 E~F{ sRules } 兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。 <style> /* 相邻选择符(E+F) ...
CSS的三种导入方式
weixin_45880263的博客
05-09 338
内部导入 <html> <head> <style> 选择器 </style> </head> <body></body> </html> 外部导入 <html> <head> <link rel="stylesheet" href="XXX.css的相对路径"> </head> <body></body&gt.
css3 新添加的选择器
weixin_30781775的博客
07-20 76
E~F:选择E元素后面的所有兄弟元素F。 E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E元素。 E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。 E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。 E:not()：匹配不含有s选择符的元素E。 E:root：匹配E元素在文...
css3新增加的选择器
weixin_30929011的博客
12-28 70
一、属性选择器： E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字母c开头的E[attr$=b] 以这个字母b结尾的E[attr*=a] 只要包含a这个字母就行E[attr|=z] 只要以字母z-开头的或者就是字母z的 二、结构性伪类选择器： E:nth-child(n) 第n个子节...
四种css 伪类选择器
12-13
X:after  Example Source Code ：.clearfix:after {content: “”;...:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影，点击这里查看。X:hover  Example S
Day 3:CSS选择器查找元素
LSMSMD0526的博客
07-21 3184
CSS选择器查找元素一、哪些情况不能用ID选择器二、CSS选择器语法三、ID选择器查找元素四、class选择器查找元素五、通配符定位六、查找子节点 一、哪些情况不能用ID选择器 元素的ID不唯一，或者ID是动态变化的 name以及linktext属性值不唯一 如果满足上述条件，则不能用ID选择器来定位元素，就需要依靠xpath或CSS来定位元素了 PS：不管使用什么方式来查找元素（比如id、name、xpath、CSS等），都需要确保页面上查找出来的元素的唯一性，应该只找到一个匹配的node（如何查看是
CSS选择器篇 一
限定小码农的博客
03-08 467
一、通配符选择器 1.通配符选择器常用 ‘*’号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。 2.基本语法格式：*{ 属性1：属性值1；属性2：属性值2；} 例1：使用该选择器定义样式，清除所有HTML标记的默认边距。 *{ margin：0； /*定义外边距*/ padding：0； /*定义内边距*/ } 说明:实际开发中不建议使用通配符选择器，因为它设...
CSS知识补充-选择器
wendZzoo的博客
08-16 346
目录 一、CSS 二、CSS引用  三、选择器 1、简单的选择器 2、复杂选择器 （1）父子选择器（派生选择器） （2）直接子元素选择器 （3）并列选择器 （4）分组选择器 3、权重计算 CSS相关知识复习时，深究了一些发现自己知道的还是很少，之前只是会用却不了解所用的到底是什么，学海无涯。 一、CSS 首先第一点还是要知道一直说的CSS全称是什么，即cascading ...
第四课补充 选择器整理
xiaoyuxiaoning的博客
02-22 99
选择器 备注 标签选择器 p h1~h6等等 class选择器 . id选择器 # 组合选择器 , 后代选择器 空格space 子代选择器 &amp;gt; 通配选择器 * 属性选择器 [ ] 伪类选择器 : 通配选择器 &amp;lt;style&amp;gt; *{ margin:0; padding:0;
CSS3的新增选择器示例-属性选择器
07-09 1368
一. CSS3概述css3是css2的升级版本，新增了许多特性，弥补了css2的众多不足之处。css3许多查找元素的方法，极大的提高了查找元素的效率和精准度。css3目前在市场上，对pc端的支持很差，有些需要添加私有前缀但在移动端的支持要优于pc端 二. 选择器1. 属性选择器 css3中对属性选择器元素元素的查找提供了五种形式 1.1 E[attr] 表示存在attr属性即可找到<!DOCT
CSS-追加内容before、after
Vincent
06-03 1405
插入图像文件 h1.new:after{      content: url("mark_new.png"); } 插入编号 h1:before{      /* 使用自增计数器 */      content: counter(mycounter); } h1{      /* 指定自增计数器 */      counter-increment: mycounter
类选择器获取动态加载的元素的方法
Add_a_cat的博客
06-07 1245
在document 加载完成后才进行的渲染, 如果不确定可以尝试查看源代码能否找到对应元素, 解决办法可以通过 setTimeout 来延迟获取,或者 setInterval 抓取 在油猴上尝试了很多方法 包括： // @run-at document-end document.onload= function() {} $(document).ready(func...
css一个标签添加多个class的样式顺序问题
热门推荐
ununie的博客
01-21 1万+
在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下： /*div标签原有样式*/ .nav&gt;.navlogin, .navregist { width: 230px; margin: 0 10px; overflow: ...
css 字符型变量,CSS变量和字符串连接
weixin_39949386的博客
08-04 4183
我试图使用CSS变量来生成动态路径。CSS变量和字符串连接例：:root {--fonts-path: "/path/to/font";}@font-face {font-family: "FontName";src: url(var(--fonts-path) + "/FontName-Light.woff") format('woff');font-weight: 100;}html {fon...
HTML5+CSS3新增内容总结！！！！！绝对干货
oschina_39816388的博客
10-13 724
说到H5C3会不会觉得东西好多啊，今天就整理了一份总结性的内容； CSS3选择器有哪些？ 答：属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些？ 答：1.颜色：新增RGBA，HSLA模式 2. 文字阴影（text-shadow、） 3. 边框： 圆角（border-radius）边框阴影： box-shadow 4. 盒子模型：box-sizing 5. 背景：back...
CSS3——类选择器示例1
御承扬的博客
10-21 236
CSS3示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器示例1</title> <style type="text/css"> body{ te...
CSS基础教程：选择器与样式规则解析
"此资源主要介绍了CSS的基本语法，包括如何在HTML文档中声明CSS样式，以及一些常见的CSS选择器和规则的使用。同时，提到了Java中的StringBuffer类的一些操作方法，如设置长度、插入字符、追加内容等。此外，还提及了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值