博客

css的属性选择器

选择器参考手册


1.手册中所述的属性选择器说明：

2.vue组件style标签中使用scoped之后，生成的HTML结构



我们可以发现组件在使用了scope之后的渲染结果，该组件模板中定义的所有标签都带上了data-v-xxxxxxx=””的属性，但要注意的是，我们的子组件el-dialog内部定义的模板渲染的标签是不会带上这个属性的。

3.vue组件style标签中使用scoped之后，渲染生成的style标签内的样式

<style type="text/css">@charset "UTF-8";
.dialog-select .el-row[data-v-71c0b052] {
  margin-bottom: 20px;
}
.dialog-select .el-row[data-v-71c0b052]:last-child {
    margin-bottom: 0;
}
.dialog-select .el-col[data-v-71c0b052] {
}
.dialog-select .el-col div[data-v-71c0b052] {
    background: #d3dce6;
    min-height: 36px;
    border-radius: 4px;
}
.dialog-select .el-col[data-v-71c0b052]:nth-child(even) {
}
.dialog-select .el-col:nth-child(even) div[data-v-71c0b052] {
      background: #d3dce6;
      min-height: 36px;
      border-radius: 0;
}
</style>

我们可以发现，在使用scoped之后，我们定义的所有类名都会带上属性选择器，而且和HTML结构中的data-xxxxxx属性一致。

根据属性选择器的匹配规则，这样该样式就会作用在对应的带有data-v-xxxx属性的HTML结构上。

注意的部分:父子组件scoped

1.父组件无scoped，子组件带有scoped，父组件样式不带属性选择器，子组件样式带有属性选择器，无法层叠扩展样式类。

2.父组件有scoped属性，子组件无，父组件样式带属性选择器但子组件渲染生成的HTML结构中不带data-v-xxxx属性。

这里可使用scoped穿透(属性选择器前移)解决，参考

scoped穿透示例


3.父子组件都有scoped，父组件样式带属性选择器和子组件渲染生成的HTML结构中的唯一属性不一致导致匹配失败。

个人总结，所有组件尽量都使用scoped，但会被复用的组件并且需要保持内部样式可层叠时不要使用scoped（如第三方框架element-ui等提供的子组件）。