交集选择器

紧紧挨着

<template><div><p class="btn">Click me</p><button class="btn" ref="myButton" @click="handleClick">Click me</button></div>
</template>
<style>
button.btn {color: red;
}
</style>

并集选择器

有逗号

<template><div><div class="son1">son1</div><div class="son2">son2</div></div>
</template>
<style>
.son1,
.son2 {color: red;
}
</style>

子孙选择器

有空格

<template><div class="father"><div>son1<div class="cc">孙子<div class="cc">重孙子</div></div></div><div class="cc">son2</div></div>
</template>
<style>
.father .cc {color: red;
}
</style>

子代选择器

用> 隔开

<template><div class="father"><div>son1<div class="cc">孙子<div class="cc">重孙子</div></div></div><div class="cc">son2</div></div>
</template>
<style>
.father > .cc {color: rgb(107, 116, 230);
}
</style>

兄弟选择器

用+隔开，且只看后面的，忽略前面的

<template><div class="app"><p>1111111111</p><div class="son">son</div><p>2222222222</p></div>
</template>
<style>
.son + p {color: aqua;
}
</style>

属性选择器

[属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素
[属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素
[属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素
[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素

[title = "ww"]{color:red;
}