相关疑难解决方法(0)

我有一个进度条,有两个孩子(部分).每当这些孩子都徘徊时,进步及其子女的总高度就会发生变化.我设法解决了第一个使用的孩子,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 …

jsfiddle.net/rqJAY/

HTML:

<table class="table_database_edit">
<tr><td>Magazyn wycieraczek</td><td>Edytuj</td><td>Usu?</td></tr>
<tr class="more" id=""><td colspan="3">aa</td></tr>
<tr><td>test</td><td>Edytuj</td><td>Usu?</td></tr>
<tr class="more" id=""><td colspan="3">aa</td></tr>
</table>

CSS:

tr.more{
    #display: none;
}
table.table_database_edit{
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit  tr:nth-child(4n+3), table.table_database_edit  tr:nth-child(4n+4){
    background-color: #EFF0F1;
}
table.table_database_edit  tr:hover:nth-child(n) + tr:nth-child(n):after{
    background-color: #FFFFCC;
}
table.table_database_edit  tr:hover:nth-child(n+1) + tr:nth-child(n+1):before{
    background-color: #FFFFCC;
}

我有桌子.每两行都是一组.这些组交替背景颜色.第1行和第2行是白色的.第3行和第4行是灰色的.第5行和第6行是白色的.等等.

当您将鼠标悬停在某个组上时,我想将背景颜色设置为黄色.我怎么能这样做？

我有一个列表,想要选择我正在徘徊的上一个和下一个

<ul>
    <li>Item1</li>
    <li>Item1</li>
    <li>Item1</li>
    <li>Item1</li>
    <li>Item1</li>
</ul>

我可以使用"+"选择器选择下一个兄弟.但是有可能获得前一个吗？

ul li:hover + li {
    color:red;
}

我已经尝试ul li + li:hover但它不起作用.不能相信我没有可以使用的棘手黑客.

当然我可以通过Javascript轻松完成这项工作,但我不喜欢使用JS,我可以用CSS获得相同的结果.

假设您对我的帖子感到恼火,并想隐藏Stack Overflow的所有评论.我知道如何创建自定义CSS来隐藏我的用户名:

a[href$="what"] {
    display:none !important;
}

不幸的是CSS不允许我引用父元素,因此这将留下注释的文本.

如何将父级或前级兄弟隐藏到该链接标记？

我不是要求CSS选择器!我知道它不存在.请在结束前阅读问题(并在提供答案之前告诉我在我的问题中已经提到的内容).

我问你如何在没有相关CSS选择器的情况下选择DOM元素.我相信有JS解决方案,但我无法使用它们.也许还有其他选择,因此我不是特别要求JS.如果你告诉我如何使用PHP解析页面并通过另一个域显示它,那对我来说完全没问题.

Greasemonkey可能会这样做的提示根本没有帮助.解释如何做到这一点.让它在您的机器上工作并发布详细说明.我无法使用任何可用的脚本.

我对使用z-index决定堆栈顺序感到有点困惑.

我不太明白浏览器如何将带有position属性的元素与没有它的元素一起处理.

是否有一般规则来决定元素的堆栈顺序是否已明确定位元素？

赞赏不同情况的例子.一般来说:

1. <div>具有位置设定且没有位置设定的混合兄弟姐妹.
2. 嵌套<div>s与兄弟s混合,<div>位置设置且没有位置设置.

我正在通过一些单选按钮构建一个小星级CSS评级,并使其正常工作.我有一个问题是能够在选择的收音机之前填写星星,所以如果选择星号3,星号1和2也会被填写.这是我到目前为止所拥有的:

#review-form input,
#review-form textarea {
  background: none repeat scroll 0 0 #333333;
  border: 0 none;
  color: #fff;
  margin: 0;
  max-width: 100%;
  padding: 7px 4px;
}
#review-form .radio {
  display: inline-block;
}
#review-form input[type=radio] {
  display: none;
}
#review-form input[type=radio] + label {
  display: block;
}
#review-form input[type='radio'] + label:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 8px;
  width: 23px;
}
#review-form input[type=radio] + label:before {
  content: "\f006";  /* Radio Unchecked …

我希望上面的代码应该在我的网站上有下拉切换效果.

默认情况下,当观众刷新页面时,第一个框必须显示下拉框,当单击下一个框时,前面的下拉框应隐藏自身.

怎么做？

.maindrop {
    width: 49%;
}
.bar {
    padding: 20px;
    color: white;
    background: #1FB5AC;
    display: block;
    font-family: Times;
    text-decoration: none;
    font-size: 16px;
    transition: .2s ease-out;
    margin-bottom: .1cm;
}
.bar:hover {
    background: gray;
}
.dropbox {
    max-height: 0;
    transition: .5s ease-out;
    overflow: hidden;
    width: 100%;
}
.dropbox:target {
    max-height: 300px;
}

<div class="maindrop"  style="float: right">
        <div class="fold default">
            <a class="bar" href="#tab5">Speaker 5</a>
            <div class="dropbox" id='tab5'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis …

我有以下结构,其中第二个元素可能出现也可能不出现.

<div class="wrapper">
    <div class="firstElement"></div>
    <div class="secondElement"></div>
</div>

我想有条件地设置样式,.firstElement如果.secondElement存在的话.

有没有办法用PURE CSS做到这一点？有兄弟选择器/父选择器吗？

谢谢!

如果我有以下 HTML 标记：

<div class="wrapper">
  <div id="container-1">
    <div class="child-1-1"></div>
    <div class="child-1-2"></div>
  </div>
  <div id="container-2">
    <div class="child-2-1"></div>
    <div class="child-2-2"></div>
  </div>
</div>

我可以将flex的显示应用到wrapper，然后使用order使container-2出现在container-1之上。