在我的HTML结构中,我设置如下:
<body>
<main>
<section>
...
</section>
<aside>
...
</aside>
</main>
</body>
问题是,并非所有页面都有 <aside>
我需要选择<section>并max-width: 500px; 在<aside>存在时给它一个.默认值是section { max-width: 1000px; }(何时<aside>不存在)
与选择器不同,一个标签后面跟着另一个标签 ; 用户[提问]想要一直设置"B"样式.此外,在这个问题中,用户想要选择"B"(不是"A")
<section>如果<aside>存在,我只需要设计样式.例如:
你有这个:
<ul>
<li>zero</li>
<li>one</li>
<li class="selected">two</li>
<li>three</li>
<li>more elements</li>
</ul>
CSS:
.selected:previous {
color: red;
}
.selected:next {
color: green;
}
那有可能吗？
如果不使用表格display:table,是否可以为输入左侧的标签设置灵活的宽度区域？出于浏览器兼容性原因,我还想避免网格布局.我希望css能够解决这个问题:
short_label input_box____________________
tiny_label input_box____________________
medium_label input_box____________________
然后还相应处理更大的标签:
short_label input_box__________
medium_label input_box__________
very_extra_long_label input_box__________
但我不想要:
short_label input_box__________
tiny_label input_box__________
medium_label input_box__________
因此第一列需要具有灵活的宽度,第二列需要增长以填充空间.我的html理想情况下看起来像这样,但如果有必要,可以添加"行"div.我觉得有一个灵活的答案,但也许不是因为所有行都需要对齐.
<div class='aligned_form'>
<label for='a'>short_label</label>
<input type='text' id='a'>
<label for='b'>medium_label</label>
<input type='text' id='b'>
<label for='c'>very_extra_long_label</label>
<input type='text' id='c'>
</div>
我有以下(简化)HTML结构
<td>
<DIV class="t-numerictextbox">
<DIV class="t-formatted-value">$0.00</DIV>
<INPUT id="MyObj_PropertyName class="t-input" name="MyObj.PropertyName">
</DIV>
<SPAN class="field-validation-error" data-valmsg-for="MyObj.PropertyName">blah blah</SPAN>
</td>
如果span元素也存在,我想要做的是将父div.t-numerictextbox的背景颜色设置为红色.在相邻的兄弟上执行此条件选择的css语法是什么？
顺便说一句,我需要这个必须适用于IE 8.
背景,如果你很好奇:
我有一个asp.net MVC应用程序,并使用Telerik MVC NumericTextBox控件.当我有ModelState验证错误时,MVC框架会自动在元素上插入class ="input-validation-error"属性,样式表会选择此类以突出显示红色元素.但是,它不适用于Telerik MVC控件(我假设因为Telerik的javascript覆盖了这个).
谢谢!
这些是3 inline-block和元素,这意味着它们将彼此相邻排序.
这是一个观看现场活动的小提琴:https://jsfiddle.net/8mdm8eox/
.wrapper {
background: #fff;
width: 100%
}
.firstElement,
.secondElement,
.thirdElement {
display: inline-block;
width: calc(100%/3)
}
.firstElement {
background: #000;
color: #fff
}
.secondElement {
background: grey
}
.thirdElement {
background: #ddd
}
@media (max-width: 767px) {}<div class="wrapper">
<div class="firstElement">First Element</div>
<div class="secondElement">Second Element</div>
<div class="thirdElement">Third Element</div>
</div>所以这就是我想要的,我想在屏幕宽度为767px或更低时:
@media (max-width: 767px){}
前两个元素是垂直排序的,第三个元素是与另外两个元素水平排序的,所以它们变成了:
_______________ ________________
|First Element| |? |
_______________ | |
|Third Element |
________________ | |
|Second Element| | | …使用CSS和下面的例子,有没有办法只选择<p>后面的<ul>'s？
如果没有,什么是jQuery选择器,还是需要if声明？
<p>Hello there.</p>
<p>Select this para!</p>
<ul>
<li>list item</li>
</ul>
<ul>
<li>don't select this list! :)</li>
</ul>
<p>And don't select this paragraph! :)</p>
当你悬停按钮时,有没有办法只使用纯CSS代码来显示文本字段？
<form id="demo">
<input type="text" id="search-field" name="s" placeholder="Search">
<input type="submit" id="search-icon">
<i class="fa fa-search"></i>
</form>
文本字段应隐藏,仅在您悬停按钮时显示.我不确定它只能通过CSS完成.:/
我有一个包含几个div的DOM结构.在视觉上,这些Div中的一些是其他人的孩子,但在DOM结构中他们都是兄弟姐妹.
我需要设置"父"div的悬停状态,即使悬停在其"子"div上也是如此.
有没有Javscript这样做的方法？也许通过使用div的当前位置来知道它们在另一个div中？
更新
问题是父母实际上是兄弟姐妹.只有一个容器,让我们说8个孩子.2是更大的div,其他6个在每个更大的div内显示3.就像是:
只有徘徊的孩子周围的父母才能改变颜色.
我无法改变BTW的DOM结构.
我检查了API的一些伪选择器,如:visible或:hidden,但很遗憾发现没有这样的选择器存在.既然jQuery已经支持这些选择器一段时间了,我希望它们能够被实现.我的想法是,我只想在隐藏它旁边的元素时显示某个元素,但我不想使用JavaScript这样做.任何选择？
我有一个进度条,有两个孩子(部分).每当这些孩子都徘徊时,进步及其子女的总高度就会发生变化.我设法解决了第一个使用的孩子,next sibling selector但我找不到第二个孩子的解决方案(黄色部分).到目前为止,我已经使用jQuery解决了这个问题,但我想在纯CSS中做到这一点.
小提琴:https://jsfiddle.net/zfh263r6/5/
$('#start').on({
mouseenter: function () {
//$(this).css('height', '4px');
//$( 'progress' ).css('height', '4px');
},
mouseleave: function () {
//$(this).css('height', '');
// $( 'progress' ).css('height', '');
}
});#progress_wrap {
position: relative;
height: 4px; /*max height of progress*/
background: #f3f3f3;
}
progress {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 100%;
border:none;
height: 2px;
transition:all .25s ease-in;
cursor: pointer;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
display: block;
}
progress:hover, progress:hover + #start …