CSS加号选择器的CSS替代品？

Posted 2023-05-09

【中文标题】CSS加号选择器的CSS替代品？

【英文标题】：CSS alternative to the CSS plus sign selector?

【发布时间】：2016-04-02 18:52:39

【问题描述】：

我正在尝试确定是否有 CSS 替代方案可以替代使用 CSS 加号选择器，以便我的 css 滑块可以在不支持加号选择器的旧浏览器中使用。我正在寻找一个 CSS 替代品。但是有没有一种方法可以检测不支持 CSS 加号选择器的浏览器并使用 Jquery 替代方法，我想知道如何解决这个问题。

这是我的 Jsfiddle 示例的链接 https://jsfiddle.net/2hmb60w0/

html

<form class="sliders">
    <input type="radio" name="slider-choice" id="first-slider" checked />
    <div class="slider-container">
        <div class="slider">
            <p>Some Random Text...</p>
        </div>
        <div class="nav">
            <label for="second-slider" class="prev"></label>
            <label for="second-slider" class="next"></label>
        </div>
    </div>

    <input type="radio" name="slider-choice" id="second-slider" />
    <div class="slider-container">
        <div class="slider">
            <p>Even Some More Random Text...</p>
        </div>
        <div class="nav">
            <label for="first-slider" class="prev"></label>
            <label for="first-slider" class="next"></label>
        </div>
    </div>
</form>

CSS

.sliders 
    width: 600px;
    position: relative;


.sliders input 
    display: none; 


.slider 
    position: absolute;
    opacity: 0;
    width: 600px;
    transform: scale(0);
    transition: all .6s ease-in-out;


.nav label 
  margin-top: 65px;
    width: 85px;
    display: none;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    transition: opacity .2s;
    color: black;
    font-size: 6em;
    text-align: center;
    background-color: rgba(100, 100, 100, .6);


.slider:hover + .nav label, .slider:focus + .nav label 
    opacity: 0.6; 


.nav label:hover, .nav label:focus 
    opacity: 1; 


.nav .next 
    right: 0;


.prev:before
    content: '\2770';


.next:before
    content: '\2771';


input:checked + .slider-container .slider
    opacity: 1;
    transform: scale(1);
    transition: opacity 2s ease-in-out;


input:checked + .slider-container .nav label 
    display: block; 


p
    padding: 100px 20px;
    width: 560px;
    text-align: center;
    background: #dae1ef;

【问题讨论】：

比IE7还早，真的吗？

@Roope 我只是好奇，因为有些人更喜欢旧版浏览器，这让我不以为然。

@linkNES 两周左右，微软将不再支持ie10及以下microsoft.com/en-us/WindowsForBusiness/End-of-IE-support

@Adam Buchanan Smith 感谢您提供的信息，但 IE11 与 EDGE 相同还是 EDGE 是一个完全不同的浏览器？

您在这里遇到的问题比您意识到的要大。 CSS transform 和 transition 属性也会在旧版浏览器中中断，因此相邻的兄弟选择器（+ 号）将是您最不必担心的问题。您最好的选择是让滑块优雅地降级为合理的东西，这由您决定。请记住，网站不必在所有浏览器中看起来都完全相同。

【参考方案1】：

如果你真的想支持 IE8-（不支持+ 选择器）我建议你使用polyfill。