element css

### Element UI 和原生 HTML 元素的 CSS 样式

#### 修改 Element UI 组件样式的方法

对于希望仅在一个特定页面上覆盖 Element UI 的默认样式而不影响其他部分，可以在 `<style>` 中直接定义目标类的选择器[^1]。然而，带有 `scoped` 属性的方式无法作用于第三方库如 Element UI 的内部组件，因为这些样式会被视为局部范围内的样式。

为了实现更精确的作用域控制并使自定义样式能够应用于嵌套较深的子元素，在 Vue 单文件组件中推荐采用 `/deep/` 或者 `>>>` 符号来突破 scoped 样式的限制[^3]：

<style scoped>
.my-component /deep/ .el-tree-node__content {
    height: 40px;
}
</style>

或者使用 `>>>`:

<style scoped>
.my-component >>> .el-tree-node__content {
    height: 40px;
}
</style>

需要注意的是，不同版本的预处理器对这两种方式的支持情况有所不同；某些情况下可能需要依赖具体的构建工具配置才能正常工作。

另外一种方案是创建一个新的全局 `<style>` 块放置在当前 SFC (Single File Component) 文件内，但这会使更改成为全局性的，即会影响到整个应用中的相同组件实例[^4]。

#### 关于原生 HTML 元素的 CSS 属性

针对标准 HTML 元素，可以直接通过常规 CSS 语法为其指定样式规则。例如给所有的按钮增加圆角边框：

button {
    border-radius: 8px;
}

也可以利用后代选择器为特定上下文下的 HTML 元素设定样式：

.form-group input[type="text"] {
    padding: 5px;
    font-size: 1em;
}

此外，还可以借助伪类和伪元素进一步细化样式定制，比如设置链接的不同状态显示效果或是向列表项前添加特殊标记等。