GVKun编程网logo

当两个类分配给一个div时,css – 类被推翻（两个类可以相互调用吗）

9

此处将为大家介绍关于当两个类分配给一个div时,css–类被推翻的详细内容，并且为您解答有关两个类可以相互调用吗的相关问题，此外，我们还将为您介绍关于css–两个div,一个固定宽度,另一个,其余、c

此处将为大家介绍关于当两个类分配给一个div时,css – 类被推翻的详细内容，并且为您解答有关两个类可以相互调用吗的相关问题，此外，我们还将为您介绍关于css – 两个div,一个固定宽度,另一个,其余、css – 两个divs并排,相等的高度由一个[复制]控制、css – 两个divs相同的行,一个动态宽度,一个固定、css – 两个div共享一个边框并悬停：在bug之后的有用信息。

本文目录一览：

当两个类分配给一个div时,css – 类被推翻（两个类可以相互调用吗）

当两个类分配给一个div时,css – 类被推翻（两个类可以相互调用吗）

我正在创建一个< div>标签，其中我想应用两个类为< div>标签，它将是一个缩略图库。一个班级的职位和另一个班级的风格。这样我可以应用风格，我有一些奇怪的结果给我带来了一个问题。

可以将两个类分配给< div>标签？如果是，哪一个推翻另一个或哪个优先？

解决方法

可以将多个类分配给一个div。只要把类别中的空格分开，就可以这样： 
<div>Content</div>

然后，此div将匹配三种不同类选择器的任何样式规则：.rule1，.rule2和.rule3。

CSS规则以按照它们在样式表中遇到的顺序与其选择符匹配的对象应用于对象，如果两个规则(多个试图设置相同属性的规则)之间存在冲突，则CSS specificity确定哪个规则优先。

如果冲突规则的CSS特性是相同的，那么稍后的样式(稍后在样式表或后面的样式表中定义)的优先级优先。对象本身的类名的顺序并不重要。如果CSS特异性相同，则样式表中样式规则的顺序是重要的。

所以，如果你有这样的风格：

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

然后，既然这两个规则都与div匹配，并且具有完全相同的CSS特异性，那么第二个规则会更晚，因此它将具有优先级，背景将是红色。

如果一个规则具有较高的CSS特异性(div.rule1得分高于.rule2)：

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

然后，这将优先，这里的背景颜色将是绿色。

如果两个规则不冲突：

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

那么这两个规则都将被应用。

css – 两个div,一个固定宽度,另一个,其余

css – 两个div,一个固定宽度,另一个,其余

我有两个div容器。

虽然需要一个特定的宽度，我需要调整，这样，其他div占用了剩余的空间。有什么办法可以做到吗？

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}
<div></div>
<div></div> <!-- needs to be 250px -->

解决方法

参见： http://jsfiddle.net/SpSjL/(调整浏览器的宽度)

HTML：

<div></div>
<div></div>

CSS：

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

你也可以使用display：table，这通常是一个更好的方法：How can I put an input element on the same line as its label?

css – 两个divs并排,相等的高度由一个[复制]控制

css – 两个divs并排,相等的高度由一个[复制]控制

参见英文答案 > How do I keep two side-by-side divs the same height?                                    20个
>             Create a row of flexbox items with a max height defined by one child                                     1个
鉴于以下标记： 

<div>
  <div id="one">
    Some content
  </div>
  <div id="two">
    Some content
  </div>
</div>

使两个div的高度相同的最简单的方法是什么,这是#two的计算高度(具体来说,高度自动但是坚持最小高度)？因此,如果#two比#one长,则#one应扩展为匹配;如果#two较短,则应删除#one(根据溢出设置溢出).

我认为flexBox可能是我的救世主(因为它经常是这样),但我无法弄清楚如何.

解决方法

如果第一个容器具有绝对子容器,则它会带走文档流,并且它将始终由第二个flex子级的高度控制.如果您将#two的内容更改为更多,您会看到它正确增长.看这里：

演示：http://codepen.io/anon/pen/NbWmdB

HTML：

<div>
  <div id="one">
    <div>
      Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
  <div id="two">
    Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet. amet.
  </div>
</div>

CSS：

.wrapper {
  display:flex
}

#one {
  background:red;
  position:relative;
  flex:1;
  overflow:auto
}

.one-inner {
  position:absolute;


}

#two {
  background:green;
  flex:1;
}

希望有所帮助

css – 两个divs相同的行,一个动态宽度,一个固定

css – 两个divs相同的行,一个动态宽度,一个固定

我有一个父div下有两个div，父div有100％的宽度： 
<div id="parent">
  <div></div>
  <div></div>
</div>

条件是：

>我想在同一行上的两个div。
>右边的div可能存在也可能不存在。当它存在，我希望它总是固定在右边。但是，左div必须是弹性的 – 它的宽度取决于其内容。

我试过两个float：left，和dispaly：inline-block但是两个解决方案似乎都不工作。

任何建议将不胜感激。

解决方法

我会去与@ sandeep的显示：table-cell的答案，如果你不关心IE7。

否则，这里有一个替代方案，有一个缺点：“正确的”div必须先在HTML中。

参见：http://jsfiddle.net/thirtydot/qLTMf/
和完全一样，但是与“右div”删除：http://jsfiddle.net/thirtydot/qLTMf/1/

#parent {
    overflow: hidden;
    border: 1px solid red
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background: #888;
}
.left {
    overflow: hidden;
    height: 100px;
    background: #ccc
}
<div id="parent">
    <div>right</div>
    <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam semper porta sem,at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus,nec ullamcorper augue varius eget.</div>
</div>

css – 两个div共享一个边框并悬停：在bug之后

css – 两个div共享一个边框并悬停：在bug之后

在div的角落我需要四个盒子.当悬停在某个div上时,我想显示：阻止中间隐藏的div,与当前悬停的框共享一个边框.

Here is jsfiddle with my current solution

它几乎正常.但是,角落区域存在一些错误.我在那里使用：after显示带有背景的块元素.它是为了实现两个元素的一个边界的效果.

问题：

因此在Chrome中,悬停该区域会产生一些奇怪的隔行效果.每个鼠标移动1px隐藏并显示内容div. You can see it here in action

在最新的Firefox中它看起来没问题,但是在创建的jsfiddle中还有一些其他的错误你可以自己测试一下.

我使用灰色背景只是为了更好地显示问题.现在也假设为盒子1工作.用鼠标悬停尝试了一些jQuery并且没有成功.

编辑 – 最终解决方案：

最重要的是设置指针事件：无;到块后元素.自从我在here’s more advanced code on jsfiddle using SASS
获得一些投票,这里使用普通的css：

CSS：

.outer {
  width: 90%;
  height: 300px;
  position: relative;
}

.Box-content {
  display: none;
  width: 80%;
  height: 80%;
  position: absolute;
  left: 10%;
  top: 13%;
  background: white;
  z-index: 1;
}

