CSS使用F12开发人员工具

Question

所以只是不要被主要内容周围的所有垃圾分心，在chrome F12 edeveloper工具中我添加了这两种风格：

.content {
  display: block !important;
}

body  {
  display: none;
}

然后一切都消失了！类似的东西适用于可见性:(但内容在不可见的元素之间变得紧张）

 .content * {
  visibility: visible;
}
body * {
  visibility: hidden;
}

请注意content是网站之间的更改，具体取决于网站作者决定将其称为主要内容类的内容，如果您可以在任何网站上使用F12开发人员工具使用display none以及与上述代码类似的内容，请让我知道语法应该是什么。

另外，有没有办法在Chrome F12 Debug Console中执行一些javascript以达到类似的效果？

Answer 1

使用visibility: hidden;和visibility: visible;应该可以正常使用。

也许你应该直接将它应用于body和.content 而不是所有孩子。

body {
  visibility: hidden;
}
.content {
  visibility: visible;
}

您可以在Stack Overflow上对此进行测试。但是内容是这里的目标和ID（#content）

Answer 2

问题是content是body的孩子，所以即使您将内容设置为display: block或visibility: visible。父元素（BODY）被隐藏。因此，它的所有孩子也将被隐藏。