关于有哪些选择器，具体可以查看w3school。

本文写了一个考卷的例子，带有部分js,jquery.不会针对每个选择器做示例，只练习了一些常用的，有意思的。

先看html/js代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>css3各种选择器示例，尤其是正则表达式</title>

  <link rel="stylesheet" type="text/css" href="/static/css/public/public.css" />

  <link rel="stylesheet" type="text/css" href="/static/css/public/question.css" />

  <style>

    body{

      width: 100%;

      height: 100%;

    }

    .introduction {

      border: none;

      width: 100%;

      display: block;

      overflow: hidden;

      height: 60px;

    }

    .introduction:focus {

      outline: none;

    }

    li {

      display: block;

    }

    li span {

      display: inline-block;

      width: 100px;

      text-overflow: ellipsis;

      overflow: hidden;

      white-space: nowrap;

    }

  </style>

</head>

<body>

  <fieldset>

    <legend>试卷前言</legend>

    <textarea class="introduction" readonly>自古以来，坚持不懈是成才的一个重要途径，甚至可以说是根本的途径.

      而评测是为了检测努力的成效。

      从公平角度出发，公开检测是一个比较公平有效的手段。

      请各位同学务必努力学习！

      </textarea>

    <span>青海长云望雪山</span>

    <span>孤城遥望玉门关</span>

    <span>黄沙百战穿金甲</span>

    <span>不破楼兰终不还</span>

  </fieldset>

  <fieldset>

    <legend>选择题</legend>

    <div class="question-content-container">

      <div class="question-content-container-child">

        <span class="question-title">1.哪些是四大发明:______</span>

        <ul class="question-content-select">

          <li>a.造纸术</li>

          <li>b.印刷术</li>

          <li>c.指南针</li>

          <li>d.火药</li>

          <li>e.绘图</li>

          <li>f.农历</li>

        </ul>

      </div>

      <div class="question-content-container-child">

        <span class="question-title">2.你认为it工程师能做什么:______</span>

        <ul class="question-content-select">

          <li>a.编码</li>

          <li>b.组装电脑</li>

          <li>c.修电脑</li>

          <li>d.安装网络</li>

          <li>e.绘图</li>

          <li>f.组装手机</li>

        </ul>

      </div>

      <div>

        <span class="question-title">3.中国要持续发展应该注意什么:______</span>

        <ul class="question-content-select">

          <li>a.搞好党的自我净化工作</li>

          <li>b.发展农村</li>

          <li>c.保障城市工人阶级生活水平</li>

          <li>d.提升教育地位、提升教育战线待遇</li>

          <li>e.重视宣传优良传统文化</li>

          <li>f.搞好基本科学理论研究</li>

        </ul>

      </div>

    </div>

  </fieldset>

  <fieldset>

    <legend>填空题</legend>

    <span class="question-content">4.两个黄鹂鸣翠柳</span>

    <span class="question-content">5.山穷水复疑无路</span>

    <span class="question-content">6.八百里分麾下炙</span>

    <span class="question-content">7.天年我若为青帝</span>

    <span class="question-content">8.PC电脑主要设备有CPU、主板</span>

    <span class="question-content">9.OSI七层协议,从下到上分别是物理层、数据链路层</span>

    <span class="question-content">10.TypeScript的主要优点在于构建大型工程，此外还有</span>

  </fieldset>

  <fieldset>

    <legend>作文</legend>

    <span class="question-title">10.请针对中国足球为什么发展不起来，写一篇不少于1000字的议论文</span>

  </fieldset>

  <div class="div-container">

    <span class="command command-submit" onclick="submit()">提交</span>

  </div>

  <div class="toolTip-hidden" id="dDivToolTip">

  </div>

</body>

<script src="/plugin/jquery/jquery-3.6.0.js"></script>

<script>

  var tipForm = document.getElementById("dDivToolTip");

  $(function () {

    initQuestionCheck();

    initQuestionFill();

  });

  function initQuestionCheck() {

    $("li").each(function (index, element) {

      let oldHtml = element.innerHTML;

      let newHtml = "<span>" + oldHtml + "</span><input type=\"checkbox\" class=\"question-answer-check\">";

      element.innerHTML = newHtml;

    });

    setInputToolTip();

  }

  function initQuestionFill() {

    $(".question-content").each(function (index, element) {

      let oldHtml = element.innerHTML;

      let newHtml = "<span>" + oldHtml + "</span><input type=\"text\" class=\"question-answer-input\">";

      element.innerHTML = newHtml;

    });

  }

  function setInputToolTip() {

    $("li span").hover(function () {

      showTip(this);

    },

      function () {

        tipForm.className = "toolTip-hidden";

      }

    )

  }

  function showTip(obj){

      let nTop=obj.offsetTop+20;

      let nLeft=obj.offsetLeft+50;

      tipForm.innerText = obj.innerText;

      tipForm.className = "toolTip-visible";

      let newPositionStyle="top:"+nTop+"px;left:"+nLeft+"px";

      tipForm.setAttribute("style",newPositionStyle);

  }

function submit() { }

</script>

</html>
public.css
/* buttons */

.command{

    display: block;

    width: 100px;

    height: 30px;

    line-height: 30px;

    background-position: 20px;

    background-repeat: no-repeat;

    background-color:orange;

    background-position-x: 5px;

    margin-top: 5px;

    text-align: center;

}

.comand:hover{

    background-color:purple;

}

.command-submit{

    background-image: url("http://localhost:8080/static/images/icon/buttons/buttonSharing.png");

}

fieldset{

    margin-left: 10%;

    margin-right: 10%;

    margin-top: 10px;

}

.div-container{

    margin-left: 10%;

    margin-right: 10%;

    margin-top: 10px;

}

