关于有哪些选择器，具体可以查看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. [Go] gorm 返回指定模型数据的处理方式

    重新 var 声明一个变量,类型为包含指定字段的结构体. 查询的时候,还是使用原始模型类型的变量. example: // For return data var retMember struct { ...

  2. Vue2源码解析-源码调试与核心流程梳理图解

    现在VUE3已经有一段时间了,也慢慢普及起来了.不过因为一直还在使用VUE2的原因还是去了解和学了下它的源码,毕竟VUE2也不会突然就没了是吧,且VUE3中很多原理之类的也是类似的.然后就准备把VUE ...

  3. B/S 结构系统的 缓存机制(Cookie) 以及基于 cookie 机制实现 oa 十天免登录的功能

    B/S 结构系统的 缓存机制(Cookie) 以及基于 cookie 机制实现 oa 十天免登录的功能 @ 目录 B/S 结构系统的 缓存机制(Cookie) 以及基于 cookie 机制实现 oa ...

  4. 推荐一款轻量级堡垒机系统让你防护“rm -rf 删库跑路”

    大家好,我是 Java陈序员. 我们在开发工作中,会经常与服务器打交道,而服务器的资源又是十分宝贵,特别是服务器里面的数据资源. 但是,偶尔会经常因为疏忽而导致服务器数据资源丢失,给自己和公司带来巨大 ...

  5. 一：大数据架构回顾-Lambda架构

    "我们正在从IT时代走向DT时代(数据时代).IT和DT之间,不仅仅是技术的变革,更是思想意识的变革,IT主要是为自我服务,用来更好地自我控制和管理,DT则是激活生产力,让别人活得比你好&q ...

  6. NASM语法

    NASM汇编语言的语法很简单,由4部分组成: label:instruction operands; comment 这4部分都是可选的.一条语句可以没有label,没有comment,甚至连inst ...

  7. three.js教程5-几何体顶点UV坐标、纹理贴图TextureLoader

    1.纹理贴图 纹理贴图,是给MeshLambertMaterial等材质一些纹理图片,以达到更好的视觉效果. 使用方法:通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返 ...

  8. Shopify Theme 开发 —— 性能优化

    一.概述 关于 Shopify Theme 的性能优化,通常有以下几点: 1.卸载未使用的应用程序 有些 app 会在 theme 里面插入一些代码,即使 app 未被使用,也可能会加载一些脚本文件, ...

  9. FFmpeg开发笔记（二十）Linux环境给FFmpeg集成AVS3解码器

    ​AVS3是中国AVS工作组制定的第三代音视频编解码技术标准,也是全球首个已推出的面向8K及5G产业应用的视频编码标准.AVS工作组于2019年3月9日完成第三代AVS视频标准(AVS3)基准档次的制 ...

  10. kubernetes之python调用

    安装 sudo pip3 install kubernetes 认证 首先引入SDK支持库.然后将 ~/.kube 的config文件的内容复制到本地目录,保存为文件kubeconfig.yaml,然 ...