html - 没有最后一个孩子的 CSS 属性

问题描述

我想添加一条灰色线来分隔红色 div，最终结果应该是：在此处输入图像描述

我在消除最后一个红色 div 之后的行时遇到问题，我的代码是：

<html>

    <head>
        <style>
            .authorsContainer{
                padding-right: 15px;
                padding-left: 15px;     
            }
            
            .authorIconVisibility, .authorName{
                float:left;
            }
            
            .booksContainer{
                display: flex;
                clear: both;
            }
            
            .bookContainer{
                float: left;
                flex: 1;
            }
            
            .bookInfo{
                position: relative;
                background: green;
            }
            
            .bookInfo:after{
                position: absolute;
                content: "";
                background: #ccc;
                height: 2px;
                left: 25%;
                right: 25%;
                margin-top: 5px;
            }
            
            .bookName, .bookYear{
                text-align: center;
            }
            
            .bookDescription{
                position: relative;
                background: red;
                min-height: 100px;
                margin: 10px;
            }
            
            .bookDescription:after{
                position: absolute;
                content: "";
                background: #ccc;
                width: 2px;
                top: 25%;
                bottom: 25%;
                right: -10px;
            }
        </style>
    </head>
    
    
    
    <body>
    
        <div class="authorsContainer">
            <div class="authorContainer">
                <div class="authorInfo">
                    <div class="authorIconVisibility">icon</div>
                    <div class="authorName">name</div>
                </div>          
                <div class="booksContainer">                
                    <div class="bookContainer">
                        <div class="bookInfo">
                            <div class="bookName">n1</div>
                            <div class="bookYear">y1</div>
                        </div>
                        <div class="bookDescription">
                        
                        </div>
                    </div>  
                    <div class="bookContainer">
                        <div class="bookInfo">
                            <div class="bookName">n2</div>
                            <div class="bookYear">y2</div>
                        </div>
                        <div class="bookDescription">
                        
                        </div>
                    </div>      
                    <div class="bookContainer">
                        <div class="bookInfo">
                            <div class="bookName">n3</div>
                            <div class="bookYear">y3</div>
                        </div>
                        <div class="bookDescription">
                        
                        </div>
                    </div>                  
                </div>
            </div>
        </div>
        
    </body>
</html>

我试图将最后一个 CSS 选择器更改为

.bookContainer .bookDescription:not(:last-child):after{
    position: absolute;
    content: "";
    background: #111;
    width: 2px;
    top: 25%;
    bottom: 25%;
    right: -10px;
}

但它不起作用（根本没有线条）。

我应该改变什么？

标签： htmlcss

html - 没有最后一个孩子的 CSS 属性

问题描述

解决方案

推荐阅读