以下演示操作以该网址中的输入框为例: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. .NETCore 千星项目模块化开发框架 SimplCommerce 详解

    SimplCommerce 是 github 上过千星的.netcore 商城示例项目,本文详解他的模块化框架现实思路,其业务(如产品.订单)不作介绍.因作者文笔水平很差,它又很值得学习和推荐,就算不 ...

  2. Springboot 系列(六)Spring Boot web 开发之拦截器和三大组件

    1. 拦截器 Springboot 中的 Interceptor 拦截器也就是 mvc 中的拦截器,只是省去了 xml 配置部分.并没有本质的不同,都是通过实现 HandlerInterceptor ...

  3. Java虚拟机三:OutOfMemoryError异常分析

    根据Java虚拟机规范,虚拟机内存中除过程序计数器之外的运行时数据区域都会发生OutOfMemoryError(OOM),本文将通过实际例子验证分析各个数据区域OOM的情况.为了更贴近生产,本次所有例 ...

  4. PowerDesigner制作UMI图

    首先我们要下载一个PowerDesigner,自己上百度下载哈!嘻嘻!!! 我这个是汉化版的 然后点这个,再到空白的地方点一下就创建好了. 然后单击右边箭头然后双击 不管是制作的图还是代码生成的图都可 ...

  5. Odoo开源智造IT经理人创业圆梦计划正式启动

    概念定义 IT经理人创业圆梦计划是什么? 甲方IT经理人的行业背景 + 其他甲方需求及可靠信任的线索资源 = 自主创业圆梦计划 具体措施 甲方IT经理人的职业行业背景取得其他甲方需求线索及信任——通过 ...

  6. HIVE扩展GIS函数

        按项目日益增长的gis数据量要求,需要在大数据集群中部署HIVE的扩展函数.     Apache Hive是一个建立在Hadoop架构之上的数据仓库.它能够提供数据的精炼,查询和分析.([引 ...

  7. redis 安装-配置

    下载链接: wget http://download.redis.io/releases/redis-4.0.9.tar.gz ※ 如果没有  直接复制url 到浏览器下载 1:下载完成 2:解压 t ...

  8. qt+vs2017环境下XIMEA相机库的配置

    从第一篇博客出来之后就没再更新过博客,这一次再更新博客的时候已经是换了项目了,现在在搞双目视觉方面.刚开始接触这一方面,前几天一直在研究相机原本的库函数的调用问题 网上这一方面的很少,而且很多都是在u ...

  9. Java核心技术第八章——泛型程序设计(1)

    1.泛型程序设计 泛型程序设计意味着编写的代码可以被很多不同类型的对象所重用.例如:不希望为了聚集String和Integer对象分别设计不同的类.(个人觉得此处说的聚集译为:创建一个对象,属性可以为 ...

  10. javascript 实现数据结构 - 栈

    栈是一种遵从后进先出(LIFO)原则的有序集合.新添加的或待删除的元素都保存在栈的同一端,称作栈顶,另一端就叫栈底.在栈里,新元素都靠近栈顶,旧元素都接近栈底.栈就好像是一个底部密封的盒子,我们往里面 ...