关于有哪些选择器，具体可以查看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. WPF 编写一个测试 WM_TOUCH 触摸消息延迟的应用

    我听说在 Win10 到 Win11 的系统版本左右,微软加上了一大波触摸性能优化,准确来说是 HID 性能优化.我想测试一下在这些系统下,采用从 Windows 消息接收到 WM_TOUCH 触摸消 ...

  2. 2019-11-29-C#-如何写-DEBUG-输出

    title author date CreateTime categories C# 如何写 DEBUG 输出 lindexi 2019-11-29 08:28:35 +0800 2018-2-13 ...

  3. 使用DP-Modeler、ModelFun模方软件修复实景三维模型教程

    P-Modeler   DP-Modeler是武汉天际航自主研发的一款集精细化单体建模与Mesh网格模型修饰于一体的软件.支持三维模型一键水面修复.道路置平.建筑局部修饰.删除底部碎片.植被处理.桥隧 ...

  4. 3 个好玩的前端开源项目「GitHub 热点速览」

    单休的周末总是短暂的,还没缓过神新的一周就又开始了.如果你和我一样状态还没有完全恢复,那就让上周好玩的开源项目唤醒你吧! 每周 GitHub 上总是有一些让人眼前一亮的开源项目,上周好玩的前端项目特别 ...

  5. 网络拓扑—FTP服务搭建

    目录 FTP服务搭建 网络拓扑 配置网络 FTP PC 安装FTP服务 配置FTP服务 FTP用户配置-1 PC机访问FTP站点 IE浏览器访问 终端访问 FTP用户配置-2 PC机访问ftp站点 I ...

  6. SQL Server使用for xml path 多行合并成一行，逗号分隔，拆解分析实现原理

    我们写sql脚本处理数据的时候 针对部分数据进行group by 分组,分组后需要将部分数据放入分组后的行里面以逗号分隔. 举一个简单例子: 如上图的数据,需要对学生进行分组,取得学生都参与了哪些学科 ...

  7. 因为我的一次疏忽而带来的golang1.23新特性

    距离golang 1.23发布还有两个月不到,按照惯例很快要进入1.23的功能冻结期了.在冻结期间不会再添加新功能,已经添加的功能不出大的意外一般也不会被移除.这正好可以让我们提前尝鲜这些即将到来的新 ...

  8. Your lock file does not contain a compatible set of packages. Please run composer update.

    执行composer install遇到错误:Your requirements could not be resolved to an installable set of packages. 这是 ...

  9. vue2前端导出带背景色表格 xlsx xlsx-style

    vue2 +elmentui+xlsx10.0.0+xlsx-style 坑有点多. xlsx10.0.0以后的版本 用require导入或者使用什么导入什么,不要import * xlsx全部导入 ...

  10. 深入剖析Arthas源码

    一. 前言 Arthas 相信大家已经不陌生了,肯定用过太多次了,平时说到 Arthas 的时候都知道是基于Java Agent的,那么他具体是怎么实现呢,今天就一起来看看. 首先 Arthas 是在 ...