css复合选择器

交集选择器

紧紧挨着

<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>
1
2
3
4
5
6
7
8
9
10
11

并集选择器

有逗号

<template>
  <div>
    <div class="son1">son1</div>
    <div class="son2">son2</div>
  </div>
</template>
<style>
.son1,
.son2 {
  color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

子孙选择器

有空格

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

子代选择器

用> 隔开

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

兄弟选择器

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

<template>
  <div class="app">
    <p>1111111111</p>
    <div class="son">son</div>
    <p>2222222222</p>
  </div>
</template>
<style>
.son + p {
  color: aqua;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

属性选择器

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

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