1.标签选择器

标签选择器也就是html中的标签，如<h1>,<p>等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择器</title>
    <style>
        /* 标签选择器 */
        p{
          font-size: 20px;
          color: red;
          text-align: center;
        }
    </style>
</head>
<body>
    <h1>勇气</h1>
    <p>测试标签选择器</p>
</body>
</html>

结果如图

图一

2.类选择器

类选择器是css代码中最常用到的使用如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择器</title>
    <style>
        /* 类选择器  命名格式  .类选择器名称{}*/
        .setRedColor{
            color: red;
            font-size:15px;
        }
    </style>
</head>
<body>
    <h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
    <!-- 使用的使用用class调用 -->
    <p class="setRedColor">测试类选择器</p>
</body>
</html>

结果如图

图二

3.id选择器

id选择器和类型选择器类似，命名的时候使用“ # ”号代替“ . ”使用的时候用“ id ”代替“ class ”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择器</title>
    <style>
        /* 类选择器  命名格式  .类选择器名称{}*/
        #setGreenColor{
            color: green;
            font-size:15px;
        }
    </style>
</head>
<body>
    <h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
    <!-- 使用的使用用class调用 -->
    <p id="setGreenColor">测试id选择器</p>
</body>
</html>

结果如图：

图三

4.子选择器

子选择器用法在选择器后用“>”并接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择器</title>
    <style>
      /* 这个就是子选择器 */
    .food>li{
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <!-- 内联CSS -->
    <h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
    <ul class="food">
        <li>食物
            <ul class="food">
                <li>面条</li>
                <br>
                <li>馒头</li>
                <br>
            </ul>
        </li> 
        <br>
        <li>蔬菜
            <ul>
                <li>黄瓜</li>
                <li>辣椒</li>
            </ul>
        </li> 
    </ul>
</body>
</html>

结果如图：

图四

5.包含选择器也可以说成后代选择器

用法和子选择类似把“ > ” 替换成 " "空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择器</title>
    <style>
      /* 这个就是子选择器 */
    .food li{
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <!-- 内联CSS -->
    <h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
    <ul class="food">
        <li>食物
            <ul>
                <li>面条</li>
                <br>
                <li>馒头</li>
                <br>
            </ul>
        </li> 
        <br>
        <li>蔬菜
            <ul>
                <li>黄瓜</li>
                <li>辣椒</li>
            </ul>
        </li> 
    </ul>
</body>
</html>

结果如图：

图五

6.通用选择器

通用选择器是作用于全局的使用如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择器</title>
    <style>
      /* 这个就是子选择器 */
    *{
        color: red;
    }
    </style>
</head>
<body>
    <!-- 内联CSS -->
    <h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
    <ul>
        <li>食物
            <ul>
                <li>面条</li>
                <br>
                <li>馒头</li>
                <br>
            </ul>
        </li> 
        <br>
        <li>蔬菜
            <ul>
                <li>黄瓜</li>
                <li>辣椒</li>
            </ul>
        </li> 
    </ul>
</body>
</html>

结果如图：

图六

7.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初识CSS</title>
    <!-- css样式 -->
    <style type="text/css">
    /* 这个就是伪类选择器 */
    a:hover{
        color: yellow;
    }
    </style>
</head>
<body>
    <!-- 内联CSS -->
    <h1 style="color: #333333; font-weight: bold; text-align: center">这是测试的</h1>
    <ul>
        <li>食物
            <ul>
                <!-- 这个就是伪类选择器的使用 就是可以声明一个不存在的标签 -->
                <li class="first"> <a href="https://www.baidu.com">面条</a> </li>
                <br>
                <li>馒头</li>
                <br>
            </ul>
        </li> 
        <br>
        <li>蔬菜
            <ul>
                <li>黄瓜</li>
                <br>
                <li>辣椒</li>
                <br>
            </ul>
        </li> 
    </ul>
</body>
</html>

结果如图：当鼠标停在面条上颜色就会变成黄色

360截图20190610230556803.jpg

8.并集选择器

各个选择器用逗号“,”隔开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        /* 并集选择器 选择器之间用逗号“,”隔开 */
        p, div {
            color: red;
            font-size: 25px;
        }
    </style>
    <body>
        <p>熊大</p>
        <div>熊二</div>
        <ul>
            <li>小猪佩奇</li>
            <li>猪爸爸</li>
            <li>猪妈妈</li>
        </ul>
    </body>
</html>

结果如图：

截屏2019-11-1614.35.44.png