认真学习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属性加上显示控制。如果想通用的，可以额外编写一个！
认真学习css3-2-css的选择器的更多相关文章
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- Css的学习之旅-css的选择器（2）
1.最常用的是派生选择器:eg:ul li{ color:red} 2.id选择器:eg:#id{color:red} 3.类选择器:设置标签的class = "",类似id.用点 ...
- css3学习之旅-css的基本语法（1）
后面就将要介绍css的全面语法: 1.css介绍 2.css基本语法 3.css高级语法 4.css派生选择器 5.css的id选择器 6.css类选择器 7.css属性选择器 !!!!!css介绍 ...
- 【css学习整理】css基础(样式,语法,选择器)
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...
- Html学习之七（CSS选择器的使用--基础选择器优先级问题）
二.基础选择器的综合使用 优先级顺序:id选择器>class选择器>元素选择器.也就是说,如果这三种选择器同时为某一个元素设定样式,那么冲突的部分按优先级的顺序依次决定. <!DOC ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- CSS系列------选择器和选择器的优先级
1.1.基本选择器 通配符选择器(*) 通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- CSS节选——选择器
CSS,cascading style sheet,层叠样式表,请留意层叠概念. css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:targ ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
随机推荐
- [FE] Chrome Extension 五步曲
1. Create the manifest.jsonOnly three fields is needed. { "name": "Getting Started Ex ...
- WPF 创建空白图片
本文告诉大家如何在 WPF 创建空白图片,可以创建1像素图片 可以使用 BitmapSource 的 Create 方法创建空白图片 // 限制不能创建小于2x2的图片 const int width ...
- 基于FPGA的音乐蜂鸣器设计
蜂鸣器是一种一体化结构的电子讯响器,采用直流电压供电,广泛应用于计算机.打印机.复印机.报警器.电子玩具.汽车电子设备.电话机.定时器等电子产品中作发声器件. 图1 :蜂鸣器实物图 蜂鸣器主要分为压电 ...
- Surge多配置文件聚合配置方法
目录 摘要 1. Surge配置原理 2. Surge托管配置 3. Surge多配置文件聚合配置 (1)找到配置文件 (2)编辑配置文件 参考 摘要 Surge 是一个在 macOS 和iOS 平台 ...
- mac常用
目录 Mac 删除键(Delete) 这三招你会吗?可大幅加快打字速度 Mac软件打开提示:已损坏,无法打开.您应该将它移到废纸娄 怎么解决? 卸载手动安装的软件 如何在Mac上使用Charles进行 ...
- iptables命令详解
安装iptables yum install iptables-services 编写允许访问的策略 vim /etc/sysconfig/iptables # sample configuratio ...
- gorm 动态拼接查询条件
结构体 type Mould struct { MouldId string `grom:"column:mouldID"` MouldInteriorID string `gro ...
- leaflet 用自定义pane实现图层顺序调整
在 Leaflet 中,map panes 隐式地将图层组合在一起,而开发者并不知道这一点.这种分组允许 Web 浏览器以比单独处理图层更有效的方式同时处理多个图层. Map panes 使用 z-i ...
- HDU-Employment Planning题解
题目在这里 -------------------------------- Employment Planning 简单的一道dp 关键的点在于想到用枚举实现各种情况的讨论 关键的注释写在代码里了 ...
- .NET 中 Channel 类简单使用
Channel 是干什么的 The System.Threading.Channels namespace provides a set of synchronization data structu ...