05-11选择器

最新推荐文章于 2024-05-18 16:20:54 发布

卖女孩的小火柴*

最新推荐文章于 2024-05-18 16:20:54 发布

阅读量47

点赞数

分类专栏： HTML+CSS 文章标签： css

本文链接：https://blog.csdn.net/shinian_acmer/article/details/115408911

版权

HTML+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>选择器</title>
    <style>
        /* 选择器（选择符就是根据不同需求把不同标签选择出来 */
        /* 选择器分为基础选择器和复合选择器两个大类。基础选择器是由单个选择器组成的。*/
        /* 基础选择器又分：标签选择器；类选择器；id选择器；通配符选择器。 */
        /* -----------------标签选择器--------------------- */
        /* 标签选择器是指HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式 */
        /* 快速为同类型标签设置统一样式，但不能差异化设置，只能选择全部的当前标签 */
        p {
            color: darkgreen;
        }

        div {
            color: indianred;
        }
        /* -----------------类选择器--------------------- */
        /* 差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器。结构需要用class属性来调用class类的意思 */
        /* 类选择器口诀：样式点定义 结构类调用 一个或多个 开发最长用*/
        .red {
            /* .后类名自定义，长名称或词组可以使用中横线来为选择器命名；不要用纯数字、中文等；命名规范见Web前端开发规范手册 */
          color: red;
        }
        /* -----------------类选择器-多类名----------------- */
        .yellow{
            color: yellow;
        }
        .font35{
            font-size: 35px;
        }
        /* -----------------id选择器----------------- */
        /* 样式#定义，结构id调用，只能调用一次，别人切勿使用   相当于身份证，有唯一性，一般用于页面唯一性元素上*/
        #pink{
            color: pink;
        }
         /* -----------------通配符选择器----------------- */
         /* 不需要调用，自动给所有元素使用样式 */
         * {
             color: darkslategray;
         }
    </style>
</head>

<body>
    <!-- -----------------标签选择器----------------------->
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
    <!-- -----------------类选择器----------------------->
    <ul>
        <li class="red">上海</li>
        <li class="red">北京</li>
        <li>天津</li>
        <li>河南</li>
        <li>山东</li>
    </ul>
    <div class="red">我也红了</div>
    <!-- -----------------类选择器-多类名------------------->
     <dir class="yellow font35">刘德华</dir><!--封装 -->
      <!-- -----------------id选择器-----------------  -->
      <div id="pink">糖葫芦</div>
      <!-- -----------------通配符选择器----------------- -->
      <div>西瓜</div>
      <div>南瓜</div>
</body>

</html>

卖女孩的小火柴*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-11选择器

<!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>选.
复制链接

扫一扫