如何使用 style.css 更改 bookdown 中的滚动突出显示颜色？

Question

Bookdown 有一个很酷的内置功能，侧栏会自动以蓝色突出显示您当前滚动或阅读的部分。但是，我不知道如何更改 style.css 页面中的颜色。如果我使用 a:link 它会完全删除滚动突出显示功能。

Answer 1

/*style.css*/

/* Basic styling for the sidebar */
.sidebar {
    width: 200px;
    float: left;
    border-right: 1px solid #ddd;
}

.nav {
    list-style-type: none;
    padding: 0;
}

.nav-link {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
}

.nav-link:hover {
    background-color: #f0f0f0;
}

/* Custom style for the active sidebar link */
.nav-link.active {
    background-color: #007bff; /*desired highlight background color */
    color: #ffffff; /* Text color when active */
    font-weight: bold; /* Optional: Make the text bold*/
}

/*Main content area*/
.content {
    margin-left: 220px;
    padding: 20px;
}

    <div class="bookdown">
        <div class="sidebar">
            <ul class="nav">
                <li><a href="#section1" class="nav-link">Section 1</a></li>
                <li><a href="#section2" class="nav-link">Section 2</a></li>
                <li><a href="#section3" class="nav-link active">Section 3</a></li>
                <li><a href="#section4" class="nav-link">Section 4</a></li>
            </ul>
        </div>
        <div class="content">
            <h1 id="section1">Section 1</h1>
            <p>Content for section 1.</p>
            <h1 id="section2">Section 2</h1>
            <p>Content for section 2.</p>
            <h1 id="section3">Section 3</h1>
            <p>Content for section 3.</p>
            <h1 id="section4">Section 4</h1>
            <p>Content for section 4.</p>
        </div>
    </div>

• HTML：

侧边栏是一个简单的链接列表

<ul class="nav">

，其中一个链接具有

active

类。

content

div 包含页面的各个部分。

• CSS：

.nav-link

设置侧边栏中链接的基本外观样式。

.nav-link.active

设置活动链接的样式，将其背景颜色更改为蓝色

#007bff

，将文本颜色更改为白色

#ffffff

。您可以根据自己的喜好调整这些颜色。