在有些标记语言中，不能使用类名和id选择器，于是css2引入了属性选择器。
3.属性选择器
a)根据是否存在该属性来选择
如果希望选择有某个属性的元素，例如要选择有class属性的所有h1元素，使其文本为银色，可以这样写：
/*根据单个属性来选择*/
h1[class]{ ???color:sliver;}
/*还可以根据多个属性来选择*/
h1[class][id]{
color:yellow;
}
b)根据具体属性值来选择
<style>
/*也可以利用多个属性值来选择,第二段变成了红色*/
p[class=‘one‘][alt=‘two‘]{
color:red;
}
</style>
<body>
<p class=‘one‘>一个class属性</p>
<p class=‘one‘ alt=‘two‘>一个class属性加上一个alt属性</p>
</body>
c)根据部分属性值来选择
~=：如果属性能够接受词列表，可以根据其中的任意一个词进行选择。
*=word1：选择属性值中包含word1的所有元素
^=start：选择属性值中以start开头的所有元素
$=end：选择属性值中以end结尾的所有元素
<style> ???p[class~=‘bar‘]{ ???????color:red; ???} ???p[class*=‘wo‘]{ ???????color:blue; ???} ???p[class^=‘th‘]{ ???????color:yellow; ???} ???p[class$=‘ur‘]{ ???????color:purple; ???}</style><body> ???????<p class=‘one bar‘>one</p><!--红色--> ???????<p class=‘one bard‘>与上一段作为对比</p><!--默认颜色--> ???????<p class=‘two ok‘>two</p><!--蓝色--> ???????<p class=‘three‘>three</p><!--黄色--> ???????<p class=‘four‘>four</p><!--紫色--></body>d)特定属性选择器
直接看例子：
/*选择src属性等于figure或者以figure-开头的元素*/img[src|=‘figure‘]{ ???border:1px;}4.基于文档结构的选择器
a)后代选择器——使用空格分隔：
选择h1中的所有em元素：
h1 em{ ???color:gray;}
/*当然并不限于两个选择器，例如：*/
/*将p标签下的所有span标签下的所有em元素的文本颜色设置为灰色*/
p span em{
color:em
}b)子元素选择器——使用>号分隔
选择h1的子元素而不是后代元素
<style> ???h1 > em{ ???????color:red; ???}</style><body> ???????<h1>sjfsl<span><em>不会被选择到</em></span><em>会被选择到</em></h1></body>c)相邻兄弟（不能是堂兄弟，即拥有相同的父元素）选择器——使用＋号分隔
<style> ???p + h1{ ???????color:red; ???}</style><body> ???<p>第一段</p> ???<h1>第二段</h1><!--颜色变红--> ???<h1>第三段</h1><!--颜色不变-->
</body>css选择器(2)——属性选择器和基于元素结构关系的选择器
原文地址：https://www.cnblogs.com/goforwards/p/8457123.html