Question

我正在尝试将padding: 100px应用于通过nth-child定位的某些元素，但只有在我将其直接应用于work-layer类时才有效。为什么呢？

* {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
}

.nav {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 25px;
}

.nav-item {
	text-decoration: none;
	color: white;
	text-transform: uppercase;
	font-weight: bolder;
	font-size: 1.3em;
	padding: 0 10px;
}

.logo {
	width: 50px;
	height: 85px;
	padding-right: 150px;
}

.landing {
	background-image: url('img/bg.png');
	height: 800px;
	margin-top: -150px;
}

.who-am-i {
	color: white;
	font-size: 3.5em;
	font-weight: bold;
	padding-top: 25px;
}

.cursor {
	background: white;
	width: 7px;
	height: 75px;
	margin-top: 30px;
	animation: blink .8s steps(5, start) infinite;
}

@keyframes blink {
	to { visibility: hidden; }
}

.layer {
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,.5);
	height:100%;
	color: white;
}

.my-work-heading {
	text-align: center;
	text-transform: uppercase;
	color: white;
	background: #000;
	padding: 15px;
}
.work {
	width: 100%;
}

.work-layer {
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: white;
	height: 100%;
	padding-left: 100px;
}

.work:nth-child(odd) { 
	text-align: right;
}

.work:nth-child(even) {
}

.name { 
	font-size: 3em;
	text-transform: uppercase;
}

.desc {
	font-size: 1.75em;
	width: 40%;
}

.url {
	font-weight: bold;
	font-size: 1.5em;
	color: white;
}

.work-layer { height: 300px; }

.layer-textastic { background-color: rgba(0,133,255,1); }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jordan Baron</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="nav">
		<img src="img/logo.png" alt="logo" class="logo">
		<a href="#" class="nav-item">My Work</a>
		<a href="#" class="nav-item">Projects</a>
	</div>
	
	<div class="landing">
		<div class="layer">
			<div class="who-am-i"></div>
			<div class="cursor"></div>
		</div>
	</div>

	<div class="my-work-heading">
		<h1>My Work</h1>
	</div>

	<div class="work">
		<div class="work-container textastic">
			<div class="work-layer layer-textastic">
				<h1 class="name">Textastic</h1>
				<p class="desc">I made this website as an homage to a great little text editor for iOS known as Textastic</p>
				<a href="#" class="url">jordanbaron.me/Updated-Textastic-Site</a>
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<script src="type.js"></script>
	<script src="scripts.js"></script>
</body>
</html>

Answer 1

我认为你出错的地方认为.work:nth-child()会影响.work的孩子。也许有点混乱，nth-child会影响选择器的第n个出现。

也就是说，.work:nth-child(even)将选择第2，第4和第6 .work类：

.work:nth-child(even) {
  color: red;
}

<div class="work">One</div>
<div class="work">Two</div>
<div class="work">Three</div>
<div class="work">Four</div>
<div class="work">Five</div>
<div class="work">Six</div>

如果您希望定位直接子女，则可以使用 child combinator (>) 以.work > *为目标定位任何正常工作的元素。

但是，考虑到您只有一个.work-container，您最好直接引用.work-container。

希望这有帮助！：）

Answer 2

您只有一个.work元素，因此nth-child规则不会产生太大影响。

但是，如果要解决.work的子元素，可以使用（例如）此选择器：.work > *:nth-child(odd) { ... }。这将选择.work的所有奇数子元素，无论其类型如何。

为什么这种风格不适用于目标元素？

2 个答案: