CSS 选择器


标签选择器

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
    <style>
        /* 选择器 {} */
        /* 标签选择器 就是 以标签名命名的选择器 */
        p {
            color: red;
        }
        
        /*  标签选择器 选中所有的这个标签都生效css */
    style>
head>
<body>
    <p>这是标签p>
    <p>xyttttp>
    <p>xytp>
body>
html>

类选择器

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
    <style>
        .xyt {
            color: red;
        }
        .size {
            font-size: 66px;
        }
    style>
head>
<body>
    
    <p class="xyt size">aguasaj p>
    <p>ahsajhsjp>
body>
html>

id选择器

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
    <style>
        /* #开头 id是唯一的 */
        #blue {
            color:skyblue;
        }
    style>
head>
<body>
    <div id="blue">这是个帅小伙div>
body>
html>

通配符选择器

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
    <style>
        /* *代表全部 */
        * {
            color: red;
        }
    style>
head>
<body>
    <div>divdiv>
    <p>ppppp>
    <span>spanspan>
    <h1>h1h1>
body>
html>
CSS