如何将CSS规则应用于HTML中的上一个和下一个元素?

时间:2021-12-14 17:05:11

For example:

例如:

You have this:

你有这个:

<ul>
 <li>zero</li>
 <li>one</li>
 <li class="selected">two</li>
 <li>three</li>
 <li>more elements</li>
</ul>

CSS:

CSS:

.selected:previous {
   color: red;
}

.selected:next {
   color: green;
}

That's possible?

那有可能吗?

4 个解决方案

#1


23  

It's not possible with pure css. You can style next but not previous element.

纯css是不可能的。你可以设置下一个但不是前一个元素。

But you can do a trick with css. Instead of give class selected you can give class to your previous element. Like this:

但你可以用css做一个技巧。您可以将类添加到上一个元素,而不是选择类。喜欢这个:

HTML

HTML

<ul>
 <li>zero</li>
 <li class="previous">one</li>
 <li>two</li>
 <li>three</li>
 <li>more elements</li>
</ul>

CSS

CSS

.previous{
   color: green;
}
.previous + li{
   color: red;
}
.previous + li + li{
    color:yellow;
}

Check this http://jsfiddle.net/S5kUM/2/

检查这个http://jsfiddle.net/S5kUM/2/

#2


6  

It's called sibling selector:

它被称为兄弟选择器:

.selected + li {
   color: red;
}

Fiddle here

在这里小提琴

However, there is no sibling selector for the previous element. ​

但是,前一个元素没有兄弟选择器。

#3


2  

This would have to be done with JavaScript.

这必须使用JavaScript完成。

If you are using jQuery, it can be done like this:

如果您使用的是jQuery,可以这样做:

$('.selected').prev().css('color', 'red');
$('.selected').next().css('color', 'green');

#4


0  

You can use display: flex; and flex-direction: row-reverse; to reverse the list.

你可以使用display:flex;和flex-direction:row-reverse;扭转名单。

http://codepen.io/bscherer/pen/XMgpbb

http://codepen.io/bscherer/pen/XMgpbb

#1


23  

It's not possible with pure css. You can style next but not previous element.

纯css是不可能的。你可以设置下一个但不是前一个元素。

But you can do a trick with css. Instead of give class selected you can give class to your previous element. Like this:

但你可以用css做一个技巧。您可以将类添加到上一个元素,而不是选择类。喜欢这个:

HTML

HTML

<ul>
 <li>zero</li>
 <li class="previous">one</li>
 <li>two</li>
 <li>three</li>
 <li>more elements</li>
</ul>

CSS

CSS

.previous{
   color: green;
}
.previous + li{
   color: red;
}
.previous + li + li{
    color:yellow;
}

Check this http://jsfiddle.net/S5kUM/2/

检查这个http://jsfiddle.net/S5kUM/2/

#2


6  

It's called sibling selector:

它被称为兄弟选择器:

.selected + li {
   color: red;
}

Fiddle here

在这里小提琴

However, there is no sibling selector for the previous element. ​

但是,前一个元素没有兄弟选择器。

#3


2  

This would have to be done with JavaScript.

这必须使用JavaScript完成。

If you are using jQuery, it can be done like this:

如果您使用的是jQuery,可以这样做:

$('.selected').prev().css('color', 'red');
$('.selected').next().css('color', 'green');

#4


0  

You can use display: flex; and flex-direction: row-reverse; to reverse the list.

你可以使用display:flex;和flex-direction:row-reverse;扭转名单。

http://codepen.io/bscherer/pen/XMgpbb

http://codepen.io/bscherer/pen/XMgpbb