悬停并专注于浏览器检查

Question

我想知道是否有可能通过浏览器检查写一个包含新的悬停/焦点的新类。例如

.CanIDo {
/*something css
(ex.)*/
 width: 100;
}

/*my question (BY BROWSER ISPECTOR, i don't want to type it directly in my css using a text editor)*/

.CanIdo a:hover{
opacity: 0.7;
}

我认为这是不可能的，因为浏览器ispector不承认直接更改一个类，但只允许包含该类（对吗？），但也许有浏览器可以实现这一点，我认为它可以帮助开发一个网站。

谢谢！

Answer 1

如果我理解你的问题，你会问你是否可以随时写CSS＆＃34;＆＃34;在浏览器开发工具中，立即在页面上看到效果？

简短的回答是肯定的。 Chrome，FireFox甚至最新的IE / Edge浏览器中的Dev Tools都具备这种能力。您可以使用DOM检查器逐个调整应用的样式，甚至可以在“源”选项卡中批量更新CSS文件（浏览器之间的名称略有不同）。

是的，您可以编写像悬停一样的伪类规则，它们会生效。您可以开发或调整代码并立即查看结果。

Answer 2

大多数浏览器都有检查工具，允许您即时添加任何类。

例如在Chrome上，如果您打开开发人员工具，则可以将任何类添加到您的css中，无论是:hover变体还是任何其他普通类伪类。

您需要做的是在OSx上打开检查器Cmd + Shift + I，您将在元素标签上看到这一点：

你可以在过滤器上看到你有一个“+”按钮，点击你可以这样的东西：

这两个类a：hvoer和other-class通过检查器添加，如右图所示：inspector-stylesheet