如何测试CSS效果？

Question

嗨，所以我想自定义CSS，例如我的投资组合的发布日期https://dtxscad.wordpress.com/

那么我如何做到这一点并不会影响公众对网站所做的更改？

所以一个论坛说，。日期{visibility：hidden;}

Answer 1

如果您只想测试这个小的CSS-Change，请在实际选择器之前使用类.logged-in。这样，如果您已登录，则只能看到它们。

在这种情况下，您可以使用

.logged-in .date {
    visibility: hidden
}

不影响公众，因为您只会在登录时看到您的更改。

<强> BUT

通常，在生产（访问者可见）环境中测试代码被认为是一种不好的做法，因为有可能产生错误或忘记，例如，使用所述.logged-in - 类同时这样做Murphys Law

要在不影响访问者的情况下测试代码更改，您需要一个与您的实时网站分开的环境。

推荐（但更难）方式

1. 首先，请下载并安装MAMP
2. 下载Wordpress并通过
安装
3. 将其放入MAMPs htdocs-folder
4. 访问http://localhost/
5. 完成install wizard
6. 将您正在使用的主题复制到本地计算机上的wordpress / wp-content / themes

这样，您就可以在不影响访问者的情况下在本地环境中测试您的更改。

修改 正如@DBS所述，您也可以使用开发人员工具。在大多数最新的浏览器中，您只需按F12即可访问它们。

有关如何使用IE/Edge，Firefox，Chrome/Chromium和Safari

的开发者工具的更多信息

Answer 2

您始终可以在浏览器的开发者工具中执行此操作。通过这样做，您的更改将是暂时的，并将在刷新网页后进行