CSS中的基本选择器

CSS中的基本选择器

什么是选择器?选择器就是通过标签选择一类元素进行控制,常用于HTML等语言中。
css中的选择器种类有很多,下面介绍几种常见的基本选择器:标签选择器,类选择器和id选择器

一、标签选择器

标签选择器又叫元素选择器:文档的元素就是最基本的选择器。
例如:

/*对h1和p标签进行选择*/
    <style>
        h1{
          background: wheat;
          border-radius: 21px;
        }
        p{
          font-size: 80px;
        }
    </style>

</head>

<body>

<h1>学习Java</h1>
<h1>学习学习</h1>
<p>努力努力</p>

</body>
</html>

选中标签后,在{}中可以设计样式,运行结果如下:
CSS中的基本选择器_第1张图片

二、类选择器

类选择器格式: .class的名称{},好处是可以多个标签归类,是同一个class,可以复用。

/*.class的名称{},对class类进行选择*/
 <style>
      .biao1{
        color: aqua;
      }
      .biao2{
        color: red;
      }

  </style>

</head>
<body>


<h1 class="biao1">标题一</h1>
<h1 class="biao2">标题二</h1>
<h1 class="biao1">标题三</h1>

<p class="biao2">标签1</p>

对三个标题和一个标签进行样式设计,运行结果如下:
CSS中的基本选择器_第2张图片

三、id选择器

  • 选择器格式:#id名称{},且id必须保证全局唯一!
  • 选择的优先级为:id选择器>class选择器>标签选择器
    例如:
 <style>
  	  /*#id名称{},对id进行选择*/
      #title1{
        color: aquamarine;
      }
      /*.class的名称{},对class类进行选择*/
      .s1{
        color: red;
      }
      /*对h1标签进行选择*/
      h1{
        color: #047be5;
      }
 </style>
</head>
<body>

<h1 class="s1" id="title1">标题1</h1>
<h1 class="s1">标题2</h1>
<h1 class="s1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>

运行结果为:
CSS中的基本选择器_第3张图片

你可能感兴趣的:(html,媒体,前端,css)