Problem background
When designing pages, we often encounter page layouts like this:
In the figure, there are multiple content blocks in a container, and each block has an underline at the bottom. However, generally, for the sake of beauty, the underline of the last content block should be removed
Next, let's look at how this style is handled in general:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* Here is the basic display style, which can be ignored */
.container{
border: 1px solid black;
border-radius: 10px;
width: 300px;
height: 500px;
margin: 100px auto;
}
.child{
margin: 0 auto;
width: 200px;
height: 98px;
border-bottom: 1px solid rgb(172, 163, 163);
line-height: 98px;
}
/* Here is the key style to see */
.last{
border-bottom: 0;
}
style>
head>
<body>
<div class="container">div>
<script>
const elementList = ['I am content 1','I am content 2','I am content 3','I am content 4','I am content 5']
const container = document.querySelector('.container')
// Dynamically add child elements to the container
elementList.forEach((v, i, a) => {
const el = document.createElement('div')
/* Determine whether the added child element is the last one
If yes, give a last class name
*/
el.className = i == a.length - 1 ? 'child last' : 'child'
el.innerHTML = v
container.appendChild(el)
})
script>
body>
html>In the above code, it is assumed that we do not know how many child elements to add to the container, so we can only judge whether it is the last one every time. If so, add a last class name to clear the border bottom
This can solve the problem, but there is a * * defect. That is, if more content is dynamically added to the container after adding these contents, the bottom of the last content block last time is not underlined because it is added with a last class name, At this time, it is similar to the scenario of "pull-down load more" * * let's simulate it very simply:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* Here is the basic display style, which can be ignored */
.container{
border: 1px solid black;
border-radius: 10px;
width: 300px;
height: 500px;
margin: 100px auto;
overflow: scroll;
}
.child{
margin: 0 auto;
width: 200px;
height: 98px;
border-bottom: 1px solid rgb(172, 163, 163);
line-height: 98px;
}
/* Here is the key style to see */
.last{
border-bottom: 0;
}
style>
head>
<body>
<div class="container">div>
<script>
const container = document.querySelector('.container')
const elementList = ['I am content 1','I am content 2','I am content 3','I am content 4','I am content 5']
function debounce(fn, delay=500) {
let timer = null
return function(...args) {
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args)
clearTimeout(timer)
}, delay)
}
}
// Anti shake processing
let addMore = debounce(function(container, list) {
list.forEach((v, i, a) => {
const el = document.createElement('div')
el.className = i == a.length - 1 ? 'child last' : 'child'
el.innerHTML = v
container.appendChild(el)
})
})
// When the page is loaded for the first time, content is dynamically added to the container
addMore(container, elementList)
// Add a rollover event to the container
container.addEventListener('scroll', function() {
addMore(container, elementList)
})
script>
body>
html>Let's see what happens when the container rolls down:
It can be clearly seen from the above dynamic diagram that after each section of content is loaded, the bottom of the last section of the previous section is not underlined, which is very unfriendly
Next, let's introduce a css tip to solve the embarrassment of the above problems
Solution
Here you can use the * * brother selector * * of css, that is, element1 + element2, which represents all element2 at the same level after selecting element1
Let's take a look at the specific code implementation:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* Here is the basic display style, which can be ignored */
.container{
border: 1px solid black;
border-radius: 10px;
width: 300px;
height: 500px;
margin: 100px auto;
overflow: scroll;
}
.child{
margin: 0 auto;
width: 200px;
height: 98px;
line-height: 98px;
}
/* Here is the key style to see */
.child + .child {
border-top: 1px solid rgb(172, 163, 163);
}
style>
head>
<body>
<div class="container">div>
<script>
const container = document.querySelector('.container')
const elementList = ['I am content 1','I am content 2','I am content 3','I am content 4','I am content 5']
function debounce(fn, delay=500) {
let timer = null
return function(...args) {
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args)
clearTimeout(timer)
}, delay)
}
}
// Anti shake processing
let addMore = debounce(function(container, list) {
list.forEach((v, i, a) => {
const el = document.createElement('div')
el.className = 'child'
el.innerHTML = v
container.appendChild(el)
})
})
// When the page is loaded for the first time, content is dynamically added to the container
addMore(container, elementList)
// Add a rollover event to the container
container.addEventListener('scroll', function() {
addMore(container, elementList)
})
script>
body>
html>In the above code child + .child means to select all the elements with the class name child of the same level after the class name child, so the first element with the class name child cannot be selected. Therefore, in order to achieve the effect, we choose to set the border top for each element selected, so as to achieve the desired effect, and even if more elements are dynamically added later, It won't be a problem
Effect verification:
summary
Briefly summarize the advantages of the css tips introduced in this article:
- Make the project code more concise
- It will not have redundant class names like traditional processing methods
- Elements that can adapt to dynamic changes
I hope this tip is helpful to you. If there are other more ingenious methods, you can comment and tell me~