css 相关问题

自动卡片滑块中最左边的卡片未完全显示

我在我的网站上集成了这个自动滑块卡html代码，但是整个最左边的卡没有显示，看起来像是被切断了。 document.addEventListener("DOMContentLoaded", () => ...

内联样式属性的 CSS 选择器

CSS 是否可以根据元素具有的内联样式属性来选择元素？ 例如，如果我有这样的 HTML： 会有...

如何使用css使用::after伪元素来修改网站页面中的元素

请问如何使用::after来装饰网站中的元素？ 我正在使用 stylebot 扩展或任何 css 修饰符扩展将 css 注入网站。 例如，Instagram Messenger 聊天

CSS初学者背景图片问题

我是一个初学者，试图建立一个个人博客类型的网站，我使用了别人的指南html，但我不知道如何更改背景图片。他们的背景图像是正方形...

响应式设计，如何更改div容器的顺序？

我刚刚开始响应式网页设计。我有一个 2 列布局（侧边栏和内容）。 我刚刚开始响应式网页设计。我有一个 2 列布局（侧边栏和内容）。 <div class="main-container"> <div class="main wrapper clearfix"> <div class="con1"> <header> <h1>container 1 h1</h1> <p>text1</p> </header> <section> <h2>overview section h2</h2> <p> test</p> </section> </div> <div class="con2"> <header> <h1>container 2 article header h1</h1> <p></p> </header> <section> <h2>article section h2</h2> <p>text</p> </section> </div> <aside> <h3>aside</h3> <p>text</p> </aside> </div> <!-- #main --> </div> <!-- #main-container --> 内容有 2 个 div 容器。我想要在小屏幕上 第一区 Div2 在大屏幕上我希望它们交换， Div2 第一区 在我的 CSS 中，我现在得到以下媒体查询： @media only screen and (min-width: 768px) { .main div.con1 { float: right; width: 57%; } .main div.con2 { float: right; width: 57%; } 是否可以调换顺序？如果可以，我该怎么做？有人可能有一个好的教程的链接吗？ 提前非常感谢！ StackOverflow问题中使用的方法 与js： //on load responsive_change_box_order(); //on resize window.addEventListener('resize', responsive_change_box_order ); function responsive_change_box_order() { if (window.matchMedia("(max-width: 1118px)").matches) { jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content")); } else{ jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner")); } } 此代码片段使用 Flexbox 和相关属性来满足您的最终要求。另请注意，当您实现或使用诸如 autoprefixer 或 prefixfree 之类的内容时，请为 Flexbox 使用适当的供应商前缀。 .main{ display:flex; flex-direction:column } .con1{ order:2; background-color: green; } .con2{ order:1; background-color: red; } /*For Large screen only*/ @media(min-width:1200px){ .con1{ order:1; } .con2{ order:2; } } <div class="main-container"> <div class="main wrapper clearfix"> <div class="con1"> <header> <h1>container 1 h1</h1> <p>text1</p> </header> <section> <h2>overview section h2</h2> <p> test</p> </section> </div> <div class="con2"> <header> <h1>container 2 article header h1</h1> <p></p> </header> <section> <h2>article section h2</h2> <p>text</p> </section> </div> <aside> <h3>aside</h3> <p>text</p> </aside> </div> <!-- #main --> </div> <!-- #main-container -->

如何使用CSS隐藏页面上div标签中的特定<h3>而不是任何其他

我正在使用博客模板，我想隐藏特定的 h3 标题。然而，它是此页面上使用的少数 h3 之一。我想删除的是 h3 class="title">捐赠 另一个...

如何减少v-table vuetify中列之间的间距？

我正在尝试调整v-table内表格和列的宽度，并希望使表格更紧凑。但是，他们都没有工作。 我希望这张桌子的宽度尽可能最小...

插槽作为 Vue 中另一个插槽的父级

本质上我正在尝试编写一个工具提示组件，并且我希望工具提示对话框相对于工具提示的源绝对定位。为了实现这一点，我需要...

Pimcore 自定义管理样式/主题

我正在尝试“剥皮”Pimcore 5 的管理界面。根据有关插件后端 UI 的 Pimcore 5 文档（以及我目前无法重现的其他谷歌搜索），我知道我可能...

Scss 更改不会在 css 文件中修改

我已经创建了 style.scss 和 style.css 文件，但是当我对 style.scss 进行更改时，它不会自动反映到 css 文件中。 我也尝试过以下命令 npm install -g s...

是否可以设置文本输入的样式以填充其父级的宽度？

我多年来一直遇到这个问题，并且以前也见过类似的问题，但他们都没有解决这样一个事实：在元素上设置 width: 100% 时 - 填充、边距和边框将包括...

无法选择工具提示标题中显示的文本 React MUI

在我的反应应用程序中，我有一个使用以下代码的组件： 在我的反应应用程序中，我有一个使用以下代码的组件： <FormControlLabel labelPlacement="top" control={ comp?.manualInput ? ( <TextField name="price" type="number" variant="standard" value={comp.price} onChange={handleTextValueChange} sx={{ width: "150px" }} /> ) : ( <Box display="flex" alignItems="center"> <TextField name="price" type="number" variant="standard" value={comp.price} onChange={handleTextValueChange} InputProps={{ readOnly: true }} sx={{ width: "150px" }} /> <Tooltip title={ comp.access && comp.access.length > 0 ? ( <Box> {comp.comp.map((acc, index) => ( <Box key={index} sx={{ mb: 1 }}> <strong>Type:</strong> <br /> Id: {acc.id} <br /> Description: {acc.description} </Box> ))} </Box> ) : ( "No Type" ) } placement="right" arrow > <InfoIcon color={ comp.access && comp.access.length > 0 ? "success" : "action" } fontSize="small" style={{ cursor: "pointer", marginTop: "-4rem", }} /> </Tooltip> </Box> ) } label="Price per Part" /> 将鼠标悬停在信息图标上后，工具提示将打开，标题内容将显示在其中。但是，我不知道为什么我无法通过单击并选择工具提示中的标题内容来选择内容？ MUI 会影响造型吗？我在这里缺少什么？我在另一个文件中也使用了一个工具提示，但标题中仅包含一个字符串，并且我没有使用任何 jsx，并且它有效，我可以直接选择它，但在这种情况下，我必须使用带有 jsx 的框。我不知道盒子和 jsx 是否会影响任何东西。我尝试使用 <Box sx = {{ pointerEvents: 'auto' }}> 但没有任何作用 您在使用 Material-UI (MUI) 工具提示时遇到的问题可能源于工具提示组件的默认行为，该行为阻止与其内容进行交互。当您在 title 属性中使用复杂的 JSX 结构时，默认情况下内容将变为非交互式，从而无法进行文本选择。 要使工具提示内容可选择，您需要修改工具提示组件的pointerEvents CSS属性。这可以通过使用 MUI 的 sx 属性自定义 Tooltip 组件或创建自定义样式的组件来完成。 <Tooltip title={ <Box sx={{ pointerEvents: 'auto' }}> {comp.access && comp.access.length > 0 ? ( <Box> {comp.access.map((acc, index) => ( <Box key={index} sx={{ mb: 1 }}> <strong>Type:</strong> <br /> Id: {acc.id} <br /> Description: {acc.description} </Box> ))} </Box> ) : ( "No Type" )} </Box> } placement="right" arrow > <InfoIcon color={comp.access && comp.access.length > 0 ? "success" : "action"} fontSize="small" style={{ cursor: "pointer", marginTop: "-4rem" }} /> </Tooltip> <Box sx={{ pointerEvents: 'auto' }}>

为什么当我展开浏览器时我的网站没有响应

下面我附上了我的 CSS，我的网页是一个音频播放器、一个嵌入式 Twitter 链接和一些视频的混合体。当我在 iPhone 上打开网页时，项目显示居中，但是当我

Razor 页面 - CSS 隔离 - 某些 HTML 标签的样式不起作用

我正在尝试使用 Razor Pages、CSS 隔离在 ASP.NET Web 应用程序中设置正文、标题和表单标签的样式。在作用域 CSS 文件 (_Layout.cshtml.css) 中为某些 HTML 标记创建的样式不起作用。该...

将动态类和静态类绑定到 Vue 组件

对 Vue 有点陌生，所以我正在寻找一种更好的方法（如果有的话）来设置默认类，而无需两次使用 class 属性。 组件.vue 对 Vue 有点新，所以我正在寻找一种更好的方法（如果有的话）来设置默认类，而无需两次使用类属性。 组件.vue <template> <input class="form__control" :class="class" v-bind="$attrs"/> </template> <script> export default { props: ['class'] } </script> 使用方法 <component class="big-red" data-id="1" type="text"/> 您可以使用 数组声明： 在单个属性中绑定动态和静态类 <template> <input :class="['form__control', class]" v-bind="$attrs"/> <template>

如何在 JavaScript 中在运行时获取所有应用到 Web 元素的 CSS 值？

我的目标是获取在运行时应用于给定 Web 元素的所有 CSS 属性（及其相应的值）。具体来说，我正在使用 Java 进行编码并使用 Selenium 来运行

为什么我的超链接文本颜色没有改变？

尝试多次后我仍然无法更改文本颜色。我已将 放入 以使它们对齐，我不知道这是否会导致问题... 多次尝试后，我仍然无法更改文本颜色。我已将 <nav> 放入 <header> 中以使它们对齐，但我不知道这是否会导致问题。 a { color: #fff; text-decoration: none; background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.5s ease-in-out; } a:before { content: ''; background: #54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out; } a:hover { background-position: 0; } a:hover::before { width:100%; } <a href="#">Hello World</a> 我已尽我所能，我尝试更改<header>文本颜色和导航文本颜色。通常 a {} 应该可以工作，但这次不行 背景图像设置为黑色，这就是控制它的颜色。改成白色就变成白色了 background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); a { color: #fff; text-decoration: none; background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #FFF 50% ); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.5s ease-in-out; } a:before { content: ''; background: #54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out; } a:hover { background-position: 0; } <a href="#">Hello World</a> 当您使用 -webkit-text-fill-color css 属性时，无论您在 color 属性中设置什么值，它都会指定文本的颜色。因此，您需要设置所需的颜色，或者仅删除该属性，使用 color 属性的值。 设置这个： a { color: #fff; /* other properties*/ -webkit-text-fill-color: red; } 或者这个： a { color: red; /* other properties*/ } 演示： a { color: red; text-decoration: none; background-image: linear-gradient( to right, #54b3d6, #54b3d6 50%, #000 50% ); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; /*-webkit-text-fill-color: transparent;*/ transition: all 0.5s ease-in-out; } a:before { content: ''; background: #54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out; } a:hover { background-position: 0; } a:hover::before { width:100%; } <a href="#">Hello World</a>

Flexbox 或 CSS - 每行 n 个项目，无需拉伸项目。使用顺风或CSS

有没有办法使用弹性框或 CSS / tailwind 中的任何其他方式强制每行包含一定数量的项目，而不拉伸项目的宽度？ 对于我的情况，假设每行有 4 个项目：- <

将具有纵横比的元素居中[关闭]

当尝试将应用了纵横比的元素居中时，我遇到了一个奇怪的问题。我认为它的行为与图像居中的工作方式类似，但我总是以......

网格问题：为什么第 2 列中的 <ul> <li> 项显示在彼此的下面？我希望他们彼此相邻。 （产品、关于和关注）

与 CSS 网格相关的问题：我希望 Fotomatic、产品详细信息、关于我们和关注我们显示在同一行中，每个都在自己的列中，但产品详细信息、关于我们和关注我们是