精通 CSS 选择器(二)

补充了一些之前遗漏掉的选择器以及一些在 Selectors Level 4 中新定义的选择器。

[attribute=\”value\” i],在 Selectors Level 4 中增强了属性选择器,添加一个 i 标识,让属性大小写不再敏感,例如:

支持的浏览器:Chrome/Opera, Firefox, Safari

:matches(selector…),选择匹配任意选择器参数的元素,例如:

使用该伪类可以写成:

作用是简化代码。

支持的浏览器:Chrome/Opera(:-webkit-any), Firefox(:-moz-any), Safari

:any-link,选择所有链接:

支持的浏览器:Chrome/Opera(:-webkit-any-link), Firefox(:-moz-any-link)

:indeterminate,该伪类目前有以下3种情况:

1.选择一组单选框,其中没有任何一个单选框是 :checked 状态,例如:

设置一个红色轮廓线,

当改变一组单选框中任意一个单选框为 :checked 状态时,该伪类失效。

支持的浏览器:Chrome/Opera

2.选择 indeterminate DOM 属性为 true 的复选框,例如:

设置一个红色轮廓线,

用 JavaScript 改变元素的 indeterminate 属性值:

点击复选框改变其状态时,该伪类失效。

支持的浏览器:Chrome/Opera

3.选择不确定状态的 progress 元素,例如 :

支持的浏览器:Chrome/Opera, Firefox, IE 10, Safari

:default,选择一组相似元素中默认的元素,例如:

可以选中默认状态为 :checked 的单选框和复选框,具有 selected 属性的 元素,表单默认的提交按钮,

支持的浏览器:Chrome/Opera, Firefox, Safari

:valid:invalid,该伪类除了可以选择输入类元素也可以选择 form 元素,所以可以分为两种情况:

1.:valid 选择值通过校验的输入元素,:invalid 选择值未通过校验的输入元素,例如:

值通过校验的元素显示绿色边框,值未通过校验的元素显示红色边框:

支持的浏览器:Chrome/Opera, Firefox, IE 10, Safari

2.:valid 选择内部所有输入元素都通过校验的 form 元素,:invalid 选择内部至少有一个输入元素未通过校验的 form 元素

示例,当表单内部有输入元素未通过校验时隐藏提交按钮,所有元素都通过校验时则显示提交按钮:

样式:

支持的浏览器:Chrome/Opera, Firefox, Safari

:in-range:out-of-range

:in-range 选择值在可选范围内的数值日期输入元素,:out-of-range 选择值在可选范围外的数值日期输入元素,例如:

值在范围内的元素显示绿色轮廓,值在范围外的元素显示红色轮廓:

如图:

:in-range 是 :valid 的一种特例,:out-of-range 是 :invalid 的一种特例。

支持的浏览器:Chrome/Opera, Firefox, Edge, Safari

:required:optional

:required 选择所有设置了 required 属性的 input, textarea, select 等表单元素,:optional 选择所有没有 required 属性的 input, textarea, select 等表单元素,例如:

将必填的文本框显示为红色边框:

支持的浏览器:Chrome/Opera, Firefox, IE 10+, Safari

:read-only:read-write

:read-only 选择状态为只读的元素,:read-write 选择状态可读写的元素,例如:

:read-only 伪类和 [readonly] 属性选择器是不一样的。

支持的浏览器:Chrome/Opera, Firefox(:-moz-read-only, :-moz-read-write), Edge, Safari

:nth-child(n of selector),选择同级元素中第 n 个满足参数选择器的元素,其中 n 可以是自然数,也可以是公式或者关键词,和 Selectors Level 3 中定义的一样,例如:

选择同级中第 2 个具有 important 类的 li 元素,

如果这样写:

该选择器选择的是同级中第 2 个同时具有 important 类的 li 元素:

:nth-last-child(n of selector),同上,只是倒着数。

支持的浏览器:Safari

:not(selector…),在 Selectors Level 3 中否定伪类只能传入简单的选择器参数,在 Selectors Level 4 中增强了参数,可以给参数传入一个选择器列表,用于选择不匹配所有选择器参数列表的元素,参数之间用逗号分隔,例如,选择所有类不为 foo 同时也不为 bar 的 p 元素:

