首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS快速入门(一)

例如,如果我的h1和.special类有相同的CSS,那么我可以把它们写成两个分开的规则。...[attr~=value] 表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value。...[attr*=value] 表示带有以 attr 命名的属性,且属性值至少包含一个 value 值的元素。...[attr operator value i] 在属性选择器的右方括号前添加一个用空格隔开的字母 i(或 I),可以在匹配属性值时忽略大小写(支持 ASCII 字符范围之内的字母)。...[attr operator value s] 在属性选择器的右方括号前添加一个用空格隔开的字母 s(或 S),可以在匹配属性值时区分大小写(支持 ASCII 字符范围之内的字母)。

94920

前端打工人的面试总结

-- text和textarea 元素使用value property 和 input事件 --> 当接收方收到数字证书的时候,先根据原始信息使用同样的 Hash 算法生成一个摘要,然后使用公证处的公钥来对数字证书中的摘要进行解密,最后将解密的摘要和生成的摘要进行对比,就能发现得到的信息是否被更改了。...(7)返回数据: 当页面请求发送到服务器端后,服务器端会返回一个 html 文件作为响应,浏览器接收到响应后,开始对 html 文件进行解析,开始页面的渲染过程。...对 rest 参数的理解扩展运算符被用在函数形参上时,它还可以把一个分离的参数序列整合成一个数组:function mutiple(...args) { let result = 1; for (var...如何判断一个对象是否属于某个类?第一种方式,使用 instanceof 运算符来判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。

63680
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML 表单和约束验证的完整指南

    : 计​​算或用户操作的文本结果 progress: 带有value和max属性的进度条 meter:它可以根据对设定的值绿色,琥珀色和红色之间改变规模value,min,max,low,high,和optimum...CSS 验证样式 您可以将以下伪类应用于输入字段以根据当前状态对其进行样式设置: 选择器 描述 :focus 重点领域 :focus-within 一个元素包含一个具有焦点的字段(是的,它是一个父选择器...如果该字段有效,这将是一个空字符串。 valitity:一个ValidityState 对象。当字段有效时,它有一个valid属性集true。...当该字段有效时必须传递一个空字符串,否则该字段将永远无效。 checkValidity():true当输入有效时返回。...当它这样做时,分配给该字段的任何自定义验证功能将依次执行。必须全部返回true才能使该字段有效。 无效字段具有invalid应用于该字段的父元素的类,该类使用 CSS 显示红色帮助消息。

    8.4K40

    【Hello CSS】第五章-CSS的选择器与函数

    例如:*{width:100%;} 5.属性选择器:就是根据HTML标签里的属性选择,语法大概如下: [attr][attr=value][attr~=value][attr|=value][attr^...// 语法 selector:pseudo-class { property: value; } 2.伪元素:伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式...一个选择器中只能使用一个伪元素。 // 语法 // 以前单冒号也行,现在浏览器也兼容。...各位使用vue的亲,一定对双向绑定不陌生,对它的实现一定也是了然如胸的,那么如果今天鱼头告诉你,双向绑定不一定需要JS呢?首先我们来看个效果图。 ? 地址在我codepen上,有兴趣的可以随时去看。...如果你有兴趣,请添加鱼头微信(krisChans95),添加时注明 “加群”,Mmmm,最后,如果觉得我的文章还不错,请加个关注跟点个“在看”呗!

    44810

    Proxy

    对设置了拦截行为的对象obj,去读写它的属性,就会得到下面的结果。 obj.count = 1 // setting count! ++obj.count // getting count!...比如,上面代码中,配置对象有一个get方法,用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到,由于拦截函数总是返回35,所以访问任何属性都得到35。..._prop = 'c' // Error: Invalid attempt to set private "_prop" property 上面代码中,只要读写的属性名的第一个字符是下划线,一律抛错,从而达到禁止读写内部属性的目的...典型的操作就是in运算符。 has方法可以接受两个参数,分别是目标对象、需查询的属性名。 下面的例子使用has方法隐藏某些属性,不被in运算符发现。...上面代码中,当执行revoke函数之后,再访问Proxy实例,就会抛出一个错误。

    2.4K10

    『极限版』不掺水,用纯 CSS 来实现超飒的表单验证功能

    是一个布尔属性,用来告诉浏览器这个 是否是必填项。...pattern 再来 pattern 属性。 用于校验输入 value 是否有效。...我们先来整理下功能要求: 初始化状态:不展示提交按钮以及错误提示 清空输入状态:不展示提交按钮以及错误提示 输入错误状态:输入框输入错误时,展示错误提示 输入正确状态:输入框输入正确时,隐藏错误提示,展示提交按钮...初始化状态 首先我们知道,初始化 时,是没有提示信息的,所以提示信息可以直接隐藏,至于提交按钮,我们就利用 :invalid 来隐藏,因为初始化的 input.value 内容是不匹配的。...但是这么做有个弊端,就是当我在另外一个输入框输入信息的时候,错误提示也会消失,所以我们还需要判断是否有 placeholder,输入了 value ,自然没有 placeholder ,所以我们有: input

    75330

    Spring Web MVC框架(十二) 使用Thymeleaf

    因此这里讨论的大部分使用OGNL语言方法对Spring EL也适用。 文本、字面值和国际化文本 文本 文本需要th:text属性来设置。...: val2,给定两个变量,当前面一个不是空的时候,前面的值会被使用,否则后面的值作为默认值被使用。 我不是空值'"> 它可以用三元条件表达式替换。... 当存在选择对象的时候,我们可以使用美元表达式{#object}来访问选择对象,也可以同时使用星号表达式和美元表达式。...类型转换和格式化 当使用双括号包括的变量${{...}}或者*{{...}}时,Thymeleaf会使用它的IStandardConversionService来将变量转换为字符串。...当然可以,只不过这样的话,当显示未处理的页面时,就不会显示预设的默认值,而是丑陋的表达式代码了。除此之外,还可以对CSS、JavaScript内联,让Thymeleaf引擎生成合适的代码。

    2.9K10

    为什么我喜欢 JavaScript 可选链

    从 ES2015 及更高版本开始,对我的代码影响最大的功能是解构、箭头函数、类和模块系统。...可选链运算符可防止引发 TypeError: Cannot read property 'name' of undefined 错误。 相反 movieFull 的属性 director是可用的。...这就是为什么我喜欢可选链的原因。 2.1 数组项 可选链能还可以做更多的事。你可以在同一表达式中自由使用多个可选链运算符。甚至可以用它安全地访问数组项! 下一个任务编写一个返回电影主角姓名的函数。...何时使用可选链 要抵制使用可选链运算符访问任何类型属性的冲动:这会导致错误的用法。下一节将说明何时正确使用它。 6.1 可能无效的访问属性 必须仅在可能为空的属性附近使用 ?....当可选链与空值合并运算符结合使用时,可以得到更好的结果,从而更轻松地处理默认值。 你还知道哪些可选链的好案例?请在下面的评论中描述它!

    72740

    ES6系列十四:Proxy

    对设置了拦截行为的对象obj,去读写它的属性,就会得到下面的结果。 obj.count = 1 // setting count! ++obj.count // getting count!...比如,上面代码中,配置对象有一个get方法,用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到,由于拦截函数总是返回35,所以访问任何属性都得到35。..._prop = 'c' // Error: Invalid attempt to set private "_prop" property 上面代码中,只要读写的属性名的第一个字符是下划线,一律抛错,...典型的操作就是in运算符。 has()方法可以接受两个参数,分别是目标对象、需查询的属性名。 下面的例子使用has()方法隐藏某些属性,不被in运算符发现。...上面代码中,当执行revoke函数之后,再访问Proxy实例,就会抛出一个错误。

    1.3K30

    进阶:玩转 CSS 变量

    第一个属性的设定对于不支持 CSS 变量的设备可以直接使用,如果当前设备支持 CSS 变量,则会使用 CSS 变量,但是由于当前 CSS 变量未定义,就会使用变量的默认值。...这种方式更适合组件开发,因为该方案不声明任何 css 变量,只是预留的 css 变量名称和默认属性。这样的话,无论开发者的选择器优先度有多低,代码都可以很容易的覆盖默认属性。...This value serializes as the empty string, but actually writing an empty value into a custom property..., like --foo: ;, is a valid (empty) value, not the guaranteed-invalid value....这简直让我眼界大开。在我有限的开发生涯中,很难找到类似于 css 这种设计意图和使用方式差异如此之大的技术。

    86720

    10 个关于 TypeScript 的小技巧

    假设我想在页面搜索框里找到一个元素: const textEl = document.querySelector('inpot'); console.log(textEl.value); // ?...Property 'value' does not exist on type 'Element'. Oops…… 抛出了一个错误,因为我把 ‘input’ 打成了 ‘inpot’ 它怎么知道的?...,因为它仅适用于基本元素选择器,但总比没有好,对吧?...we assure TypeScript // that 'textEl' is not null/undefined 5、当迁移到 TS… 通常,当您具有要迁移到 TypeScript 的旧版代码库时...然后,仅当开发人员处理旧文件时,他才会删除此注释并仅修复该文件中的所有掉毛错误。这样一来,我们就不会进行革命,而只会进行进化-代码库会逐渐但安全地得到改善。

    1.3K10

    我的不可能这么可爱

    ="radio" /> 第三类:侦查系(Input Value-checking) 选择处于空值时的 ,暂未被浏览器支持 可怕,除了选择器,居然还跟这些属性有关系 除了有很多相关的选择器...,结合不同的type还有不同的属性可以供使用。...在这里我们重点分享下 pattern 这个属性,这是一个用来验证 input[value] 是否合法的属性,里面的内容就是匹配value的,语法便是正则的语法,例子如下: 一个class就是保证了在两个输入框不通过的时候隐藏,就是当输入框值为空或者不符合验证规则,则隐藏提交按钮。...第二个,第三个class则是控制当用户在输入框输入内容时,如果不符合验证规则,则显示错误信息,否则则隐藏。

    48910

    学习VUE总得知道Object.defineProxy怎么使用吧

    今天就专门讲一下Object.defineProxy是如何使用的,这样在以后讲到Vue2.X的源码时,就更容易理解了。...Object.defineProperty()方法可以直接在一个对象上定义一个新属性或者修改它的一个先有属性并返回此对象。 下面先举个例子示意下。...Cannot both specify accessors and a value or writable attribute 属性介绍: configurable 当且仅当该属性的 configurable...enumerable 当且仅当该属性的 enumerable 键值为 true 时,该属性才会出现在对象的枚举属性中。 默认为 false。 value 该属性对应的值。...默认为 undefined writable 当且仅当该属性的 writable 键值为 true 时,属性的值,也就是上面的 value,才能被赋值运算符 (en-US)改变。

    28200

    Angular 从入坑到挖坑 - 组件食用指南

    selector:选择器,当我们在页面上添加了这个选择器指定的标签()后,就会在当前使用位置上创建并插入这个组件的一个实例 templateUrl...当需要使用这个组件时,直接在页面上添加选择器对应的标签就可以了 ?...,会获取到条数据的索引值 当渲染的数据发生改变时 4,会导致 dom 元素的重新渲染,此时可以采用 trackBy 的方式,通过在组件中添加一个方法,指定循环需要跟踪的属性值,此时当渲染的数据发生改变时...安全导航运算符 在视图中使用的属性值为 null or undefined 时,javascript 和 angular 会引发空指针异常并中断视图的渲染过程, 从而视图会渲染失败,而使用了安全导航运算符...非空断言运算符用来告诉编译器对特定的属性不做严格的空值校验,当属性值为 null or undefined 时,不抛错误。

    15.8K30

    可选链运算符(?.)

    链式运算符,不同之处在于,在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。...(); 注: 如果存在一个属性名且不是函数,使用 ?. 仍然会产生一个 TypeError 异常 (x.y is not a function). 处理可选的回调函数或者事件处理器 使用?....(err.message); // 如果 onError 是 undefined 也不会有异常 } } 可选链和表达式 当使用方括号与属性名的形式来访问属性时,你也可以使用可选链运算符: let nestedProp...property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment 可选链访问数组元素 let arrayItem...(); 使用空值合并运算符 空值合并运算符可以在使用可选链时设置一个默认值: let customer = { name: "Carl", details: { age: 82 } }; let

    1.1K30

    【译】通过可选链操作符重构大型代码库的经验教训

    我等这一刻已经很久了,这是我认为自箭头函数和模板字符串以来最重要的一个语法改进,甚至比async/await还要重要。因为属性访问操作遍地都是,可选链操作符能够改进大量的代码。...错误或忘记使用可选链操作符 要注意,若通过可选链操作符重构一条很长的链,就需要给每个可能不存在的属性插入?.,否则一旦返回undefined就会抛出错误了。 亦或者,将?.插入到错误的地方。...this.marker 然后就抛出了TypeError: Cannot read property 'element' of undefined的错误。然后,我通过多插入一个?....运算符优先级 还有一件需要注意的事情就是可选链操作符的优先级高于&&,而相等/不等操作符的优先级低于?.而高于&&。当通过使用来?.替换&&时,若还涉及到相等检查,这点就变得十分重要。...trim(); } 现在,如果value是一个空字符串,该函数也会返回一个空字符串。其只会在value为空值时,才会返回undefined。

    86730

    2022我的前端面题试整理

    扩展运算符的作用及使用场景(1)对象扩展运算符对象的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中。...第二个是实现代码的逻辑提取与复用,当然mixin也可以实现逻辑提取与复用,但是像前面所说的,多个mixin作用在同一个组件时,很难看出property是来源于哪个mixin,来源不清楚,另外,多个mixin...现在定义一个对象:const stu = { name: 'Bob', age: 24}假如想要解构它的两个自有属性,可以这样:const { name, age } = stu这样就得到了 name...== y;};垃圾回收对于在JavaScript中的字符串,对象,数组是没有固定大小的,只有当对他们进行动态分配存储时,解释器就会分配内存来存储这些数据,当JavaScript的解释器消耗完系统中所有可用的内存时...第二个是 To 空间的内存使用占比是否超过限制。当对象从 From 空间复制到 To 空间时,若 To 空间使用超过 25%,则对象直接晋升到老生代中。

    85320
    领券