40

以下を純粋なCSSに置き換えることが可能かどうか疑問に思っています。

$('.child:visible:first').css({'border-top':'1px solid #cccccc','border-bottom':'1px solid #cccccc'});

私は解決策を見つけることができないようです。

4

6 に答える 6

43

抽象的に言えば、それは不可能です。jQuery は、DOM をトラバースして、さまざまな条件に適合する要素をプログラムで判断し、停止することに依存しています。これはできません。しかし、実際には、さまざまなことを知っていると思います。このソリューションは、次のことを前提としています。

  1. これらの要素がどのように隠されるかを知っています。.childそれらはdisplay: noneインライン スタイルとして使用されますか (jQuery を使用した場合は使用さ.hide()れます)。彼らはのクラスを持ってい.hiddenますか? メソッドを知っている限り、これを表すために使用できるセレクターがあります。:not()これは、CSS3セレクターと組み合わせて使用​​できます。
  2. これらは と呼ばれているため.child、すべて兄弟であると想定しています。他の.child要素内にネストされているものはなく、すべて同じ親を共有しています。

上記のいずれかが当てはまらない場合、それは不可能です。しかし、両方とも 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;
}

:not()疑似クラスは非常に明白です。含まれているセレクターに一致しない要素のみを選択します。~演算子は、右側のセレクターが、ソース コードの後に​​現れる左側のセレクターの兄弟である場合、ターゲットになることを意味します。

于 2013-09-12T14:06:25.997 に答える
14

隠蔽がどのように実装されているかを知っていれば可能です。たとえば、これはうまくいきます：

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>

于 2014-12-16T23:52:29.357 に答える
10

この 例を試してください

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;
}
于 2014-11-24T09:10:17.017 に答える
10

純粋な CSS では、それは不可能です。Chris Coyier は:firstを純粋な jQuery コンストラクトとしてリストしました: http://css-tricks.com/pseudo-class-selectors/。

于 2013-09-12T13:49:23.463 に答える
1

私の場合、 次のコードでそれを達成することができた最初のliの前に、パディングを与えるだけで済みました。

ul:before {
  content: ' ';
  height: 15px;
  display: block;
}

ただし、特定のcssを指定したい場合は、他の回答で言及されているトリックに従う必要があります。

私のすべてのli要素は、最初にボーダートップがあることを期待しています。

したがって、最初の li が非表示になっていても、2 番目の要素にはまだボーダートップが表示されていました。上記のコードを更新して、すべてのli要素に border-top があることを確認し、マージン トリックを使用して最初の border-top を非表示にしました

ul {
  content: ' ';
  height: 15px;
  display: block;
  margin-bottom: -1px; // (update as per the width of your border-top)*
  z-index: 2;
  position: relative;
}

border-top が 3px の場合、margin-bottom は -3px になり、それを高さに追加してバランスをとります (18px)。

CSS には:visibleセレクターがないため、これらは単なるトリックです。

于 2019-04-08T21:02:00.507 に答える