CSS选择器比较

[attribute^=value]和[attribute*=value]和[attribute$=value]

[attribute^=value]

a[class^=“a-icon”] (demo)

	<style>
        a[class^="a-icon"]{
            color:red;
        }
    </style>
	<div>
        <a src="./pic.png" class="a-icon">12</a>
        <a src="./pic.png" class="a-iconabc">12</a>
        <a src="./pic.png" class="abca-icon">12</a>    <!--未变色-->
        <a src="./pic.png" class="a-asdicon">12</a>    <!--未变色-->
    </div>

a[class^=“a-icon”] (效果)

a[class^=“a-icon”] (小结)

必须从头开始匹配子串

[attribute*=value]

a[class*=“a-icon”] (demo)

	<style>
        a[class*="a-icon"]{
            color:red;
        }
    </style>
	<div>
        <a src="./pic.png" class="a-icon">12</a>
        <a src="./pic.png" class="a-iconabc">12</a>
        <a src="./pic.png" class="abca-icon">12</a>
        <a src="./pic.png" class="a-asdicon">12</a>    <!--未变色-->
    </div>

a[class*=“a-icon”] (效果)

a[class*=“a-icon”] (小结)

匹配子串即可，不论从头号开始匹配还是中途开始匹配

[attribute$=value]

a[class$=“a-icon”] (demo)

	<style>
        a[class$="a-icon"]{
            color:red;
        }
    </style>
	<div>
        <a src="./pic.png" class="a-icon">12</a>
        <a src="./pic.png" class="a-iconabc">12</a>    <!--未变色-->
        <a src="./pic.png" class="abca-icon">12</a>
        <a src="./pic.png" class="a-asdicon">12</a>    <!--未变色-->
    </div>

a[class$=“a-icon”] (效果)

a[class$=“a-icon”] (小结)

必须在结尾处匹配到子串

小结

[attribute$=value] 末尾匹配
[attribute*=value] 任意位匹配
[attribute^=value] 起始匹配

elements1 elements2 ，elements1>elements2， elements1 + elements2

elements1 elements2

div a（demo）

	<style>
	div a{
            color: red
    }
	</style>
	<div>
		<!--全部变色-->
        <a src="./pic.png" class="a-icon">12</a>
        <a src="./pic.png" class="a-iconabc">12</a>
        <div>
            <span><a>78</a></span>
            <a>56</a>
        </div>
        <a src="./pic.png" class="abca-icon">12</a>
        <a src="./pic.png" class="a-asdicon">12</a>
    </div>

div a（效果）

div a小结

div下的a标签，不管距离div多少级，全部被选中

elements1>elements2

div>a（demo）

	<style>
	div>a{
            color: red
    }
	</style>
	<div>
        <a src="./pic.png" class="a-icon">12</a>
        <a src="./pic.png" class="a-iconabc">12</a>
        <div>
            <span><a>78</a></span>    <!--不变色-->
            <a>56</a>
        </div>
        <a src="./pic.png" class="abca-icon">12</a>
        <a src="./pic.png" class="a-asdicon">12</a>
    </div>

div>a（效果）

div>a小结

div下的直接子元素a标签才被选中，嵌套多级标签时，对a的选中无效

elements1+elements2

div+a（demo）

	<style>
	div+a{
            color: red
    }
	</style>
	<div>
        <a src="./pic.png" class="a-icon">12</a>
        <a src="./pic.png" class="a-iconabc">12</a>
        <div>
            <span><a>78</a></span>
            <a>56</a>
        </div>
        <h1>77</h1>
        <a src="./pic.png" class="abca-icon">12</a>
        <div></div>
        <a src="./pic.png" class="a-asdicon">12</a>     <!--变色-->
        <a src="./pic.png" class="a-asdicon">12</a>
    </div>

div+a（效果）

div+a小结

紧跟div后的第一个a标签才被选中，紧跟div后却不是a标签的无效

小结

div a （div下不论多少级均被选中）
div>a （div下直接子集才被选中）
div+a （紧跟div后的第一个a标签才被选中）