CSS学习记录3-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaoshengmeyan/article/details/139453205

CSS基本选择器：

通配选择器，元素选择器，类选择器，ID选择器。

通配选择器：

给所有的HTML元素加样式。

    <style>
        *{
            color: red;
        }
    </style>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配选择器</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <h1>Excalibur！！！！！</h1>
    <p>今天下午有体育课，一点也不想去！！！</p>
</body>
</html>

元素选择器：

给某项元素加样式。

    <style>
        p{
            color:red;
        }
    </style>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素选择器</title>
    <style>
        p{
            color:red;
        }
    </style>
</head>
<body>
    <h1>元素选择器</h1>
    <h2>NVIDIA</h2>
    <p>i7-13500</p>
    <p>4060RTX</p>
</body>
</html>

类选择器：

选定某些标签加样式。

    <style>
        .yanse{
            color:red;
        }
        .daxiao{
            font-size: 200px;
        }
    </style>

      <h1 class="yanse">NVIDIA</h1>
      <p class="yanse daxiao">i5-13500</p>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .yanse{
            color:red;
        }
        .daxiao{
            font-size: 200px;
        }
    </style>
</head>
<body>
    <h1 class="yanse">NVIDIA</h1>
    <h2>GEFORCE RTX</h2>
    <p class="yanse daxiao">i5-13500</p>
    <p>4050RTX</p>
</body>
</html>

注：class值不能是纯数字，不能是中文。一个标签里不能写多个class。

ID选择器：

精准选择某个标签加样式。

    <style>
        #m_h1{
            color:blue;
        }
        #m_p1{
            font-size: 20px;
        }
    </style>

    <h1 id="m_h1">NVIDIA</h1>
    <h2>GEFORCE RTX</h2>
    <p>i5-13500</p>
    <p id="m_p1">4050RTX</p>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID选择器</title>
    <style>
        #m_h1{
            color:blue;
        }
        #m_p1{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1 id="m_h1">NVIDIA</h1>
    <h2>GEFORCE RTX</h2>
    <p>i5-13500</p>
    <p id="m_p1">4050RTX</p>
</body>
</html>