032.三种基本选择器 (优先级:id选择器 > class选择器 > 标签选择器)


1.标签选择器:选择一类标签

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2021-11-19title>
        <style type="text/css">
        /*标签选择器会选择到也面上的所有标签*/
            h1 {
                color: #0000FF;
                background: #7CFC00;
                /*边框圆角*/
                border-radius: 24px;
            }
            p{
                /*字体大小*/
                font-size: 100px;
            }
        style>
    head>
    <body>
        /*标签选择器的弊端:如果只想让第一个h1变色,第二个不变色,标签选择器是做不到的*/
        
        <h1>学JAVAh1>
        <h1>学JAVAh1>
        <p>学CSSp>
    body>
html>

2.类选择器 class:选择所有class属性一致的标签,跨标签

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2021-11-19title>
    head>
    <style type="text/css">
        /*类选择器的格式:.class的名称{}
            1.好初:可以多个标签归类,是同一个class,可以复用
        
        
        */
        .first{
            color: #0000FF;
        }
        .second{
            color: #7CFC00;
        }
        .third{
            color: #ED4358;
        }
    style>
    <body>
        <h1 class="first">Ah1>
        <h1 class="second">Bh1>
        <h1 class="third">Ch1>
        <h1 class="first">Dh1>
    body>
html>

3.Id选择器:全局唯一!!!

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2021-11-19title>
    head>
    <style type="text/css">
        /*ID选择器的一个格式  #id名称{}  id必须保证全局唯一
            1.不遵循就近原则,固定的,id选择器 > class选择器 > 标签选择器
        
        */
        #first{
            color: #0000FF;
        }
        .second{
            color: #FFFFFF;
        }
        h1{
            color: #6C6C6C;
        }
    style>
    <body>
        <h1 id="first">Ah1>
        <h1 class="second">Bh1>
        <h1 id="third">Ch1>
        <h1 id="five">Dh1>
    body>
html>
CSS