我正在开发一个浏览器扩展,将它的 UI 添加到页面 DOM。在某些页面上,我遇到某些样式会影响我的 UI 的问题。为了解决这个问题,我将我的 UI 放在一个公共根之下,它将大多数样式重置为默认值。
有时我会错过导致 UI 出现视觉故障的东西。(即页面 CSS 文件集,form { width: 80%; }所以我需要添加form { width: auto; }到我的重置样式中。
是否有一组样式将每个 CSS 属性重置为每个元素的标准声明为默认值的值?
这可能是一个相当愚蠢的问题,但我想知道......有没有办法让div的内容完全免于链接到HTML的CSS?
我有这样的事情:
CSS
...
p{ background-color: pink; }
...
Run Code Online (Sandbox Code Playgroud)
HTML
<html>
<head>
...
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Some text</p> <!--This should have pink background-->
<div class="immunediv">
<p>Some more text</p> <!--This shouldn't be blue-->
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
编辑:这只是一个例子.我想要的是里面的所有标签.immunediv对样式免疫.喜欢...
<div class="immunediv">
<h1>Hello</h1>
<p>This is a <b>test</b></p>
<a href="#">And this is a link</a>
</div>
Run Code Online (Sandbox Code Playgroud)
即使b,h1,p和a在CSS中设置样式,它们也不应该采用那种样式,因为它们在内部.immunedive而是获得默认样式.
通过'删除',我的意思是重置可能在此类元素上下降的所有样式并将其置于浏览器默认值.
我需要这个用于调试,我不知道什么规则造成了伤害,我的好方法是删除所有样式然后逐个松开限制以检查事情何时开始出错.
你有没有在网上看到任何包含以下内容的片段:
{ right: auto !important; left: auto !important; visibility: visible !important;...
Run Code Online (Sandbox Code Playgroud)
通过各种可能的风格等等.
如何重置 CSS 文件中类的所有继承属性?我需要能够在元素上设置新属性,而预定义属性不会对其产生影响。
仅使用 CSS 可以吗?
我不是在谈论 CSS 重置,例如:
body {
margin:0px;
padding:0px;
}
Run Code Online (Sandbox Code Playgroud) 我正在制作一个Web应用程序,用户可以通过它来创建电子邮件活动。在创建活动时,用户使用CKEditor添加电子邮件内容。他可以添加内部CSS / JS。创建广告系列后,其外观如下图所示。
我必须在div中#email_content确切显示电子邮件内容预览的显示方式。但是,为该页面编写的通用CSS也适用于该CSS,#email_content反之亦然。我无权修改通用CSS。
如何显示email_content预览的确切外观?
注意:我知道可以使用iframeemail_content,但是我正在寻找其他解决方法。
我经常使用CSS通用选择器重置HTML文档中的维度:
* {
border: 0;
margin: 0;
padding: 0;
}
Run Code Online (Sandbox Code Playgroud)
这可以用JavaScript完成吗?
对于普通的HTML元素,有style属性.但是如何与通用选择器对话呢?
我只是想添加几个按钮,单击这些按钮时会弹出引导对话框/模式。像这样的演示:http : //jsbin.com/wiruhepere/1/edit?html,css,js,output
但是,当在真实网站上使用greasemonkey/tampermonkey 应用它时,让我们说stackoverflow:它根本不起作用!!
我怀疑可能存在一些脚本/css 冲突,但我不具备追踪该冲突的知识:<
我正在寻找的是:
请记住,我是这方面的初学者,所以如果有什么不够清楚,请随时提问:-)
根据 wOxxOm 注释更新了 GM 代码:
// ==UserScript==
// @name Bootstrap Test
// @namespace http://tampermonkey.net/
// @description Why the hell the modal isnt working :<
// @author Enissay
// @include http://stackoverflow.com/*
// @include https://stackoverflow.com/*
// @resource jqueryJS https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
// @resource bootstrapJS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
// @resource buttonCSS https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-buttons.css
// @resource bootstrapCSS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
// @resource githubButtonIconSet https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-icons.png
// @grant GM_addStyle
// @grant GM_getResourceText
// @grant GM_getResourceURL
// ==/UserScript==
(function() {
//--- Inject …Run Code Online (Sandbox Code Playgroud)