• id选择器、类选择器、属性选择器


    在网页编辑时,通常要对样式进行各种设置。我们借助CSS样式设计中的选择器,就能很好很方便的对它们进行管理和设置了。

    今天,跟大家分享一下几个常用的选择器:id选择器、类选择器、属性选择器。

    id选择器:为标有特定“id”的html元素来指定特定的样式,以“#”来定义。

    例如:我们为<h1>标签中的元素设置颜色为绿色。

    <style>
    #green{
    color: green;
    }
    </style>
    <h1 id="green">我是绿色的</h1>
    <h2 id="no"> 我没有被设置,我不是绿色的</h2>

    类选择器:为标有特定“class”的html元素来指定特定的样式,以“.”来定义。

    例如:我们让<h1>中的内容居中。

    <style>
    .center{
    text-align: center;
    }
    </style>
    
    <h1 class="center">我是居中的</h1>
    <h2 class="no">我没有被设置,我不是居中的</h2>

    属性选择器:为具有指定属性的html元素设置样式。

    例如:我们为具有“name”属性的元素设置其颜色为红色。

    <style>
    [name]{color:red;}
    </style>
    
    <table>
    <tr>
    <td><input type="text" name="input" value="hello,我是红色的"></td>
    </tr>
    </table>

    如果用到时需要再具体一点的话,我们就可以像下面这样:

    例如:为具有“type=text”属性的元素设置其颜色为红色,为具有“type=button”属性的元素设置其颜色为绿色。

    <style>
    input[type="text"]{
    color:red;
    }
    input[type="button"]{
    color: green;
    }
    </style>
    
    <table>
    <tr>
    <td><input type="text" value="我是红色"></td>
    <td><input type="button" value="我是绿色"></td>
    </tr>
    </table>

    这些都是最简单最基本的,仅供菜鸟参考。

    如果你直接复制我的代码,却测试不了的话……

    哈哈哈,那可能就是因为我的代码是直接写在博客的文本编辑框里,你复制到你的代码编辑器中,可能存在格式问题,而你的编辑器无法识别,这时候,你最好不要偷懒,自己重新打一遍,就能测试啦。

    个人见解,如有不足,请各位多多指教,我们共同学习,共同进步。

    【小主,觉得有用请打赏哦!多多少少没关系,一分也是对我的支持和鼓励。谢谢!】

  • 相关阅读:
    C++入门经典-例5.19-指针的引用与传递参数
    C++入门经典-例5.18-通过引用交换数值
    C++入门经典-例5.17-右值引用的定义
    C++入门经典-例5.16-输出引用
    C++入门经典-例5.15-回收动态内存的一般处理步骤
    C++入门经典-例5.14-丢失的内存,关于内存泄漏
    C++入门经典-例5.13-内存安全,被销毁的内存
    C++入门经典-例5.12-动态内存的销毁
    C++入门经典-例5.11-动态分配空间,堆与栈
    C++入门经典-例5.10-指针作为返回值
  • 原文地址:https://www.cnblogs.com/wuql/p/6004374.html
Copyright © 2020-2023  润新知