基本选择器

1 标签选择器

2 类选择器

3 id选择器

作用：选择页面上的某一个或某一类元素

1 标签选择器

标签选择器会选择页面上所有的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
/*标签选择器会选择页面上所有的标签*/
    h1{
      color: blue;
    }
  </style>
</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<h2>该干什么</h2>
</body>
</html>

浏览器翻译如下：

2 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
/*类选择器格式
好处：可以多个标签归类，是同一个class，可以复用
.class的名称{}*/
        .liuliu{
            color: #ad4129;
        }
        .uuu{
            color: #0f35ad;
        }
  </style>
</head>
<body>
<h1 class="liuliu">标题一</h1>
<h1 class="uuu">标题二</h1>
<h1 class="liuliu">标题三</h1>
</body>
</html>

浏览器翻译如下：

3 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*
      id选择器：id必须保持全局唯一！
      #id名称{}
      */
      #aaa{
        color: #0f35ad;
      }
    </style>

</head>
<body>
<h1 id="aaa">标题一</h1>
<h1>标题二</h1>
<h1>标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>
<h1>标题六</h1>
</body>
</html>

浏览器翻译如下：

注意：