nth-last-child 选最后一个:before
时间: 2023-12-20 11:17:04 浏览: 39
nth-last-child 选择器可以选择父元素的最后一个子元素,但是无法选择伪元素,因为伪元素本质上不是DOM中的实际元素,而是在渲染时生成的虚拟元素。因此,在使用伪元素时无法使用nth-last-child选择器。如果想要在伪元素中选择最后一个元素,可以尝试使用nth-last-of-type选择器,或者使用其他的CSS技巧来实现。例如,可以使用多个伪元素来模拟选择最后一个元素的效果。
相关问题
利用html做一个可以炫酷的翻页的页面
好的,以下是一个简单的炫酷翻页的 HTML 页面代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Cool Page Flip</title>
<style>
body {
margin: 0;
background-color: #222;
color: #fff;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #444;
transform-origin: 0 50%;
transition: transform 0.8s ease-in-out;
backface-visibility: hidden;
overflow: hidden;
}
.page.active {
transform: perspective(600px) rotateY(0deg);
z-index: 2;
}
.page.inactive {
transform: perspective(600px) rotateY(-180deg);
z-index: 1;
}
.page:first-child {
background-color: #f00;
}
.page:nth-child(2) {
background-color: #0f0;
}
.page:last-child {
background-color: #00f;
}
.page:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: -1;
opacity: 0;
transition: opacity 0.5s;
}
.page.active:before {
opacity: 1;
}
.page.inactive:before {
opacity: 0;
}
.page-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 3rem;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="page active">
<div class="page-content">Page 1</div>
</div>
<div class="page inactive">
<div class="page-content">Page 2</div>
</div>
<div class="page inactive">
<div class="page-content">Page 3</div>
</div>
<script>
const pages = document.querySelectorAll('.page');
let currentPageIndex = 0;
function showNextPage() {
pages[currentPageIndex].classList.remove('active');
pages[currentPageIndex].classList.add('inactive');
currentPageIndex = (currentPageIndex + 1) % pages.length;
pages[currentPageIndex].classList.remove('inactive');
pages[currentPageIndex].classList.add('active');
}
setInterval(showNextPage, 3000);
</script>
</body>
</html>
```
这段代码会创建一个带有三个页面的 HTML 页面,每个页面的背景颜色都不同,页面之间会以翻页的动画效果切换。可以通过修改页面中的 CSS 样式来改变页面的外观和动画效果,通过修改 JavaScript 代码中的时间间隔来改变页面自动切换的时间。
c3选择器有哪些 细分
C3选择器是CSS3中新增的选择器,包括以下几种:
1. 属性选择器:[attribute]、[attribute=value]、[attribute~=value]、[attribute|=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]
2. 伪类选择器::root、:empty、:target、:checked、:not()、:nth-child()、:nth-last-child()、:first-child、:last-child、:only-child、:nth-of-type()、:nth-last-of-type()、:first-of-type、:last-of-type、:only-of-type、:enabled、:disabled、:checked、:indeterminate、:default、:valid、:invalid、:in-range、:out-of-range、:required、:optional、:read-only、:read-write、:dir()、:lang()
3. 伪元素选择器:::before、::after、::first-letter、::first-line、::selection
4. 组合选择器:后代选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器
以上就是C3选择器的细分。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)