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

问题描述 投票:0回答:1

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

css bookdown
1个回答
0
投票

/*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
。您可以根据自己的喜好调整这些颜色。

© www.soinside.com 2019 - 2024. All rights reserved.