jQuery 使用纯 CSS 定位第一个可见元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18765814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Targeting first visible element with pure CSS
提问by Paul
I am wondering if it is possible to transpose the following into pure CSS.
我想知道是否可以将以下内容转换为纯 CSS。
$('.child:visible:first').css({'border-top':'1px solid #cccccc','border-bottom':'1px solid #cccccc'});
I cannot seem to find a solution.
我似乎无法找到解决方案。
采纳答案by cage rattler
In pure CSS, no it's not possible. Chris Coyier has :firstlisted as purely a jQuery construct: http://css-tricks.com/pseudo-class-selectors/.
在纯 CSS 中，不，这是不可能的。Chris Coyier 有：首先列为纯粹的 jQuery 构造：http: //css-tricks.com/pseudo-class-selectors/。
回答by Barney
As an abstract, it's not possible: jQuery relies on traversing the DOM to programatically determine an element which fits various conditions, then stops. You can't do this. But I assume in practice you will know various things. This solution assumes:
抽象地说，这是不可能的：jQuery 依赖遍历 DOM 以编程方式确定适合各种条件的元素，然后停止。你不能这样做。但我假设在实践中你会知道各种各样的事情。此解决方案假设：
- You know howthese
.childelements are going to be hidden. Will they havedisplay: noneas an inline style (if you've used jQuery.hide()on them, they will)? Do they have a class of.hidden? As long as you know the method, there will be a selector you can use to represent this. You can use this in combination with the CSS3:not()selector. - Since these are called
.child, I'm assuming they're all siblings — none are nested inside other.childelements, and they all share the same parent.
- 您知道这些元素将如何
.child隐藏。它们是否display: none具有内联样式（如果您.hide()在它们上使用了 jQuery ，它们会）？他们有一类.hidden吗？只要您知道方法，就会有一个选择器可以用来表示这一点。您可以将它与 CSS3:not()选择器结合使用。 - 由于这些被称为
.child，我假设它们都是兄弟.child元素——没有一个嵌套在其他元素中，并且它们都共享同一个父元素。
If either of the above isn't true, it's impossible. But if they're both true:
如果以上任何一项都不正确，那是不可能的。但如果它们都是真的：
.child:not( [style*='display: none'] ) {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.child:not( [style*='display: none'] ) ~ .child:not( [style*='display: none'] ) {
/* ...or whatever the default styles are */
border-top: none;
border-bottom: none;
}
The :not()pseudo-class is fairly obvious: it only selects elements which don'tmatch the contained selector. The ~operator means that the selector to the right will be the target ifit is a sibling of the selector on the left appearing afterwards in the source code.
该:not()伪类是相当明显的：它只是选择哪些元素不包含的匹配选择。该~操作装置的选择的权利将成为目标，如果它是在源代码之后出现在左边选择的兄弟姐妹。
回答by Daniel
It is posible if you know how it is implemented the hiding. For instance, this would work:
如果你知道它是如何实现隐藏的，那是可能的。例如，这将起作用：
li:first-child[style*="display:none"] + li:not([style*="display:none"]) {
/* ... */
background-color: blue;
}<ul>
<li style="display:none">hello</li>
<li>World!</li>
</ul>回答by Amit
try this Example
试试这个 例子
ul li{
background: lightslategrey
}
li:first-child{
background: blue;
}
ul li[style*="display:none"] + li:not([style*="display:none"]){
background: blue;
}
ul li:not([style*="display:none"]) + li{
background: blue;
}
ul > li:not([style*="display:none"]) ~ *{
background: lightslategrey!important;
}
回答by Mahesh
In my case, I only had to give padding before the first liI was able to achieve that with the following code.
就我而言，我只需要在第一个li之前提供填充， 我就可以使用以下代码实现它。
ul:before {
content: ' ';
height: 15px;
display: block;
}
But if you want to give li specific css, then you will have to following the tricks mentioned in other answers.
但是如果你想给 li 特定的 css，那么你必须遵循其他答案中提到的技巧。
All my lielements expect the first had a border-top.
我所有的li元素都希望第一个元素有一个边界顶部。
So if my first li was hidden, the second element still showed the border-top. I updated the above code to ensure all lielements have border-top, and I just hid the first border-top using margin trick
所以如果我的第一个 li 被隐藏了，第二个元素仍然显示 border-top。我更新了上面的代码以确保所有li元素都具有边框顶部，并且我只是使用边距技巧隐藏了第一个边框顶部
ul {
content: ' ';
height: 15px;
display: block;
margin-bottom: -1px; // (update as per the width of your border-top)*
z-index: 2;
position: relative;
}
If your border-top is 3px, then margin-bottom will be -3px, and add that to the height to balance (18px).
如果你的 border-top 是 3px，那么 margin-bottom 将是 -3px，并将其添加到高度以平衡（18px）。
These are just tricks since CSS doesn't have had a :visibleselector
这些只是技巧，因为 CSS 没有:visible选择器
回答by swK
I had a case when either one of the 2 top buttons of a list of buttons was visible, applying the style to both solved it:
我有一个案例，当按钮列表的 2 个顶部按钮中的任何一个可见时，将样式应用于两者都解决了它：
.bt:nth-child(1), .bt:nth-child(2) {
...
}
