数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何为每个在其前面紧邻有元素的元素设置样式？
选择器是 CSS 样式的重要组成部分，因为应用于元素的所有属性都是使用选择器完成的；也可以根据元素与其他元素的关系来选择元素，例如具有前置元素或系列中任何其他元素的元素。有兄弟组合器、子组合器和相邻兄弟组合器。
在本文中，我们将了解如何为在其前面紧邻有元素的元素设置样式。
为带有相邻元素的元素设置样式
可以使用相邻兄弟选择器轻松地为彼此相邻的元素设置样式，它将选择紧邻或位于指定选择器标签旁边的元素，并且它只能选择一个紧邻指定标签的标签。让我们看看相邻兄弟选择器的语法。
语法
former_element + target_element {properties to be applied}
我们用于选择元素的选择器以及 (+) 选择器都是不同类型的组合器，在这种情况下，两个选择器将通过它们之间的 (+) 选择器组合在一起。为了更好地理解这一点，让我们看一个例子。
示例
该选择器将只选择一个接一个出现的兄弟元素，这意味着这两个元素将共享同一个父元素。让我们看看示例代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of styling every element which will be adjacent item right before it</title>
<style>
h1 {
color: lightblue;
}
img + p {
color: yellow;
}
img + p + p {
color: darkblue;
img + p {
color: yellow;
}
}
</style>
</head>
<body>
<center>
<h1>Hello, welcome to an example</h1>
<img src="https://tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="scenery image" />
<p>this is the first paragraph coming after the image</p>
<p>this is the second paragraph coming after the image</p>
<p>this is the third paragraph coming after the image</p>
</center>
</body>
</html>
在上面的代码中，我们首先创建了一个标题标签，然后在标题之后使用了图像，然后添加了三行段落。我们使用兄弟选择器为它们设置了样式。图像选择器和段落选择器之间的 (+) 符号告诉我们图像和段落之间的关系。
在上面的输出中，我们可以看到标题及其下方的段落使用兄弟组合器设置了样式。
组合器或选择器将分离两个选择器，在本例中是图像和第一行段落，然后是图像和第二行段落。第二个元素必须紧跟第一个元素，并且两者都应该是同一个父元素的子元素，如下面的代码所示。
img+p{
color:red;
}
在上面的代码中，您可以看到图像为第一个子元素，第二个子元素与兄弟连接器连接。
示例
让我们再看一个例子来更好地理解这个属性。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Another example of the sibling connector </title>
<style>
div+p {
font-weight: bold;
color: lightgreen;
margin: 0px;
font-size: 37px;
text-align: center;
}
h2 {
color: lightblue;
}
p {
text-align: center;
}
div {
text-align: center;
}
</style>
</head>
<body>
<center>
<h1>Hi, this is an example </h1>
<div>An example of Adjacent sibling selector property</div>
<p>How is your day going?</p>
<div>
<div>This is the child element</div>
<p>Good morning</p>
</div>
<p>Good Evening</p>
<p>Good Night</p>
</center>
</body>
</html>
在上面的代码中创建了标题和容器以及段落，然后在 CSS 部分，我们为标题设置了颜色以进行区分，之后使用了带有段落标签的兄弟组合器，因此我们能够使用兄弟组合器为段落和 div 设置样式。
让我们看看使用以下代码后将获得的输出。
在上面的示例中，您可以看到标题标签具有另一种颜色，而 div 和段落标签（div 和段落标签）具有相同的颜色，因为我们使用了兄弟选择器。
什么是兄弟选择器？
有两个兄弟连接器，一个是通用兄弟连接器，另一个是相邻兄弟选择器。它主要用于选择共享相同父元素的一组元素。
相邻兄弟选择器选择紧邻或位于指定标签旁边的元素，并且还选择一个紧邻指定标签的标签。
(+) 用于相邻兄弟选择器
(~) 用于通用兄弟选择器
结论
连接器用于指定两个选择器之间的关系，相邻兄弟选择器也是这些连接器的一部分。(+) 符号将用于选择紧邻第一个选定元素的元素。这些选择器允许开发人员为彼此相邻的元素或具有相同父元素的元素设置样式。
在本文中，我们看到了如何为每个具有…的元素设置样式
66 次查看
