我认为这是一个非常基本的问题,但我不确定如何做到这一点.
我想做的是当一个人div徘徊时,它会影响另一个人的属性div.
例如,在这个简单的例子中,当你将鼠标悬停在#cube它上面时,会改变background-color但我想要的是当我将鼠标悬停在上面时#container,#cube会受到影响.
div {
outline: 1px solid red;
}
#container {
width: 200px;
height: 30px;
}
#cube {
width: 30px;
height: 100%;
background-color: red;
}
#cube:hover {
width: 30px;
height: 100%;
background-color: blue;
}<div id="container">
<div id="cube">
</div>
</div>我可能回答了我自己的问题,但我非常好奇.
我知道CSS可以选择父项的单个子项,但如果其父项具有一定数量的子项,则可以支持对容器的子项进行样式化.
例如
container:children(8) .child {
//style the children this way if there are 8 children
}
我知道这听起来很奇怪,但是我的经理让我检查一下,没有找到任何东西,所以我决定在结束搜索之前转向SO.
这将选择所有的<B>直接标签之前的<A>标签:
A+B {
/* styling */
}
对于所有的选择是什么<A>直接的标签,随后通过<B>标签？
这里的示例HTML符合我的问题:
<a>some text</a>
<b>some text</b>
的方式,W3Schools的短语吧,他们的声音一样.
div + p
选择<p>紧跟<div>元素后面的所有元素
div ~ p
选择<p>元素前面的每个<div>元素
如果<p>元素紧跟在<div>元素之后,那是不是意味着<p>元素前面有<div>元素？
无论如何,我正在寻找一个选择器,我可以选择一个位于给定元素之前的元素.
我正在为我的网站登录页面,我想在文本框获得焦点时加粗输入框前面的标签.现在我有以下标记:
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
我可以使用相邻的选择器来选择文本框后面的标签,但我不能选择之前的元素.我可以使用这个CSS选择器规则,但它只选择后面的标签,所以当用户名文本框获得焦点时,密码标签变为粗体.
input:focus + label {font-weight: bold}
有什么我可以做的工作吗？我知道JavaScript可以用来轻松实现这一点,但是如果可能的话,我想使用纯粹的基于CSS的解决方案,我只是无法想办法做到这一点.
I want to use CSS to show div id='b' when I hover over div id='a', but I cannot figure out how to do it because the div 'a' is inside another div that div 'b' is not in.
<div id='content'>
<div id='a'>
Hover me
</div>
</div>
<div id='b'>
Show me
</div>
下面是我的HTML
<h1>Heading</h1>
<a class="button" href="#"></a>
我想要做的是,当我悬停<a>标签时,我想<h1>纯粹使用CSS 更改标签的颜色.我怎样才能做到这一点？
PS -----*编辑*----------
如果我用一个id包裹一个div怎么办？
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#"></a>
</div>
这会有帮助吗？
通常,我对CSS很好,但我似乎无法想出这个.如果我有一个结构
<div>
<h2 class="open">1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
</div>
如何使用.openCSS类来定位所有兄弟h2s ？我的主要问题是兄弟选择器(.open + h2)只会紧随其后的h2 .open.
在CSS中,如果兄弟在输出中位于上面,则无法选择带有加号的兄弟,这是html中的前一个元素.
例如
<div class="first">
<div class="second">
.second + .first { style applied to div.first}
无论如何在SASS/SCSS中这样做？
我的问题是我希望flexbox具有可变范围宽度,并且一切正常,但不是最后一行.我希望所有孩子都有相同的维度,即使行没有孩子(最后一行).
#products-list {
position:relative;
display: flex;
flex-flow: row wrap;
width:100%;
}
#products-list .product {
min-width:150px;
max-width:250px;
margin:10px 10px 20px 10px;
flex:1;
}
我的flex div可以缩小到150px并且长到250px,但所有都必须具有相同的大小(显然我想要一个CSS解决方案,JS我知道的方式).