相关疑难解决方法(0)

我想显示一个具有以下限制的div:

• 自动隐藏在1024px宽度下
• 可以在1024px宽度下按钮切换,但如果我点击somwhere(不在div内),activeDiv应该删除该类

我在codepen上有一个虚拟的例子

因此出现以下问题:

• 在IE10中,切换按钮不起作用(不隐藏/显示div)我检查开发人员工具,但没有任何迹象表明 display: initial
• 在Chrome 29中,div旁边没有按钮.(Firefox是一样的)
  我知道displaydiv 的默认值是block,但这个css不仅适用于div我尝试使用的标签initial.

我遇到了CSS中动态边框的一个不寻常的问题.我试图通过将其宽度设置为零border-left-width:0;或使用来"恢复"/显示已禁用的边框的某一面border-left:none;

问题是我不想重复相同的边界属性,因为它应该是一个自适应动态解决方案,其中隐藏边框应该继承元素已经设置的边界.

示例代码:JSFiddle

/* ================== chic ==================  */

body, html {
    margin: 0;
    padding: 0;
    font-family:Verdana, sans-serif;
    height: 100%;
    text-align: center;font-weight: bold;
    background:#62726b;
    color:#abd4b1;
}

div {
    padding:50px;
    position: absolute;
    left:0;
    right:0;
    margin: 0 auto;
    width:50%;
    top:50%;
    transform:translateY(-50%);
}

/* ============= setting border =============  */

div {
    border:5px dashed #abd4b1;
    border-right:none;   /* hide right border */
    border-left-width:0; /* hide left border by setting width to zero */
}

/* restoring borders */

div { …

我正在一个网站上工作，其中主 css 文件锚点轮廓已设置为 none，如下所示：

*:focus {
    outline: none!important;
}

我添加了一个更具体的类来覆盖上面的内容，如下所示：

header a:focus {
    outline: initial!important;
}

问题是这不起作用。下面的代码有效

outline: 2px solid $black!important;

但我希望浏览器默认样式显示我认为可以使用“initial”关键字实现的样式，而不是尝试模仿所有默认样式。

我有一个段落和一个图像并排。display:flex我为此使用了财产。但在小型设备中，我不想要这个属性。谁能告诉我如何删除该属性？

样式.css

p, img {
  display: flex;
}
    
img {
  float: left;
  width: 45%;
  padding: 0;
  margin: 0;
}
    
p {
  float: right;
  text-align: justify;
  width: 50%;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

是否padding:initial有过任何优势padding:0？例子：

<style>
  textarea {
    padding: 0;
  }
</style>
<textarea>Hello, world!</textarea>

我有选项卡元素,display: inline或者none取决于它们是否被选中.例如:

<div class="tab" style="display:inline;"></div>
<div class="tab" style="display:none;"></div>

然后我的样式表中的类会覆盖display属性,以便所有选项卡都显示在移动设备中:

.tab {
display: block !important;
}

我的问题是我需要防止这种情况应用于大于600px的屏幕,但我不能使用max-width查询.因此,我需要display: block !important使用最小宽度的媒体查询覆盖,而不应用任何其他特定样式.例如:

@media screen and (min-width: 600px){
.tab  {
display: /*don't do anything*/ !important; 
}
}