如何把CSSclass改成上升

Question

我不知道该怎么做，也不知道这是否可行：

<div class="container">
    <div class="text"></div>
    <a href="javascript:;" class="view">View more</a>
<div>

如果我只用CSS点击link.view，我怎样才能将class添加到div.text？我无法使用 javascript，因为我正在为 AMP

构建一个带有 css 的页面

Answer 1

CSS 不能那样做，CSS 只是样式。但是，您可以使用 javascript.

<div class="container">
    <div class="text"></div>
    <a href="javascript:;" onclick="myFunction()" class="view">View more</a>
<div>

<script>
function myFunction() {
    var elements = document.getElementsByClassName("text");
    for(var index = 0; index < elements.length; index++) {
        var element = elements[index];
        element.className += "otherclass";
    }
}
</script>

Answer 2

我唯一能想到的接近它的就是使用兄弟样式

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

.text + a {
    border: 2px solid #fc0;
}

因此下一个同级项是样式，如果您可以按如下方式订购结构：

<div class="container">
    <a href="javascript:;" class="view">View more</a>
    <div class="text">
</div>

那么也许你可以

.text {
    display: none;
}
a:active + text {
    display: block;
}

然后您可以使用如下所示的 table 行样式对它们重新排序

将 "a" 设置为：显示：table-页脚组

将 "text" 设置为：显示：table-header-group

全部没有 Javascript，但很明显，当您没有激活 link 时，文本框就会消失 :-D

太棒了，你可以用一个复选框来代替..？当它处于活动状态时，可以设置相邻兄弟的样式：

https://css-tricks.com/almanac/selectors/c/checked/

input[type=checkbox] + .text {
    display: none;
} 
input[type=checkbox]:checked + .text {
    display: block;
}

另一种可能的解决方案

HTML

<div class="container">
    <label for="textView">Button Style Me</label>
    <input type="checkbox" name="textView" class="view">
    <div class="text">Some Text</div>
</div>

造型

input[type=checkbox] + .text {
    display: none;
} 
input[type=checkbox]:checked + .text {
    display: block;
}

Answer 3

如果你可以给锚而不是 'javascript:;' 一个片段，那么你可以利用锚的 :target 状态。

#view-more {
  display: none;
}

#view-more:target {
  display: block;
}
  <div class="container">        
        <a href="#view-more" class="view">View more</a>
        <div class="text" id="view-more">text</div>
    <div>

https://jsfiddle.net/karthick6891/g89fdagu/

但最好的替代方法是使用复选框，这样您将拥有更强大的 :checked 属性

如何把CSSclass改成上升

How to change CSS class to ascendent

css

amp-html