<html><head> <title>父子关系</title> <base target="_blank"><style><!--h1{ color:red; /* 颜色 */ text-decoration:underline; /* 下划线 */}h1 em{ /* 嵌套选择器 */ color:#004400; /* 颜色 */ font-size:40px; text-decoration:none; /*这个添加上去没有效果;*/}em{ text-decoration:none;}--></style> </head><body> <h1>祖国的首都<em>北京</em></h1></body></html>
Inheritance is actually correct. You are canceling the underline of the child. At this time, the child has no underline. , what you see is actually from the parent, because your em is included in the parent, so it creates an illusion. Half of it does not exist in reality.
To achieve the effect you said, just write it in reverse, cancel the underline in the parent, and set it separately where needed in the child
<style>h1{ color:red; /* 颜色 */ -moz-text-decoration-style:solid; -moz-text-decoration-color:#0F0; -moz-text-decoration-line:underline; /* 下划线 */}h1 em{ /* 嵌套选择器 */ color:#004400; /* 颜色 */ font-size:40px; -moz-text-decoration-style:solid; -moz-text-decoration-color:#00C; -moz-text-decoration-line:underline; /*这个添加上去没有效果;*/}</style></head><body> <h1>祖国的首都<em>北京</em></h1></body>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
