相关疑难解决方法(0)
使用开发人员工具检查webkit-input-placeholder
可以使用以下内容设置文本输入的占位符样式:
-webkit-input-placeholder {
color: red;
}
我正在网上看一个网站,我想使用与它们相同的占位符颜色.是否有可能弄清楚他们使用的是什么颜色？我想包含任何alpha值,所以我不能只使用图像编辑器对颜色进行采样.
当我使用Chrome Dev Tools检查元素时,我看到:
在检查输入元素时,开发工具不提供有关占位符元素的信息.还有另外一种方法吗？
推荐指数
解决办法
查看次数
什么::之前真的吗？
所以,我阅读文档,可能了解的目的::before和::after.如果我的理解是正确的,它们应该始终与其他元素结合使用.但我正在看的网页有这样的东西:
<body>
<div class="container-fluid">
::before
<div> ... </div>
::after
</div>
<body>
我无法理解什么::before和::after正在做的事情？
推荐指数
解决办法
查看次数
你如何检查浏览器中的CSS变量？
:root {
--my-colour: #000;
}
并像这样访问它们:
.my-element {
background: var( --my-colour );
}
哪个工作正常.
但是,我想知道是否有一种调试或检查:rootCSS规则的方法,以查看已定义的变量,以及它们的值是什么？
根据我的理解,:root选择器和html选择器都针对相同的元素,但是当我html使用Chrome的调试工具检查元素时,我看不到任何定义:
有没有办法找出已定义的变量及其值？
推荐指数
解决办法
查看次数
检查/切换浏览器开发工具中的 CSS 伪类
我们有几十个CSS 伪类。大多数浏览器的开发人员工具只允许我们检查/切换其中的少数几个，例如:hover、:focus、:active。
您如何检查特定元素是否具有其他伪类？你怎么能切换它们？
一个例子是，自举表单验证应用:invalid和:valid伪类到input元件取决于它是否通过了验证。假设我们需要通过检查和切换这些伪类来调试自定义验证规则和反馈。你会如何在开发人员工具中做到这一点？
我的问题不限于 Chrome DevTools；使用任何浏览器开发人员工具回答这个问题都很好。同样，我不将此问题限制在 Bootstrap 验证的特定用例中（这只是我想到的第一个），因为该用例仅涵盖许多其他 CSS 伪类中的两个。
推荐指数
解决办法
查看次数
检查Firebug或Chrome DevTools中的悬停状态
我有一个具有CSS悬停状态的HTML元素.悬停时有边距或填充的错误,每次鼠标悬停时,元素的内容都会滑动一点,这很烦人.
我想使用FireBug或Chrome Dev Tools进行调试,但我使用这些工具时遇到的一个常见问题是,从Firebug/devtools中选择元素后,我显然需要将鼠标移回开发工具和悬停状态不再启用.
如何在悬停状态下使用这些工具检查/调试HTML元素？
推荐指数
解决办法
查看次数