CSS基础：常用CSS选择器（标签选择器、id选择器、class选择器）的简单应用

本文链接：https://blog.csdn.net/Alley_Olive/article/details/125538466

<!DOCTYPE html>
<html lang="en">
<head>
     <!-- 
        CSS一般写在以下3个地方：
        1、元素标签的style属性中
        2、html文档的<style></style>标签中
        3、在.css文件中
     -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="CSS/01.css">  <!-- 引用CSS文件 -->
    <!--
        CSS语法格式：
        1、CSS语法是由特征和值成对出现
        2、每组特征值之间用;(英文分号)隔开
        3、除了在元素标签中设置style属性外，另外2种写法必须写在{}内
    -->
    <!--
        在style标签或.css文件中：
        标签选择器 {
            特征1: 值1; 
            特征2: 值2; 
            特征3: 值3;
        }
        特征可以理解为标签样式的类型代号，例如：元素背景色background-color，
        每个特征对应多个值，例如：background-color:red; 或者 background-color:green;等等。
    -->
    <!--
        CSS选择器：
          1、通过标签名获取（标签选择器），直接写标签名即可
          2、通过id属性获取（id选择器），需要在id名前添加#
          3、通过class属性获取（class选择器），需要在class名前添加.
        CSS选择器优先级比较：
          1、style属性 > id选择器 > class选择器 > 标签选择器
          2、就近原则，标签选择器越后写，越能覆盖之前的样式，但是依然没有前3种（style属性、id选择器、class选择器）优先级高
    -->
   <style>
      div{
        width: 100px; 
        height: 100px; 
        background-color:dodgerblue;
      }
      #id_div3{
        background-color: greenyellow;
      }
      .class_div5{
        background-color: deeppink;
      }
   </style>
    <title>CSS选择器：标签选择器、id选择器、class选择器</title>
</head>
<body>
     <!--
        在style属性中：
        style="特征1: 值1; 特征2: 值2; 特征3: 值3;"
     -->
    <div style="width: 100px; height: 100px; background-color: violet;">我是div标签1</div>
    <div>我是div标签2</div>
    <div id="id_div3">我是div标签3</div>
    <div>我是div标签4</div>
    <div class="class_div5">我是div标签5</div>
    <div>我是div标签6</div>
    <p>我是p标签！</p>
</body>
</html>

MyFirstHtmlCodes/HtmlCssTag/CSS/01.css文件：

p{
    width: 200px; 
    height: 100px; 
    background-color:olivedrab;
}

在Google Chrome浏览器中的预览效果：