css-选择器简介

前言

我也不知道为什么要再总结一遍，明明以前也总结过了。可能是买了书（《css权威指南》），膨胀了，再写一遍。

选择器

标签选择器

1 2	h1 {color: red} h1 , p {color: red}

通配选择器

1	*{color: red}

类选择器-多类选择器（使用空格分开）

<style>
  .class-selector-1{color: red}
  .class-selector-2{margin: 10px}
</style>
<span class="class-selector-1 class-selector-2">hello</span>

ID选择器

<style>
  #span-1{
    color: red
  }
</style>
<span id="span-1">hello</span>

属性选择器

<!--选择有class属性的所有h1元素-->
<style>
  h1[class]{
    color: red;
  }
</style>
<h1 class="selector">hello</h1>
<h1 class="selector">woeld</h1>
<h1 class="selector">yes</h1>

后代选择器（根据文档结构）

选择所有子元素

<!--所有符合条件的后代都会应用-->
<style>
  h1 span{
    color: red;
  }
</style>
<h1>
  <span>hello</span><span>world</span>
</h1>
<h1>
  <em>
    <span>你好</span><span>世界</span>
  </em>
</h1>

效果如下：

普通后代选择器

选择一个子元素

<style>
  h1 > span{
    color: red;
  }
</style>
<h1>
  <span>hello</span><span>world</span>
</h1>
<h1>
  <em>
    <span>你好</span><span>世界</span>
  </em>
</h1>

效果如下：

限定范围的后代选择器

选择相邻兄弟元素

<style type="text/css">
h1 + p {margin-top:50px;}
</style>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>