Day 08：深仍可测的元件样式－Deep Selectors

成功渲染出 BootstrapVue Navbar 元件之後，接着来将预设样式改成自己喜欢的专案色调和排版吧！依据文件介绍，我们可以利用修改 property 来自订一些样式、排版或功能。例如：

Color schemes

• variant：选择 Navbar <b-navbar> 的背景底色，调整整体视觉上的色彩计画。（本系列示范专案的主色调将定调为 Vue.js 绿，所以略过此设置）
• type：藉由控制背景底色的深浅来控制文字的颜色，选择 light 则代表背景为浅色，因此会让字体变成深色，才能明显衬托出文字内容。

（图片来源：截自 BootstrapVue - Navbar - Color schemes）

Component reference

也可以直接浏览到文件底部的元件参考总览表，快速查找到对应元件可以设定的 Properties、Slots 或 Events。

（图片来源：截自 BootstrapVue - Navbar - Component reference）

为什麽预设样式改不掉？

除了 BootstrapVue 提供给使用者的设置选项，其他细部样式也是我们可能会需要修改的地方，接下来着手微调其它部分。

首先，调整相关文案和架构，新增导览项目，呈现如下图。

调整好之後，发现导览项目的字体颜色太浅了，於是决定稍作修改。（以下示范使用红字较为明显）

.my_navbar {
	.nav-link {
	  font-weight: bold;
	  color: red;
	}
}

结果发现，同样都有 "nav-link" 的 class，导览项目成功被修改为红字，但是「选择语系」却原封不动？即使用上了自定义的 class 名称作为父层，照理说还能增加样式权重，导览项目也确实有被自定义样式覆盖。

「选择语系」仍然维持预设样式，怎麽回事？

通关密语 Deep Selectors

还记得先前提过的 Scoped CSS 吗？加上 scoped 会让样式作用范围仅限定在该元件内，避免影响到全域样式，因此无法被任意选取及修改其实是正常的。此时就需要特别使用「Deep Selectors」，才能深入改变元件内的样式。

1. 「>>>」：适用於没有使用 pre-processor 的情况
2. 「/deep/」或「::v-deep」：适用於有使用 pre-processor 的情况

不同於导览列项目，「选择语系」在结构上还包含巢状 <span>，因此重新加上 ::v-deep 选择器之後，就能顺利深入选取到子元件内部的样式了！

::v-deep .my_navbar {
	.nav-link {
	  font-weight: bold;
		color: red;
	}
}

CSS 编译结果：[data-v-41458b80] .my_navbar .nav-link

只要将 ::v-deep 放在子元件之前皆可（scoped attribute 也会跟着被编译至子元件之前）。

.my_navbar {
	::v-deep .nav-link {
	  font-weight: bold;
		color: red;
	}
}

CSS 编译结果：.my_navbar[data-v-41458b80] .nav-link

大功告成！

参考资料

• BootstrapVue - Navbar
• Vue Loader - Deep Selectors