大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

CSS之选择器

CSS是cascading style sheet 层叠式样式表的简写.
CSS是从审美的角度复测页面的样式

标签选择器

标签选择器就是标签的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">
        h1{
            color: red;
            font-size: 30px;
            text-decoration: underline;
            background: aquamarine;
            font-style: italic;
        }
    </style>

</head>
<body>
    
  <!--标签选择器-->
    <h1>这是标签选择器</h1>

</body>
</html>

标签选择器.jpeg

类选择器

  • 以class开头
  • 在样式中 . + 类名 表示 ( 比如下面的例子:.lei{
    }
    )
  • 同一个标签可以有不同的class类,用空格隔开
  • 知道抽取公共的类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">
        h1{
            color: red;
            font-size: 30px;
            text-decoration: underline;
            background: aquamarine;
            font-style: italic;

        }
        .lei {
            color: yellow;
            background: aquamarine;
            text-decoration: underline;
            font-style: italic;
            font-size: 50px;
        }



    </style>

</head>
<body>

    <h1>这是标签选择器</h1>

        <p class="lei  teshu"> 这是类选择器</p>
       <p class="teshu">这是teshu的类</p>

</body>
</html>
    <style type="text/css">
        .lv{
            color:green;
        }
        .da{
            font-size: 60px;
        }
        .xian{
            text-decoration: underline;
        }
    </style>


       <p class="lv da">段落1</p>
    <p class="lv xian">段落2</p>
    <p class="da xian">段落3</p>



公共的类.jpg

Id选择器

  • 在一个html页面中不可以有相同的Id名
  • id名的取名规范
    • 只能以字母,数字,下划线
    • 必须以字母开头
    • 不能和标签同名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">
        #hezi{
            background: aqua;
            width: 100px;
            height: 100px;
            
        }


    </style>

</head>
<body>
        <div id="hezi"></div>
</body>
</htm
id选择器.jpg

后代选择器

  • 后代选择和在其他的选择之间 用 空格 隔开
  • 比如 .houdai p 表示类选择器houdai所有的p

 .houdai p{


            background-color: bisque;
            font-size: 50px;
            color: red;
            

        }

 <div class="houdai">
        <ul>
            <li>
                <p>后台选择器的测试</p>
            </li>
        </ul>
    </div>
后代.png

交集选择器

交集.png
  • 交集选择器满足2个条件(如上图所示)
    • 必须是h3标签
    • 必须是 special标签
  • 交集选择器没有空格
 h3.special {
            background-color: bisque;
            color: red;
        }


    <div>
        <h3 class="special">交集选择器</h3>
        <h3 class="special">交集选择器</h3>
        <h3>交集选择器</h3>
        <h3>交集选择器</h3>
        <h3>交集选择器</h3>
    </div>

并集选择器

  • 不相关的标签用逗号隔开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">

        h3,li{
            color: red;
        }

    </style>
 
   
</head>
<body>

    <div>
        <h3>这是一个标题</h3>
        <p>是一个段落</p>
        <ul>
            <li>这是个列表</li>
        </ul>
    </div>
</body>
</html>

通配符选择器

  • 用 * 表示所有的元素

  • 缺点:效率不高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">

       *{
           color: red;
       }

    </style>
 
   
</head>
<body>

    <div>
        <h3>这是一个标题</h3>
        <p>是一个段落</p>
        <ul>
            <li>这是个列表</li>
        </ul>
    </div>



</body>
</ht