使用文档片段的CSS选择器

Consider the following sample code

考虑下面的示例代码

<body>
    <nav>
        <a href="#s1">First Section</a>
        <a href="#s2">Section 2</a>
    </nav>
    <main>
        <section id="s1">
            <p>Example paragraph
            <p>Paragraph 2
        </section>
        <section id="s2">
            <p>Example paragraph
            <p>Paragraph 2
        </section>
    </main>
</body>

I can select the section that is selected with

我可以选择所选择的部分

section {
    background: #fff;
}

section:target {
    background: #f00;
}

But I want to target the a that selected it using only HTML/CSS, which I could imagine being like

但是我想把a作为目标，它只使用HTML/CSS，我可以想象成这样

a[href=:target] {
    font-weight: bold;  
}

或

a:target(href) {
    font-weight: bold;
}

The only solution I could come up with is

我能想到的唯一办法就是。

HTML:

<body>
    <div id="s1"><div id="s2">
        <nav>
            <a href="#s1">First Section</a>
            <a href="#s2">Section 2</a>
        </nav>
        <main>
            <section name="s1">
                <p>Example paragraph
                <p>Paragraph 2
            </section>
            <section name="s2">
                <p>Example paragraph
                <p>Paragraph 2
            </section>
        </main>
    </div></div>
</body>

CSS:

#s1:target a[href="#s1"],
#s2:target a[href="#s2"] {
    font-weight: bold;
}

section {
    background: #fff;
}

#s1:target section[name="s1"],
#s2:target section[name="s2"] {
    background: #f00;
}

I don't like this, however, because it introduces needless elements (the divs to target).

然而，我不喜欢这样，因为它引入了不必要的元素(针对目标的div)。

Is there a clean way to do this without JavaScript?

在没有JavaScript的情况下，是否有一种干净的方法来实现这一点?

1 个解决方案

#1

While the :target pseudo-class exists for matching a named anchor or an element with an ID corresponding to the current URL fragment, CSS does not provide a selector for matching links that point to the current URL fragment.

虽然:target伪类的存在是为了匹配命名锚或元素与当前URL片段对应的ID，但是CSS没有提供指向当前URL片段的链接的选择器。

There is no clean way to do this without JavaScript. I would heavily prefer using JavaScript over polluting the markup with unsemantic elements and invalid attributes for the sake of accommodating CSS (section elements cannot have name attributes).

没有JavaScript就没有干净的方法来实现这一点。我更喜欢使用JavaScript，而不是使用非语义元素和无效属性来污染标记，以适应CSS (section元素不能有名称属性)。

The hashchange event is well-supported, so if you can afford it it's simply a matter of listening for that event and toggling a class on the right element:

hashchange事件得到了很好的支持，所以如果您负担得起，只需监听该事件并在正确的元素上切换类:

var navLinks = document.querySelectorAll('nav > a');

window.onhashchange = function() {
    for (var i = 0; i < navLinks.length; i++) {
        if (navLinks[i].href.match(/(#.*)/)[1] == window.location.hash) {
            navLinks[i].className = 'selected';
        } else {
            navLinks[i].className = '';
        }
    }
};

var navLinks = document.querySelectorAll('nav > a');

window.onhashchange = function() {
    for (var i = 0; i < navLinks.length; i++) {
        if (navLinks[i].href.match(/(#.*)/)[1] == window.location.hash) {
            navLinks[i].className = 'selected';
        } else {
            navLinks[i].className = '';
        }
    }
};

section {
    background: #fff;
}

section:target {
    background: #f00;
}

a.selected {
    font-weight: bold;
}

<nav>
    <a href="#s1">First Section</a>
    <a href="#s2">Section 2</a>
</nav>
<main>
    <section id="s1">
        <p>Example paragraph
        <p>Paragraph 2
    </section>
    <section id="s2">
        <p>Example paragraph
        <p>Paragraph 2
    </section>
</main>

#1

虽然:target伪类的存在是为了匹配命名锚或元素与当前URL片段对应的ID，但是CSS没有提供指向当前URL片段的链接的选择器。

The hashchange event is well-supported, so if you can afford it it's simply a matter of listening for that event and toggling a class on the right element:

hashchange事件得到了很好的支持，所以如果您负担得起，只需监听该事件并在正确的元素上切换类:

var navLinks = document.querySelectorAll('nav > a');

window.onhashchange = function() {
    for (var i = 0; i < navLinks.length; i++) {
        if (navLinks[i].href.match(/(#.*)/)[1] == window.location.hash) {
            navLinks[i].className = 'selected';
        } else {
            navLinks[i].className = '';
        }
    }
};

var navLinks = document.querySelectorAll('nav > a');

window.onhashchange = function() {
    for (var i = 0; i < navLinks.length; i++) {
        if (navLinks[i].href.match(/(#.*)/)[1] == window.location.hash) {
            navLinks[i].className = 'selected';
        } else {
            navLinks[i].className = '';
        }
    }
};

section {
    background: #fff;
}

section:target {
    background: #f00;
}

a.selected {
    font-weight: bold;
}

<nav>
    <a href="#s1">First Section</a>
    <a href="#s2">Section 2</a>
</nav>
<main>
    <section id="s1">
        <p>Example paragraph
        <p>Paragraph 2
    </section>
    <section id="s2">
        <p>Example paragraph
        <p>Paragraph 2
    </section>
</main>

秒客网

使用文档片段的CSS选择器

1 个解决方案

#1

#1

相关文章