我通过这段代码 设置不了字体颜色.myAppDemoWT .myCustomText { display: inline-block; font-weight: bolder; color: red; }

你的 CSS 代码看起来没有问题。可能是因为 CSS 样式没有被正确地应用到你的 HTML 元素上。请确保你的 HTML 元素包含了 `myCustomText` 类名，并且这个元素在 `myAppDemoWT` 元素内部。你可以使用浏览器的开发者工具来检查 CSS 样式是否被正确地应用到了相应的 HTML 元素上。如果问题仍然存在，请提供更多的相关代码和详细的错误描述，让我能够更好地帮助你解决问题。

相关问题

* { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { background: #252525; } .container { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 300px; height: 100px; } .container .search { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 80px; height: 80px; background: crimson; border-radius: 50%; transition: all 1s; z-index: 4; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); } .container .search:hover { cursor: pointer; } .container .search::before { content: ""; position: absolute; margin: auto; top: 22px; right: 0; bottom: 0; left: 22px; width: 12px; height: 2px; background: white; transform: rotate(45deg); transition: all 0.5s; } .container .search::after { content: ""; position: absolute; margin: auto; top: -5px; right: 0; bottom: 0; left: -5px; width: 25px; height: 25px; border-radius: 50%; border: 2px solid white; transition: all 0.5s; } .container input { font-family: "Inconsolata", monospace; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 50px; outline: none; border: none; background: crimson; color: white; text-shadow: 0 0 10px crimson; padding: 0 80px 0 20px; border-radius: 30px; box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2); transition: all 1s; opacity: 0; z-index: 5; font-weight: bolder; letter-spacing: 0.1em; } .container input:hover { cursor: pointer; } .container input:focus { width: 300px; opacity: 1; cursor: text; } .container input:focus ~ .search { right: -250px; background: #151515; z-index: 6; } .container input:focus ~ .search::before { top: 0; left: 0; width: 25px; } .container input:focus ~ .search::after { top: 0; left: 0; width: 25px; height: 2px; border: none; background: white; border-radius: 0%; transform: rotate(-45deg); } .container input::placeholder { color: white; opacity: 0.5; font-weight: bolder; }

这段代码是一个简单的搜索框样式，使用了CSS3的动画效果。其中包括一个圆形搜索按钮（红色），点击按钮后输入框会从小圆圈扩大为长方形，并且搜索按钮会移动到输入框的左侧，并且变为白色。同时，输入框的背景颜色也会变成一个深色，并且输入框的宽度会变宽，以便用户能够输入更多的内容。在输入框中输入搜索内容时，输入框的文本颜色变为白色，而搜索按钮的形状也会变化，以增强用户的反馈感。

<template> <div class="error-page"> <div class="error-code">4<span>0</span>3</div> <div class="error-desc">啊哦~ 你没有权限访问该页面哦</div> <div class="error-handle"> <router-link to="/"> <el-button type="primary" size="large">返回首页</el-button> </router-link> <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> </div> </div> </template> <script> import { useRouter } from 'vue-router'; export default { name: '404', setup() { const router = useRouter(); const goBack = () => { router.go(-1); }; return { goBack, }; }, }; </script> <style scoped> .error-page { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; background: #f3f3f3; box-sizing: border-box; } .error-code { line-height: 1; font-size: 250px; font-weight: bolder; color: #f02d2d; } .error-code span { color: #00a854; } .error-desc { font-size: 30px; color: #777; } .error-handle { margin-top: 30px; padding-bottom: 200px; } .error-btn { margin-left: 100px; } </style>

这段代码实现了一个404页面的显示。如果用户访问了不存在的页面，就会显示这个页面。页面中包含一个错误码、错误描述和两个按钮。第一个按钮可以返回网站首页，第二个按钮可以返回上一页。代码中使用了Vue 3中的Composition API，通过useRouter()方法获取了Vue Router实例，然后在goBack()方法中调用了router.go(-1)方法返回上一页。同时，使用了CSS样式来美化页面。