• 【JavaEE进阶】CSS选择器的常见用法

    CSS选择器的主要功能就是选中页面指定的标签元素，选中了元素，才可以设置元素的属性。

    CSS选择器主要有以下几种:

    1. 标签选择器
    2. 类选择器
    3. id选择器
    4. 复合选择器
    5. 通配符选择器

    接下来用代码来学习这几个选择器的使用。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <div class="font32">我是⼀个div, class为font32div>
    10.     <div class="font32">我是⼀个div, class为font32div>
    11.     <div><a href="#">我是⼀个diva>div>
    12.     <span>我是一个spanspan>
    13.     <ul>
    14.         <li>aaali>
    15.         <li>bbbli>
    16.         <li><a href="#">ccca>li>
    17.     ul>
    18.     <ol>
    19.         <li>1111li>
    20.         <li>2222li>
    21.         <li>3333li>
    22.     ol>
    23.     <button id="submit">提交button>
    24. body>
    25. html>

    初始的页面为：

    其中超链接的颜色默认为图中颜色。

    一、标签选择器 

    示例：

    1. span {
    2.        color: red;
    3. }

    这里就是选择所有的span标签，设置颜色为红色。

    这时的页面显示为：

    可见，span标签元素的颜色变为了红色。

    二、类选择器

    示例：

    1. .font32 {
    2.             color: red;
    3.         }

     选择class为font32的元素, 设置颜色为红色。

    ⼀个类可以被多个标签使用, ⼀个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)

    这是页面显示为：

    三、id选择器

    id 是唯⼀的, 不能被多个标签使用(是和 类选择器 最大的区别) 

    示例：

    1. /* 选择id为submit的元素, 设置颜⾊为红⾊ */
    2. #submit {
    3.  color: red;
    4. }

    这是页面显示为：

    四、复合选择器

    示例：

    1. /*只设置 ul标签下的 li标签下的 a标签, 颜⾊为紫⾊*/
    2. ul li a {
    3.             color: purple;
    4.         }
    1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选择器的组合, 也可以是任意数量选择器的组合
    2. 不⼀定是相邻的标签, 也可以是"孙子"标签
    3. 如果需要选择多种标签, 可以使用逗号分割, 如 p, div { } 表示同时选中p标签和div标签.逗号前后可以是以上任意选择器, 也可以是选择器的组合.

    这是页面显示为：

    五、通配符选择器

    示例：

    1. /* 设置⻚⾯所有元素, 颜⾊为红⾊*/
    2. * {
    3.  color: red;
    4. }

    这是页面如下图所示：

  • 相关阅读:
    SpringBoot基础之声明式事务和切面事务和编程式事务
    PowerConsume功耗计算器
    一文搞懂容器运行时 Containerd
    Managing Supply and Demand Balance Through Machine Learning-笔记
    网课题库接口
    【C++--类和对象】构造函数&&析构函数
    MySQL高级篇知识点——其它数据库日志
    elasticsearch7.6安装教程及启动常见错误解决方法
    Kubernetes：Ingress总结(一)
    RabbitMQ学习（二）
  • 原文地址：https://blog.csdn.net/m0_61876562/article/details/136433616