css3中追加的三种选择器
来源：互联网 发布：图纸设计软件下载 编辑：程序博客网 时间：2024/05/03 17:45
1.css3追加的3中选择器：[att*=val],[att^=val],[att$=val]
2.[att*=val]
*是通配符，表示只要字符串中出现了这个val的（哪怕val只是一部分），如这个例子：[class*=div]:表示凡是div这个类都会出现效果（包含即可，不论是sdfasdiv还是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>
0 0
- css3中追加的三种选择器
- css3中选择器为不同链接追加不同图标
- CSS3中新增的选择器
- 嵌入css 的三种方式和css3 选择器
- css3中属性选择器的使用
- CSS3选择器中容易误解的坑
- css3中常见的30个选择器
- HTML5中CSS3的属性选择器
- 追加文件内容的三种方法
- css3常用的选择器
- CSS3的新增选择器
- css3的选择器
- 神通广大的CSS3选择器
- css3-新增的选择器
- css3新增的选择器
- css3的选择器
- CSS3的选择器
- css3的选择器
- JQuery实现表格复选框
- 【JZOJ 4965】 Equation
- 476. Number Complement [LeetCode]
- The connection to adb is down, and a severe error has occured.
- 【JZOJ 4964】 Rhyme
- css3中追加的三种选择器
- Servlet路径配置问题,服务器与浏览器行为
- 【JLOI2015】bzoj4004 装备购买
- jquery学习笔记
- 基础生存技能：搜索引擎
- android-baidu SDK使用
- HTML+CSS基础知识巩固参考页面
- 冒泡排序法
- 集成学习---AdaBoost算法