.Box {
  width: 150px;
  height: 60px;
  position: absolute;
  border: 1px solid white;
  background: white;
}
.Box:hover:after {
  content: '';
  background-color: white;
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.Box:hover p {
  z-index: 3;
}
.Box p {
  position: absolute;
  top: 23px;
  left: 13px;
  color: black;
  padding: 0;
  margin: 0;
}

.Box-one {
  top: 0;
  left: 0;
}
.Box-one:hover {
  border: 1px solid blue;
}
.Box-one:hover ~ .content-one {
  border: 1px solid blue;
  display: inline-block;
  pointer-events: none;
}

.Box-two {
  top: 0;
  right: 0;
}
.Box-two:hover {
  border: 1px solid red;
}
.Box-two:hover ~ .content-two {
  border: 1px solid red;
  display: inline-block;
  pointer-events: none;
}

.Box-three {
  bottom: 0;
  left: 0;
}
.Box-three:hover {
  border: 1px solid yellow;
}
.Box-three:hover ~ .content-three {
  border: 1px solid yellow;
  display: inline-block;
  pointer-events: none;
}

.Box-four {
  bottom: 0;
  right: 0;
}
.Box-four:hover {
  border: 1px solid green;
}
.Box-four:hover ~ .content-four {
  border: 1px solid green;
  display: inline-block;
  pointer-events: none;
}

HTML

<div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-one">
    <p>Box NAME 1</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-two">
    <p>Box NAME 2</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-three">
    <p>Box NAME 3</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-four">
    <p>Box NAME 4</p>
  </div>

  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box-content content-one"></div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box-content content-two"></div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box-content content-three"></div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box-content content-four"></div>
</div>

解决方法

它是“闪烁”的原因与伪元素无关;这是因为你将.Box-content元素部分覆盖在.Box元素上,因此,当你移动鼠标时,它不再悬停在触发.Box-content元素显示的.Box元素上,而是悬停在在.Box-content元素本身上,它就消失了.再次移动鼠标,它再次悬停在.Box元素上,触发.Box-content再次显示.要解决此问题,只需将：hover伪类添加到.Box-content元素,如下所示： 
.outer {
  width: 100%;
  height: 300px;
  position: relative;
}
.Box {
  width: 150px;
  height: 60px;
  border: 3px solid black;
  position: absolute;
  z-index: 1;
}
.Box:after {
  content: '';
  background-color: grey;
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.Box:hover ~ .Box-content {
  display: inline-block;
}
.Box p {
  color: white;
  padding: 10px;
  z-index: 1000;
}
.Box-content {
  display: none;
  width: 80%;
  height: 80%;
  border: 3px solid black;
  position: absolute;
  left: 10%;
  top: 11%;
}
.Box-content:after {
  content: "";
  background-color: grey;
  z-index: 2;
  display: block;
  position: absolute;
  width: 20%;
  height: 30%;
  left: 0;
  top: 0;
}
.Box-content:hover {
  display: inline-block;
}
.Box-two {
  top: 0;
  right: 0;
}
.Box-three {
  bottom: 0;
  left: 0;
}
.Box-four {
  bottom: 0;
  right: 0;
}
<div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
    <p>Box NAME 1</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-two">
    <p>Box NAME 2</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-three">
    <p>Box NAME 3</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-four">
    <p>Box NAME 4</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box-content"></div>
</div>

或者,如果您不希望.Box-content在将鼠标悬停在其上时保持可见但不悬停在其中一个.Box元素上,则将pointer-events property添加到.Box内容,如下所示：

.outer {
  width: 100%;
  height: 300px;
  position: relative;
}
.Box {
  width: 150px;
  height: 60px;
  border: 3px solid black;
  position: absolute;
  z-index: 1;
}
.Box:after {
  content: '';
  background-color: grey;
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.Box:hover ~ .Box-content {
  display: inline-block;
}
.Box p {
  color: white;
  padding: 10px;
  z-index: 1000;
}
.Box-content {
  display: none;
  width: 80%;
  height: 80%;
  border: 3px solid black;
  position: absolute;
  left: 10%;
  top: 11%;
}
.Box-content:after {
  content: "";
  background-color: grey;
  z-index: 2;
  display: block;
  position: absolute;
  width: 20%;
  height: 30%;
  left: 0;
  top: 0;
  pointer-events: none;
}
.Box-two {
  top: 0;
  right: 0;
}
.Box-three {
  bottom: 0;
  left: 0;
}
.Box-four {
  bottom: 0;
  right: 0;
}
<div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
    <p>Box NAME 1</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-two">
    <p>Box NAME 2</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-three">
    <p>Box NAME 3</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box-four">
    <p>Box NAME 4</p>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box-content"></div>
</div>

但请注意,Opera Mini不是support pointer-events,而IE仅在v11中添加了支持.

我们今天的关于当两个类分配给一个div时,css – 类被推翻和两个类可以相互调用吗的分享就到这里，谢谢您的阅读，如果想了解更多关于css – 两个div,一个固定宽度,另一个,其余、css – 两个divs并排,相等的高度由一个[复制]控制、css – 两个divs相同的行,一个动态宽度,一个固定、css – 两个div共享一个边框并悬停：在bug之后的相关信息，可以在本站进行搜索。

本文标签：

上一篇如何创建一个完全覆盖CSS中相邻角的边框？（如何创建一个完全覆盖css中相邻角的边框）

下一篇如何显示一个块的前N个元素并隐藏在css中的其他元素？（css显示块级元素）

相关文章