css的选择器

选择器

作用：查找标签，设置样式。

 基础选择器

•  id选择器

• 类选择器

• 标签选择器

• 通配符选择器

1. ID选择器 （具有唯一性）

选择器名称以#开始，后面再加上对应元素的id属性值 将对应元素的id属性值设为id选择器名称

<style>
  #main{ text-indent:3em; }      
  /*ID名称main前加上一个#号*/
</style>
<p id="main">文本缩进3em</p>

2. 类选择器

定义类选择器 → .类名

使用类选择器 → 标签添加 class="类名“

作用：查找标签，差异化设置标签的显示效果。 步骤：

<style>
  /* 定义类选择器 */ 
  .red { 
    color: red;
  } 
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>

注意：

• 类名自定义，不要用纯数字或中文，尽量用英文命名

• 一个类选择器可以供多个标签使用

• 一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：menu-item

3. 标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。 例如：p, h1, div, a, img......

<style>
  p {     
  color: red;
  } 
</style>

4. 通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {   color: red; }

经验：

• 通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距

* { 
    margin:0; 
    padding:0 
}

5. 复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

<span>span 标签</span>
<div> 
  <span>文字颜色是绿色</span> 
</div>

6. 并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

<style>
  div,p,span { 
    color: red;
  } 
</style>
<div> div 标签</div> 
<p>p 标签</p> 
<span>span 标签</span>

7. 派生选择器

• 后代选择器: 以空格分隔 (包括子元素和后代）

•  后代选择器

  后代选择器：选中某元素的后代元素。

  选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。

  <style>
    div span { 
      color: red;
    } 
  </style>
  <span> span 标签</span>
  <div>
    <span>这是 div 的儿子 span </span> 
  </div>

• 子元素选择器: 以>分隔 （只包括子元素）

• 相邻兄弟选择器:以+分隔  （紧挨着的）

• 普通兄弟选择器:以~分隔   （没有紧挨着的）

<style>
/*相邻兄弟选择器
选中和第一个元素相邻的第二个元素*/
p + b {
     color: red;
}
/*普通兄弟选择器
匹配和第一个元素后面的所有同级元素；*/
p ~ b {
    color: blue;
}
</style>
<ul class="wrapper">
   <li>1
       <b>这是粗体123</b>
       <p>这是一段段落</p>
       <span>12344555656</span>
       <b>这是粗体</b>
       <p>这是一段段落2</p>
   </li>
   <li>2
        <p>这是一段段落</p>
        <b>这是粗体</b>
        <b>这是粗体2</b>
    </li>
    <li>3</li>
</ul>

8. 伪类选择器

 伪类选择器 在css属性（二）中