CSS有两大选择器；基础选择器和复合选择器；

  1. 标签选择器
  2. 类选择器
  3. id选择器
  4. 通配符选择器

基础选择器分为：

  1. 标签选择

标签选择器选择该页面所有的p标签进行修改样式；

<!DOCTYPE html>
<html>
    <head>    
        <meta charset="utf-8">
        <title>标签选择器</title>
        <style>
            p{
                color: red;
                text-indent:2em;
                }
        </style>
    </head>
    <body>
        <!--使用了标签选择器这三个段落的样式全都是一样的-->
        <p>这是第一个段落</p>
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
    </body>
</html>
  1. 类选择器

类选择可以选择一个或多个标签进行修改样式；

<!DOCTYPE html>
<html>
    <head>    
        <meta charset="utf-8">
        <title>类选择器</title>
        <style>
            .title{
            color:green;
            font-weight:400;
            }
        </style>
    </head>
    <body>
        <h1 class="title">我是最大的标题</h1>
    </body>
</html>

“ . ”后面的类名可以自己定义一个合理的名称。用class属性调用；

  1. id选择器 ；

id选择器与类选择器有些类似；

<!DOCTYPE html>
<html>
    <head>    
        <meta charset="utf-8">
        <title>id选择器</title>
        <style>
            #title{
            color:green;
            font-weight:400;
            }
        </style>
    </head>
    <body>
        <h6>我是最小的标题哦</h6>
    </body>
</html>

这个选择器和类的效果将是一样的，区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

  1. 通配符选择器：

通配符选择器使用*（星号）意思是（所有）选择页面所有的标签（元素）

<!DOCTYPE html>
<html>
    <head>    
        <meta charset="utf-8">
        <title>通配符选择器</title>
        <style>
        /* 页面所有的元素颜色都为红色；字体大小为20px；*/
            *{
            color:red;
            font-size:20px;
            
            }
        </style>
    </head>
    <body>
        <h6>我是最小的标题哦</h6>
        <span>我是一个小盒子（容器）是个行内元素</span>
        <div>我是一个大盒子（容器）是个块级元素</div>
    </body>
</html>

以上四个为基础选择器；

文章目录