相关疑难解决方法(0)
推荐指数
解决办法
查看次数
CSS - 父元素会覆盖子元素属性
问题很简单:
<div id="main-content">
<ul>
<li>
<div class="post-row">
<div class="post-footer">
This is the Footer
<div class="footer-buttons">
<ul>
<li>Edit</li>
<li>Reply</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
现在主要内容:
#main-content ul {
margin:0;
padding:0;
}
#main-content ul li {
display:block;
list-style:none;
}
最后,页脚按钮:
.footer-buttons {
float:right;
}
.footer-buttons ul {
margin:0;
padding:0;
}
.footer-buttons ul li {
display: inline;
}
问题是列表.footer-buttons显示为块.事实上,当我检查DOM时,它display: inline被覆盖了#main-content.
据我所知,这不应该发生.或者我错了,id元素将始终覆盖子类？
推荐指数
解决办法
查看次数
在CSS中创建一个没有样式的类
我想在CSS中创建一个nostyle类.因此,在我的样式表中编写的任何CSS都可以与此类重叠,我不想要任何样式.我使用下面的代码,但是没有用.
<style type="text/css">
.nostyle {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
</style>
推荐指数
解决办法
查看次数
使用CSS随机生成ID选择元素
我有这个标记,事先不知道ID:
#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }<div class="product" id="product-20625055">Product 1</div>
<div class="product" id="product-66980342">Product 2</div>
<div class="product" id="product-54722210">Product 3</div>我需要更改所有div的背景颜色.这是我能想到的最具体的选择器,但它不起作用:
div.product[id^="product-"] { background-color: transparent; }
这可以在没有硬编码ID,使用!important和更改HTML标记的情况下完成吗？
推荐指数
解决办法
查看次数
jQuery show（）不会使Bootstrap d-none类可见
我99％肯定我在这里遗漏了非常明显的东西。在下一个示例中，单击按钮应使带有.progress类的div 可见。但是，它不起作用。
function func() {
$('.progress').show();
}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="progress d-none">
No longer hidden!
</div>
<button onclick="func()">
click me
</button>推荐指数
解决办法
查看次数
Css风格优先
我遇到CSS声明优先级问题.我的页面包含一个带有规则和一些内联CSS声明的外部CSS文件,它们应该覆盖该规则.据我所知,内联样式声明应覆盖外部CSS声明.但是,当我在Chrome中查看页面时,表格的第二行显示为蓝色,当它应显示为内部样式声明中定义的红色.
我在这里想念的是什么
这是HTML:
<html>
<head>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
<style type="text/css">
td,tr,th
{
background: Red;
}
</style>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
</body>
</html>
以下是CSS文件的内容:
tbody tr:nth-child(even) td,
tbody tr.even td
{
background: #e5ecf9;
}
推荐指数
解决办法
查看次数
是否可以重置所有继承的 CSS 属性？
如何重置 CSS 文件中类的所有继承属性？我需要能够在元素上设置新属性，而预定义属性不会对其产生影响。
仅使用 CSS 可以吗？
我不是在谈论 CSS 重置，例如：
body {
margin:0px;
padding:0px;
}
推荐指数
解决办法
查看次数
CSS: !important 不要覆盖其他规则
我正在尝试更改导航栏中的字体颜色。我使用引导程序和我自己的样式表。我希望我的字体是红色的，所以我试图在!important的帮助下覆盖所有其他规则（其他事情也失败了）。但颜色保持灰色。这些是 chrome 开发人员工具对我的元素的计算值：
- 颜色：hsl(0, 0%, 60%);
- .navbar-inverse .navbar-brand - #999
a - #428bcaa:-webkit-any-link - -webkit-link导航 - 红色！重要身体 - #333
!important怎么可能被类选择器的样式覆盖以及如何使我的字体变红？
（答案是 !important 仅覆盖您应用它的同一元素上的样式。它不会使元素的后代继承它） - 来自评论。
推荐指数
解决办法
查看次数
Angular Material cdk-container 和主站点固定标头 z-index 覆盖
我有一个带有fixed header角材料的z-index网站1100。
虽然mat-menu我的网站中有一些与标题重叠z-index:1200并具有类cdk-overlay-container（角度材料类），但这是默认行为。
为了覆盖这个，我只需减少 to ，cdk-overlay-container z-index使其1000落后于fixed header，一切都对我来说没问题。
问题
但是，当我打开使用相同cdk-overlay-container和相同的材质对话框时z-index，它会在该覆盖层上方显示我的固定标题，因为它很高z-index，所以任何想法如何通过添加不同的来实现上述场景，class以便cdk-overlay-container我的内容mat-menu落后于fixed header但我mat-dialog最重要的内容。
屏幕截图
正常场景 https://www.screencast.com/t/XhB2szH3gZe
问题场景 https://www.screencast.com/t/fYrMYFEOd
我有一个通过类型脚本解决方案（当对话框显示较低的标题的 z-index 时），但我需要一些纯 CSS 解决方案。
谢谢！
推荐指数
解决办法
查看次数
如何编辑<rich:fileUpload> CSS？
我试图只显示按钮add下面的按钮和上传的图片,但是我在CSS中做的并不重要,生成的表richfaces总是一样的:
这是我的表格使用richfaces:
<ui:define name="content">
<h:form>
<h:panelGrid>
<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp" ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" >
<a4j:ajax event="uploadcomplete" execute="@none" render="info" />
</rich:fileUpload>
<h:panelGroup id="info">
<h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" />
<rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row">
<a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" />
</rich:dataGrid>
<br />
<a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" />
</h:panelGroup>
</h:panelGrid>
</h:form>
</ui:define>
这是如何生成的:
我想要一些更简单的东西'因为在另一个时刻我会有一些jQuery slider插件.但我不能用这个表生成的消失richfaces.是的 …
推荐指数
解决办法
查看次数