选择器

选择器的使用

选择器的功能：

• 选择要添加样式的标签元素

   div{
   
            color: red;
        }

**

1、什么是标签选择器？

**

• 通过标签名直接选择相应的标签。
• 不管有多复杂的嵌套关系，标签的位置就算藏得很深，依然可以被标签选择器命中。
• 格式：标签名{
  声明
  }

标签选择器的作用：

        1.利用标签选中所有的特性，进行默认样式的清除。
        2.复杂选择器中一部分使用。

 p{
   
     background-color: sandybrown;
  }

 <div >我是div盒子
        <div>
            <p>我是段落3</p>
        </div>
    </div>

2、ID选择器

• 作用：选中页面中唯一一个标签。

• 格式：#id值{
  声明
  }
  【注】：
  1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。
  2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能以数字开头。
  3.见名知意。不要起毫无意思的名字。
  id命名的两种书写方法：
  1.驼峰写法：SearchButton(大驼峰) searchButton(小驼峰，推荐) 多个单词，从第二个单词开始，每个单词的首字母大写。
  2.下划线写法：search_button 多个单词，从第二个单词开始，每个单词的前面添加一条下划线。
  【注】：

• id选择器尽量不要在css中使用，而是配合js使用。
  eg

  #china-hello{
   
            color: red;
        }

<div>世界，你好</div>
    <div id="china-hello">中国，你好</div>

3、类选择器

• 作用：通过标签中的class属性选择标签
• 优点：可以根据需要选择一部分标签添加相同的样式。
• 格式：class值{
  声明
  }
  【注】
  1.class值可以不唯一。类选择器选中的是拥有相同class值得标签元素。
  2.一个标签可以拥有多个class值。
  3.命名规则与ID相同

  .across{
   
            color: red;
        }
        .look{
   
            background-color: seagreen;
        }

 <div>题西林壁</div>
    <div class="across look">横看成岭侧成峰</div>
    <div>远近高低各不同</div>
    <p class="across">不识庐山真面目</p>
    <p class="across">只缘身在此山中</p>

4、通配符

* :表示选中所有标签。（包含body标签。）

• 建议慎用，现在已经不常用了，效率太低，呈现一道切的效果，所有的标签都会执行一次css代码

 *{
   
          color: seagreen;
            /* 外边距 */
            margin: 0;
            /* 内边距 */
            padding: 0;
        }

<div>题西林壁