以下演示操作以该网址中的输入框为例:https://learn.letskodeit.com/p/practice

一、css样式中有三种通配符“^、$、*”

语法:tag[attribute<special character>=’value’]

标签[属性  通配符='属性值']

二、^代表文本的开始

当我们使用“input[class = 'inputs']”查找元素时,浏览器自动帮我们匹配到了一个“class”等于“inputs”的元素

当我们需要找到“class”属性的值包含“inputs”这个字符串且以“inputs”开头时,我们查找元素时语法需要写成input[class^= 'inputs']

三、$代表文本的结束

input[class= 'displayed-class']当我们使用此形式去查找元素时,结果为“0”

input[class$= 'displayed-class']当我们使用此形式去查找元素时,查找到了class属性值包含“displayed-class”且以“displayed-class”结尾

四、*代表文本包含的内容

input[placeholder*= 'Enter']代表我们需要查询元素为laceholder的属性且该属性值包含'Enter

章节十、5-CSS---用CSS 通配符定位元素的更多相关文章

  1. 章节十、3-CSS Selector---用CSS Selector - ID定位元素

    一.如果元素的 ID 不唯一,或者是动态的,或者 name 以及 linktext 属性值也不唯一,对于这样的元素,我们 就需要考虑用 xpath或者css selector 来查找元素了,然后再对元 ...

  2. CSS:CSS Positioning(定位)

    ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...

  3. 第八十五节,css布局补充一

    css布局补充一 图片边框问题 注意css布局时img图片标签默认有的浏览器有边框,所以大多时候需要去除图片的边框 CSS各种居中方法 水平居中的text-align:center 和 margin: ...

  4. 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 【CSS】 CSS 定位

    css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...

  6. 奇妙的CSS之布局与定位

    前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...

  7. CSS有三种基本的定位机制

    CSS有三种基本的定位机制:普通流,浮动和绝对定位. 普通流:在普通流中元素框的位置由元素在html中的位置决定, 1.元素position属性为static或继承来的static时就会按照普通流定位 ...

  8. CSS:CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  9. css读书笔记3:定位元素

    定位元素要掌握css技术,核心就是要掌握元素定位. 一般把下面这条规则作为所有css样式表的第一条,初始化所有元素的内边距和外边距都为0: * {padding:0;margin:0;} 盒模型浏览器 ...

随机推荐

  1. 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)

    现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...

  2. SQL Server内幕之数据页

    数据页是包含已添加到数据库表中的用户数据的结构. 如前所述, 数据页有三种, 每个都以不同的格式存储数据. SQL server 有行内数据页.行溢出数据页和 LOB 数据页. 与 SQL serve ...

  3. vue3+typescript引入外部文件

    vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...

  4. 14 ,CSS 文字与文本

    1.CSS 中长度与颜色 2.CSS 中的文字属性 3.CSS 中的文本属性 14.1 CSS 中长度与颜色 长度单位 说明 in 英寸 cm 公分 mm 公里 cm 以目前字体高度为单位 ex 以小 ...

  5. Android组件化探索与实践

    什么是组件化 不用去纠结组件和模块语义上的区别,如果模块间不存在强依赖且模块间可以任意组合,我们就说这些模块是组件化的. 组件化的好处 实现组件化本身就是一个解耦的过程,同时也在不断对你的项目代码进行 ...

  6. sublime实现markdown浏览器预览

    效果预览 实现 首先下载插件OmniMarkupPreviewer 方法:ctrl + shift + P 安装完成后搜索'OmniMarkupPreviewer'双击即可 下载完成后新建.md文件 ...

  7. pandas 获取数据帧DataFrame的行、列数

    1.创建数据帧 import pandas as pd df = pd.DataFrame([[1, 'A', '3%' ], [2, 'B']], index=['row_0', 'row_1'], ...

  8. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  9. 中缀表达式得到后缀表达式(c++、python实现)

    将中缀表达式转换为后缀表达式的算法思想如下: 从左往右开始扫描中缀表达式 遇到数字加入到后缀表达式 遇到运算符时: 1.若为‘(’,入栈 2.若为’)‘,把栈中的运算符依次加入后缀表达式,直到出现'( ...

  10. okhttputils【 Android 一个改善的okHttp封装库】使用(二)

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 上一篇讲了如何在项目中导入OKHttputils库的操作,这一篇主要讲常见请求的写法. get请求 public String getPe ...