在使用CSS进行修改标签样式时,有时同一个标签需要修改成不同的样式。但是以前的办法无法实现。这就需要使用后代选择器以及子元素选择器。
1、后代选择器
顾名思义,后代选择器就是选择后代,把一个标签的所有后代都进行修改。
格式为:标签1 标签2(标签以及后代之间需要使用空格来隔开)。
后代选择器也可以与id和class一起使用来表示后代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
ul p{
color: red;
}
#n1 p{
font-style: italic;
}
.c1 p{
font-size: 40px;
}
</style>
</head>
<body>
<p>去年今日此门中,</p>
<ul id="n1" class="c1">
<li>
<p>人面桃花相映红。</p>
</li>
<p>人面不知何处去,</p>
</ul>
<p>桃花依旧笑春风。</p>
</body>
</html>
2、子元素选择器
与后代选择器不同,子元素选择器只会选择特定的标签进行修改。
格式为:标签1>标签2
和后代选择器一样,允许与id和class一起使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
ul > li > p {
color: red;
}
#n1 > li > p {
font-style: italic;
}
.c1 > li > p {
font-size: 40px;
}
</style>
</head>
<body>
<p>去年今日此门中,</p>
<ul id="n1" class="c1">
<p>人面桃花相映红。</p>
<li>
<p>人面不知何处去,</p>
</li>
</ul>
<p>桃花依旧笑春风。</p>
</body>
</html>