CSS 层次选择器

CSS个人整理

第一种后代选择器

<style>
  }
  body h1{
      color: red;   //红色字体
  }
</style>
<body>
<h1>史迪奇骑士<h1>
<h1>史迪奇打手<h1>
<h1>史迪奇国王<h1>
</body>

后代选择器: 在某个元素的后面祖爷爷爷爷爸爸儿子

<style>
  }
  body>h1{
      color: red;   //红色字体
  }
</style>
<body>
<h1>史迪奇骑士<h1>
<h1>史迪奇打手<h1>
<h1>史迪奇国王<h1>
</body>

子选择器: 只有一代儿子

<style>
  }
  .sdq+h1{
      color: red;   //红色字体
  }
</style>
<body>
<h1>史迪奇骑士<h1>
<h1 class="sdq1">史迪奇打手<h1>
<h1>史迪奇国王<h1>
</body>

相邻兄弟选择器: 只有一个, 相邻(向下)

<style>
  }
  .sdq~h1{
      color: red;   //红色字体
  }
</style>
<body>
<h1>史迪奇骑士<h1>
<h1 class="sdq1">史迪奇打手<h1>
<h1>史迪奇国王<h1>
</body>

通用选择器: 当前选中元素的向下的所有兄弟元素

作者: 我叫史迪奇
本文来自于: https://sdq3.link/CSS+.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议