我有这种风格：
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-size: 62.5%;
height: 100%;
overflow: hidden;
}
body {
background: #000;
}
这仅适用于轮播，我如何将其应用于轮播部分而不是孔文档？
我尝试使用.section-home类选择该部分，但没有成功，我想不出一种方法，而且我不能使用body和html选择器，因为它们会破坏页面的其余部分
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>| AQUASafe</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/bootstrap/bootstrap.css" />
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/slick-theme.css">
<link rel="stylesheet" href="assets/css/helpers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/aos.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark probootstrap_navbar probootstrap_scrolled-light fixed-top" id="probootstrap-navbar">
<div class="container">
<a class="navbar-brand" href="#">
<img src="assets/img/logo.png" alt="Logo" class="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="probootstrap-menu"
aria-expanded="false" aria-label="Toggle navigation">
<span>
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="probootstrap-menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#section-home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#asection-bout">QUI SOMME NOUS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-metiers">NOS MÉTIERS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-services">SERVICES
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-products">PRODUITS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
<!-- Carousel 2 -->
<section class="scroll main-carousel" id="section-home">
<div class="slider-container ">
<div class="slider-control left inactive "></div>
<div class="slider-control right "></div>
<ul class="slider-pagi "></ul>
<div class="slider">
<div class="slide slide-0 active ">
<div class="slide__bg"></div>
<div class="slide__content ">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text text-carousel">
<h2 class="slide__text-heading ">Project name 1</h2>
<p class="slide__text-desc ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
<a class="slide__text-link ">Project link</a>
</div>
</div>
</div>
<div class="slide slide-1 ">
<div class="slide__bg"></div>
<div class="slide__content ">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Project name 2</h2>
<p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
<a class="slide__text-link">Project link</a>
</div>
</div>
</div>
<div class="slide slide-2">
<div class="slide__bg"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Project name 3</h2>
<p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
<a class="slide__text-link">Project link</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--ENd Carousel 2 -->
<!-- About section -->
<section class="probootstrap-section-half d-md-flex scroll" id="section-about">
<div class="probootstrap-text">
<div class="probootstrap-inner probootstrap-animate" data-animate-effect="fadeInRight">
<h2 class="heading mb-4">QUI SOMME NOUS</h2>
<p>AQUASafe est une entreprise de service et de développement de solutions technologiques, précurseur dans les
services liés à l’environnement et à la qualité de l’eau.
</p>
<p>Nos solutions, développées autour de l’Internet Des Objets (appliquée dans le secteur industrielles), sont
destinées aux entreprises et organismes pour leurs faciliter la collecte, transmission, et visualisation
à distance de données, leurs permettant ainsi de réagir rapidement en cas de besoin.</p>
</div>
</div>
<div class="probootstrap-image probootstrap-animate" data-animate-effect="fadeIn" style="background-image: url(assets/img/img1.jpg)">
</div>
</section>
<!-- END About section -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.mb.YTPlayer.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/aos.js"></script>
<script src="assets/js/jquery.scrollify.js"></script>
<script src="assets/js/main.js"></script>
<script>
AOS.init();
</script>
<script>
$(function() {
$.scrollify({
section : ".scroll",
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
例如，如果您的轮播位于Div中，则需要将css命名为以下示例中的轮播名称
<div id="myCarousel" class="carousel slide" data-ride="carousel">
.myCarousel::before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 62.5%;
height: 100%;
overflow: hidden;
background: #000;
}
答案 1 :(得分：0)
我想您是指 Carousel 2 Section
<section class="scroll main-carousel" id="section-home">
要将CSS样式仅应用于此部分，请使用
section .main-carousel {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 62.5%;
height: 100%;
overflow: hidden;
background: #000;
}<section class="scroll main-carousel" id="section-home">
<div class="slider-container ">
<div class="slider-control left inactive "></div>
<div class="slider-control right "></div>
<ul class="slider-pagi "></ul>
<div class="slider">
<div class="slide slide-0 active ">
<div class="slide__bg"></div>
<div class="slide__content ">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text text-carousel">
<h2 class="slide__text-heading ">Project name 1</h2>
<p class="slide__text-desc ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
<a class="slide__text-link ">Project link</a>
</div>
</div>
</div>
<div class="slide slide-1 ">
<div class="slide__bg"></div>
<div class="slide__content ">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Project name 2</h2>
<p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
<a class="slide__text-link">Project link</a>
</div>
</div>
</div>
<div class="slide slide-2">
<div class="slide__bg"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Project name 3</h2>
<p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
<a class="slide__text-link">Project link</a>
</div>
</div>
</div>
</div>
</div>
</section>