如何为具有相同父级的两个嵌套元素设置样式
[英]how to style two nested elements with the same parent
问题描述
I have a quiz to change styling for two (p) inside (div) elements but the first one the border color is #ff5622 , and the second has a different color like this image How to do that
我有一个测验来更改两个 (p) 内部 (div) 元素的样式，但第一个的边框颜色是#ff5622 ，第二个具有不同的颜色，如这张图片 怎么做
<div>
<p>This Is Paragraph</p>
</div>
2 个解决方案
解决方案1
1 已采纳 2021-09-07 09:14:44
You can take a look at the nth-child selector.您可以查看第 n 个子选择器。
The:nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.
n can be a number, a keyword, or a formula.
Tip: Look at the:nth-of-type() selector to select the element that is the nth child, of a particular type, of its parent.
Or the nth-of-type property.或第n 个类型的属性。
If your HTML is:如果您的 HTML 是：
div:nth-of-type(1) > p { color: red; } div:nth-of-type(2) > p { color: blue; }
<div> <p>First paragraph</p> </div> <div> <p>Second paragraph</p> </div>
解决方案2
1 2021-09-07 09:27:27
You can give class for every "p" tag.您可以为每个“p”标签提供 class。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.p1{
height: 50px;
width: 200px;
border: 2px solid red;
}
.p2{
height: 50px;
width: 200px;
border: 2px solid green;
}
</style>
<title>Document</title>
</head>
<body>
<div>
<p class="p1">This is paragraph</p>
<p class="p2">This is paragraph</p>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.