关于介绍属性选择器之前，复习一下前面的内容
目录
第四种，标签【属性|=值】{} 属性里面以这个值开头 这个必须是整个单词
三，选择器总结
一，复习
关于选择器的分类，有五大类
1，基础选择器 （内联大于id大于类大于元素）
1，全局选择器 （*{}，通常用作初始化）
2，id选择器 （#id名称{}）
3，类选择器 （.类名{}）
4，元素选择器 （元素名{}）
5，合并选择器 （元素1，元素2{}）
2，关系选择器
1，后代选择器（ 父代 子代{}） 无限递归只要是后代都生效
2，子代选择器 （父代>子代{}） 只会递归一层 本身不生效
3，相邻兄弟选择器（大哥+二哥{}） 只是相邻的一层生效
4，通用兄弟选择器 （大哥~二哥{}） 只要是相邻的都生效
3，伪类选择器
1，鼠标点击的四种状态 。未点击link，点击之后visited，鼠标悬停hover，鼠标点击不松手 active
2，列表的自定义选择，列首（first-child），列尾（last-child），偶数（nth-child（odd）），奇数（nth-child（even）），某的倍数（nth-child（4n）），或者定义指定数（nth-child（指定的数值））
3，容器之后一个就生效（olny-child） ，容器除了她其他都生效（（not（p））），容器为空的时候生效（empty）
4，当元素为焦点的时候，生效。focus
5，复选和多选增强效果 checed
4，伪元素（对象）选择器
before 和alter 用于在前面和后面插入内容
5，属性选择器
属性选择器
1，标签[属性]{} 对其添加效果
2，标签[属性=值]{} 对其添加效果
3， 标签【属性~=值】{} 属性里面包括这个值
4，标签【属性|=值】{} 属性里面以这个值开头 这个必须是整个单词
5，标签【属性$=值】{} 属性里面以这个值结尾
6，标签【属性^=值】{} 属性里面以这个值开头
7,标签【属性*=值】{} 属性只要包含了这个值 就生效
具体效果我们来看看吧。
二，属性选择器
首先这是body效果
<body>
<a href="#" target="_blank">带有targer属性</a>
<a href="#">带有targer属性</a>
<!--属性和属性值配合起来处理-->
<a href="#" target="a2">带有targer属性a2</a>
<a href="#" target="b 2">我有target属性 我有b</a>
<a href="#" target="b 2">我有target属性 我有b</a>
<a href="#" target="a1 b 2">我有target属性 我有b 我有a1</a>
<p class="a1">我有类哦</p>
<p >我没有类</p>
<span class="a1-1">我是一个文本我是a1开头</span>
<!--看通过 |= 这a11就不会显示了 如果想要a11也显示 就^= 这样就以某个单词开头-->
<span class="a11-3">我是一个文本 我是a11开头</span>
<span class="a1-3">我是一个文本 我是a1开头</span>
<span class="b1-2">我是一个文本</span>
<!--整个是测试以某个单词结尾的-->
<h1 class="test">我是一个标题</h1>
<h1 class="tes1">我是一个标题</h1>
<h1 class="tes2">我是一个标题</h1>
<h1 class="tes3">我是一个标题</h1>
<h1 class="tex3">我是一个标题</h1>
</body>第一种，标签【属性】{}对其添加效果
/*<!-- 当具有target属性的时候 这个就生效-->*/
a[target]{
color: #ffcccc;
}
/*当有属性的时候 指定属性产生一些效果*/
p[class]{
color: #fa4d25;
}当元素属性有target或者class的时候，就会都生效被赋予这个效果
第二种，标签【属性=值】{}对其添加效果
/*我们自定义了一个值 当这个值等于的时候 我们使其生效*/
a[target=a2]{
color: red;
}
/*但属性值包含b的时候 这个就生效*/
a[target~=b]{
color: yellow;
}第三种， 标签【属性~=值】{} 属性里面包括这个值
/*但属性值包含b的时候 这个就生效*/
a[target~=b]{
color: yellow;
}第四种，标签【属性|=值】{} 属性里面以这个值开头 这个必须是整个单词
/* |是表示以某个字符开头的时候 单词必须是整个单词*/
span[class |= a1]{
color: #2f0099;
}
/*同上也是*/
span[class |= b1]{
font-size: 50px;
}第五种，标签【属性^=值】{} 属性里面以这个值开头
/* ^= 某个字符开头的即可 不需要整个单词*/
span[class ^= a]{
font-size: 20px;
color: #4135fa;
}第六种，标签【属性$=值】{} 属性里面以这个值结尾
/*当标题结尾为t的时候 生效*/
h1[class $= t]{
color: #fa4d15;
}第七种，标签【属性*=值】{} 标签里面只要有这个值就生效
/* *= 只要包含这个值就生效*/
/*只要包含s的 就缩小字体*/
h1[class *= s]{
font-size: 12px;
}完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<!-- 总结
选择器分类
1，基础选择器： 全局选择器 元素选择器 类选择器 id选择器 合并选择器
2，关系选择器 后代选择器 子代选择器 相邻兄弟选择器 通用兄弟选择器
3，伪类选择器
鼠标点击状态选择器（4个状态）（爱恨离别 link visited hover active）
让列表中任何一个值 想选谁就选谁（first-child）
当容器只有以一个值的时候就生效的选择器 only-child
当容器除了他其他都生效的选择器 not（她）
当标签为空的时候，就生效的选择器 empty
当标签被获得焦点，就触发各种自定义特效的选择器 focus
作为单选和复选 修改样式的选择器 checked
4，伪对象（元素）选择器 befor 和alter 可以给列表或者系列元素前后添加内容 特效等等
5，属性选择器
属性选择器
1，标签[属性]{} 对其添加效果
2，标签[属性=值]{} 对其添加效果
3， 标签【属性~=值】{} 属性里面包括这个值
4，标签【属性|=值】{} 属性里面以这个值开头 这个必须是整个单词
5，标签【属性$=值】{} 属性里面以这个值结尾
6，标签【属性^=值】{} 属性里面以这个值开头
7,标签【属性*=值】{} 属性只要包含了这个值 就生效
-->
<style>
/*<!-- 当具有target属性的时候 这个就生效-->*/
a[target]{
color: #ffcccc;
}
/*当有属性的时候 指定属性产生一些效果*/
p[class]{
color: #fa4d25;
}
/*我们自定义了一个值 当这个值等于的时候 我们使其生效*/
a[target=a2]{
color: red;
}
/*但属性值包含b的时候 这个就生效*/
a[target~=b]{
color: yellow;
}
/* |是表示以某个字符开头的时候 单词必须是整个单词*/
span[class |= a1]{
color: #2f0099;
}
/*同上也是*/
span[class |= b1]{
font-size: 50px;
}
/* ^= 某个字符开头的即可 不需要整个单词*/
span[class ^= a]{
font-size: 20px;
color: #4135fa;
}
/*当标题结尾为t的时候 生效*/
h1[class $= t]{
color: #fa4d15;
}
/* *= 只要包含这个值就生效*/
/*只要包含s的 就缩小字体*/
h1[class *= s]{
font-size: 12px;
}
</style>
</head>
<body>
<a href="#" target="_blank">带有targer属性</a>
<a href="#">带有targer属性</a>
<!--属性和属性值配合起来处理-->
<a href="#" target="a2">带有targer属性a2</a>
<a href="#" target="b 2">我有target属性 我有b</a>
<a href="#" target="b 2">我有target属性 我有b</a>
<a href="#" target="a1 b 2">我有target属性 我有b 我有a1</a>
<p class="a1">我有类哦</p>
<p >我没有类</p>
<span class="a1-1">我是一个文本我是a1开头</span>
<!--看通过 |= 这a11就不会显示了 如果想要a11也显示 就^= 这样就以某个单词开头-->
<span class="a11-3">我是一个文本 我是a11开头</span>
<span class="a1-3">我是一个文本 我是a1开头</span>
<span class="b1-2">我是一个文本</span>
<!--整个是测试以某个单词结尾的-->
<h1 class="test">我是一个标题</h1>
<h1 class="tes1">我是一个标题</h1>
<h1 class="tes2">我是一个标题</h1>
<h1 class="tes3">我是一个标题</h1>
<h1 class="tex3">我是一个标题</h1>
</body>
</html>
三，选择器总结
1，基础选择器（全局*， 元素， id#， 类.， 合并，）
2，关系选择器（后代空格，子代大于，相邻兄弟加号，通用兄弟波浪号）
3，伪类选择器（鼠标的四种状态爱恨类别（link，visted，hover，active），列表的多种选择（first-child，last-child，nth-child（n/odd/even）），容器内为空（empty）/唯一（only-child）/除了某个（not（元素）），元素为焦点的时候（focus），多选和复选增强（checked））
4，伪元素选择器 开头before和结尾alter
5，属性选择器
元素【属性=值】当属性等于值的时候生效
元素【属性】 当元素有这个属性的时候生效
元素【属性^=值】 以这个值开头
元素【属性|=值】 以这个值的这个单词开头
元素【属性$=值】 以这个值结尾
元素【属性*=值】 所有值包含这个字母的生效 和【属性~=值】 差不多
872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
