交集选择器
紧紧挨着
<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;
}
