认真学习css3-2-css的选择器
关于有哪些选择器，具体可以查看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属性加上显示控制。如果想通用的，可以额外编写一个！
