CSS使用F12开发人员工具

时间:2015-07-10 06:35:40

标签: javascript html css google-chrome google-chrome-devtools

所以只是不要被主要内容周围的所有垃圾分心,在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以达到类似的效果?

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

问题是contentbody的孩子,所以即使您将内容设置为display: blockvisibility: visible。父元素(BODY)被隐藏。因此,它的所有孩子也将被隐藏。