.toolTip-hidden{

    position: fixed;

    min-width: 150px;

    max-width: 300px;

    height: 40px;

    background: yellow;

    color: red;

    visibility: hidden;

}

.toolTip-visible{

    position: fixed;

    min-width: 150px;

    max-width: 300px;

    font-size: 14px;

    min-height: 20px;

    max-height: 60px;

    background:black;

    color: #38d920;

    visibility: visible;

    opacity: 0.7;

    overflow: auto;

    border: 2px solid;

    overflow: hidden;

}
question.css
.question-title{

    font-weight: bold;

    color: red;

}

[class^='question-content']{

    font-style: italic;

    display: block;

}

.question-answer-input{

    width: 200px;

    height: 30px;

    border-left: none;

    border-right: none;

    border-top: none;

    border-bottom: 1px solid blue;

    margin-left: 5px;

    font-style: normal;

    color: green;

}

.question-answer-input:focus{

    outline: none;

}

.question-content-container{

    display: flex;

}

.question-content-container-child{

    flex:1;

    border-right: 1px solid gray;

}

.question-content-container-child:nth-last-child(){

   border-right: none ;

}


看下展示的效果：

有提示的如下图：

这里优点难度和意思的就是：

1)使用正则表达式进行css选择

[class^='question-content']{ font-style: italic; display: block; }

从学习和参考出发，我们需要获得完整的正则表达式规则。有待后面补充

学习正则表达式，有基础最好，没有基础的话，就是死记硬背+多练习

2)伪类选择器hover

伪类选择器优点意思，有了这些，浏览器替工程师写了许多代码

3)文本的溢出处理

4)提示框的显示

针对特定的写一个，比较简单。就是fixed属性加上显示控制。如果想通用的，可以额外编写一个！

认真学习css3-2-css的选择器的更多相关文章

  1. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  2. Css的学习之旅-css的选择器（2）

    1.最常用的是派生选择器:eg:ul li{ color:red} 2.id选择器:eg:#id{color:red} 3.类选择器:设置标签的class = "",类似id.用点 ...

  3. css3学习之旅-css的基本语法（1）

    后面就将要介绍css的全面语法: 1.css介绍 2.css基本语法 3.css高级语法 4.css派生选择器 5.css的id选择器 6.css类选择器 7.css属性选择器 !!!!!css介绍 ...

  4. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  5. Html学习之七（CSS选择器的使用--基础选择器优先级问题）

    二.基础选择器的综合使用 优先级顺序:id选择器>class选择器>元素选择器.也就是说,如果这三种选择器同时为某一个元素设定样式,那么冲突的部分按优先级的顺序依次决定. <!DOC ...

  6. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  7. CSS系列------选择器和选择器的优先级

    1.1.基本选择器 通配符选择器(*)      通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...

  8. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  9. CSS节选——选择器

    CSS,cascading style sheet,层叠样式表,请留意层叠概念. css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:targ ...

  10. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

随机推荐

  1. dotnet 读 WPF 源代码笔记 简单聊聊文本布局换行逻辑

    在 WPF 里面,带了基础的文本库功能,如 TextBlock 等.文本库排版的重点是在文本的分行逻辑,也就是换行逻辑,如何计算当前的文本字符串到达哪个字符就需要换到下一行的逻辑就是文本布局的重点模块 ...

  2. C# 获取指定文件夹中所有的文件(包括子文件夹的文件)

    有个需求中需要播放指定路径的声音,但你必须要有该路径的声音才可以播放,如果没有该文件则播放默认的声音,该方法用于初始化应用的时候获取指定目录的所有文件,便于后来播放声音的时判断路径是否存在. usin ...

  3. C语言程序设计-笔记3-循环结构

    C语言程序设计-笔记3-循环结构 例4-1  用格雷戈里公式求给定精度的π值.使用格雷戈里公式求π的近似值,要求精确到最后一项的绝对值小于给定精度eps. =1--+-+- #include<s ...

  4. Python多线程编程深度探索：从入门到实战

    title: Python多线程编程深度探索:从入门到实战 date: 2024/4/28 18:57:17 updated: 2024/4/28 18:57:17 categories: 后端开发 ...

  5. 【python爬虫案例】用python爬豆瓣读书TOP250排行榜！

    目录 一.爬虫对象-豆瓣读书TOP250 二.python爬虫代码讲解 三.讲解视频 四.完整源码 一.爬虫对象-豆瓣读书TOP250 今天我们分享一期python爬虫案例讲解.爬取对象是,豆瓣读书T ...

  6. Kubernetes（K8S）安装

    Kubermetes (K8S) 安装 参考文档: 官方文档: https://kubernetes.io/zh-cn/docs/concepts/overview/components/#node- ...

  7. 可以远程剪视频、做PS设计的远程控制软件体验

    ​ 编辑切换为居中 在这里插入图片描述 远程连接 资源共享的新时代 过去很长一段时间,计算机网络最主要的用途就是分享数据资源.进入新时代,伴随网络的高速发展以及云计算等技术的发展,我们进入了不仅仅是数 ...

  8. 基于 OAI 部署私有的 4G EPS

    目录 文章目录 目录 前言 硬件设备要求 运行平台 RF 外设 可编程 SIM 卡 UE 终端 高精度参考时钟 操作系统要求 内核要求 CPU Frequency scaling All-In-One ...

  9. saltstack实践案例

    master某个配置参考案例 [root@]# cat /etc/salt/master file_ignore_regex: - '/\.git($|/)' file_ignore_glob: - ...

  10. 如此丝滑的API设计，用起来真香

    分享是最有效的学习方式. 博客:https://blog.ktdaddy.com/ 故事 工位上,小猫一边撸着代码,一边吐槽着前人设计的接口. 如下: "我艹,货架模型明明和商品SKU模型是 ...