该选择器的效果等同于 。

支持的浏览器:Safari

:has(selector…),选择满足参数给定条件的元素,例如:

选择内部含有 h1 元素的 header 元素,

该伪类具有很强大的功能,更多示例:

支持的浏览器:暂无

:focus-within,选择内部元素获得焦点的元素,例如:

样式:

当输入框获得焦点的时候,会应用上面的样式,同时,其父元素也会应用上面的样式。

支持的浏览器:暂无

:dir,选择特定书写方向的元素,例如:

从左向右书写的文字显示为红色,从右向左书写的文字显示为蓝色:

支持的浏览器:Firefox(:-moz-dir)

:fullscreen,选择处于全屏显示状态下的元素,例如:

全屏显示时段落文本大小为普通时的两倍。

支持的浏览器:Chrome/Opera(:-webkit-full-screen), Firefox(:-moz-full-screen), IE 11(:-ms-fullscreen), Safari(:-webkit-full-screen)

::placeholder,选择占位符伪元素,例如:

样式:

支持的浏览器:Chrome/Opera(::-webkit-input-placeholder), Firefox(::-moz-placeholder), IE10(:-ms-input-placeholder), Edge(::-ms-input-placeholder), Safari(::-webkit-input-placeholder)

:placeholder-shown,选择当前正在显示占位符的元素,例如:

如图:

支持的浏览器:Chrome/Opera, Safari

那些容易被你忽略的HTML重要属性,你知道几个?

在前端开发编写html文件的时候,我们可能会很熟练的写出常见的html元素,但是如果问到某些元素的差别时,大家不一定能说的出来,今天就给大家总结一下那些很常见但容易混淆的属性。

html与css

css样式文件引入的方式有两种,分别是link标签和@import。

  • link语法结构

link语法结构如下,注意rel=\’stylesheet\’属性要加上。

link语法结构

  • @import语法结构

当@import用在html中时,需要配合style标签

@import在html中

当@import用在css文件中,直接使用@import url()即可

@import在css中

既然link与@import都可以用来引入css,那么它们的区别是什么呢?我们又该如何选择呢?

  • link是XHTML标签的一种,除了可以加载css外,还可以定义其他rel属性,而@import只能用来加载css。

  • link标签在加载css时,与页面一同加载,而@import需要等到网页完全加载以后才进行加载。

  • link是XHTML标签,不存在兼容问题,而@import是在CSS2.1中提出的,对于低版本的浏览器不支持。

  • link标签可以通过Javascript代码去控制其属性,而@import不可以。

javascript控制link

  • @import支持在css文件中再次引入其他css文件,方便对多个css文件的管理。

因为@import引入的文件需要在网页完全加载后再加载,如果在网络速度较慢的情况下,会出现页面闪现,因此建议使用link标签代替@import。

html元素的readonly与disabled属性一般都是用于无法改变表单的内容,但是两者也是有区别的。

  • readonly属性只针对input(text,password)和textarea元素,而disabled适用于所有表单元素,包括select,radio,checkbox,button等。

  • 在表单元素使用了disabled后,该元素的的值不会随着form的action请求传递到服务器端,而使用readonly的元素值可以传递到服务器端。

以下是一些关于两者的使用建议。

  • 在表单中为用户预填的唯一标识码,不允许用户改动,而且需要传递到后台的使用readonly属性。

  • 用户提交完表单元素后,等待服务器端的验证,这个过程应该将元素设为disabled,button和submit也应该设为disabled,以防止重复提交。

  • title属性

img标签的title属性是用来提供一些建议性的信息,在鼠标停留在上方时会显示,它对于图片来说只是一种注释性的信息,重要性偏低。

  • alt属性

alt属性是为不能显示图像时,用来指定替换文字,需要注意的是替换文字是用来代替文字的,而不是用来注释文字的。

  • 属性的使用

在做图片为主的网页时,考虑到网页的SEO,应当设置图片的alt属性为图片的真实内容,而给title设置一些建议性的内容。

今天这篇文章主要将了几个html中容易混淆的属性,你有收获吗?

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。