当前位置:小鱼儿玄机二站 > 编程应用 > 【CSS 学习】CSS 选择器

【CSS 学习】CSS 选择器

文章作者:编程应用 上传时间:2019-09-05

以下计算内容摘自 《移动Web前端高效开垦实战》

Link

选择器 名 称 实 例 描 述 版 本
* 通用选择器(Universal selectors) * 匹配所有的元素 2.1
E 标签选择器(Type selectors) p 匹配所有的 <p> 1
.class 类选择器(Class selectors) .nav 匹配所有 的元素 1
#id ID选择器(ID selectors) #wrapper 匹配所有 的元素 1
E[attr] 属性选择器(Attribute selectors) a[data-url] 匹配所有 data-url 属性的 <a> 的元素 2.1
E[attr=val] 属性选择器(Attribute selectors) a[data-url='http'] 匹配所有 data-url="http" 属性的 <a> 的元素 2.1
E[attr~=val] 属性选择器(Attribute selectors) a[data-url~='http'] 匹配所有 data-url 属性包含 http<a> 元素 2.1
E[attr|=val] 属性选择器(Attribute selectors) a[data-url|='http'] 匹配所有 data-url 属性以 http 开头的 <a> 元素 2.1
E[attr^=val] 属性选择器(Attribute selectors) a[data-url^='http'] 匹配所有 data-url 属性以 http 开头的 <a> 元素 3
E[attr$=val] 属性选择器(Attribute selectors) a[data-url$='http'] 匹配所有 data-url 属性以 http 结尾的 <a> 元素 3
E[attr*=val] 属性选择器(Attribute selectors) a[data-url*='http'] 匹配所有 data-url 属性包含 http<a> 元素 3
E F 后代选择器(Descendant selectors) div p 匹配所有 <div> 元素下所有 <p> 元素 1
E > F 子选择器(Child selectors) div p 匹配所有 <div> 元素下所有子 <p> 元素 2.1
E + F 相邻兄弟选择器 label + input 匹配所有<label> 元素同级的第一个 <input> 元素 2.1
E ~ F 兄弟选择器 label ~ input 匹配所有<label> 元素同级的所有 <input> 元素 3
S1,S2,..... 选择器分组 label,input 匹配所有<label>,<input>元素 1

The :link CSS pseudo-class lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like :hover:active or :visited. In order to appropriately style links, you need to put the :link rule before the other ones, as defined by the LVHA-order:link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect.

伪类(Pseudo-classes)用于钦赐采取器的某种特定情景或标准,伪类在 DOM 中并空头支票,但对客户却是可知的。

 

动态伪类(Dynamic pseudo-classes)

动态伪类对除了其名称、属性或内容之外的特征的成分举行归类,不会展现在文书档案源或文树中。

选择器 实 例 描 述 版 本
:link a:link 匹配未被访问的链接 1
:visited a:visited 匹配被访问过的链接 1
:hover a:hover 匹配鼠标指针在其浮动的元素 1
:active a:active 匹配鼠标指针在其上按下的元素 1
:focus input:focus 匹配获得焦点的元素 2.1

Visited

对象伪类(The target pseudo-classes)

目标伪类内定当前活动的锚,使用对象伪类可感觉移动的锚设置样式。

选择器 实 例 描 述 版 本
:target #tab1:target 匹配活动的锚 3

 The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link:hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order:link — :visited — :hover — :active

言语伪类(The language pseudo-classes)

言语伪类向带有钦点 lang 属性元素增多样式。

选择器 实 例 描 述 版 本
:lang #p:lang 匹配带有指定 lange="en"<p> 元素 3

 

UI成分状态伪类(The UI element states pseudo-classes)

UI成分状态伪类首要用以钦点表单中的成分状态。

选择器 实 例 描 述 版 本
:enabled input:enabled 匹配启动的元素 3
:disabled input:disabled 匹配禁用的元素 3
:checked input:checked 匹配被选中的元素 3

displayvisibility 属性对于UI成分状态伪类相配 enabled/disabled 状态未有影响。

Active

结构性伪类(Structural pseudo-classes)

结构性伪类用于钦定文书档案的一定组织。

选择器 实 例 描 述 版 本
:root :root 匹配文档的根元素 3
:nth-child :nth-child 匹配其父元素的第 n 个子元素 3
:nth-last-child :nth-last-child 匹配其父类倒数第 n 个子元素 3
:nth-of-type :nth-of-type 匹配其父类第 n 个有着相同选择器的子元素 3
:nth-last-of-type :nth-last-of-type 匹配其父类倒数第 n 个有着相同选择器的子元素 3
:first-child :first-child 匹配其父类元素的第一个子元素 3
:last-child :last-child 匹配其父类元素的最后一个子元素 3
:last-child :last-child 匹配其父类元素的最后一个子元素 3
:first-of-type :first-of-type 匹配其父类元素第一个有着相同选择器的子元素 3
:last-of-type :first-of-type 匹配其父类元素最后一个有着相同选择器的子元素 3
:only-child :only-child 匹配其父类的唯一子元素 3
:only-of-type :only-child 匹配其父类的唯一有着相同选择器的子元素 3
:empty :empty 匹配没有子元素的元素 3

:nth-child:nth-last-child:nth-of-type:nth-last-of-typen 是从 0 开端的寸头,表明式可写成 an+b, a 和 b 是 0 或正整数,表达式的写法相当于把每 a 个子元素分成一组,取每组的第 b 个成分;取第奇数、偶数个子成分可写表达式为 2n+1 或 even2n 或 odd

否定伪类是用来摘取具备非钦定类型成分的别的因素。

选择器 实 例 描 述 版 本
:not input:not([type="text"]) 匹配所有非指定类型的其他元素 3

:active CSS伪类合作被客户激活的元素。它让页面能在浏览器监测到激活时交由反馈。当用鼠标交互时,它代表的是顾客按下按钮和放手按钮之间的年华。 :active 伪类平常用来相配tab键交互。平时用于但并不限于 <a> 和 <button> HTML元素。

伪元素

伪成分(Pseudo-elements)是指不设有与文档树中的抽象。

选择器 实 例 描 述 版 本
::first-line ::first-line 匹配元素文本内容的首行 1
::first-letter ::first-letter 匹配元素文本内容的首个字母 1
::before ::before 元素之前 2.1
::after ::after 元素之后 2.1

在 CSS 1 和 CSS 2 中,伪类采纳器中唯有三个 ":",而 CSS 3 变为两个"::",是为着不一样伪类与伪成分,最近这五个写法效果同样。

::before::after 必需安装 content 属性,不然成分无法见效。

CSS 中的权重分别为 4 个等第:

  • 内联样式(HTML 文书档案中的 style 属性)
  • ID 选择器
  • 类、伪类、属性采取器
  • 要素、伪类元素

那 4 个等级由高到低代表分裂的优先级,!important 写在 CSS 法规后,能够将相应的准绳升高到最高权重。

github 原作地址 招待 Star 和 Watch

以此样式大概会被后宣称的别样链接相关的伪类覆盖,这一个伪类包蕴 :link:hover和 :visited。为了健康增加样式,必要把 :active的样式放在所有链接相关的样式后,这种链接伪类先后顺序被称为LVHA顺序:link — :visited — :hover — :active。

 

Hover:

:hover CSS伪类适用于客户使用提醒设备虚指四个要素(未有激活它)的图景。这一个样式会被别的与链接相关的伪类重写,像:link:visited, 和 :active等。为了保证生效,:hover准绳必要放在:link和:visited准则之后,但是在:active准绳从前,根据LVHA的循顺序评释:link-:visited-:hover-:active。

:hover伪类能够别的伪元素上利用。

顾客的可视顾客端比方Firefox, Internet Explorer, Safari, Opera or Chrome, 会在光标(鼠标指针)悬停在要素上时提供关乎的体制。

 

Focus

CSS伪类 :focus 在一个因素变为主题时生效,客商能够由此键盘或鼠标激活焦点(比方:二遍表单输入)。

 

First-Child

CSS伪类 :first-child意味着了有个别成分,那么些成分是它父成分的的首先个子成分.

 

Nth-Child

CSS 伪类 :nth-child(an+b)分外在文书档案树中前边有an+b-1个兄弟成分的成分,此时n胜出或等于0,何况该因素具备父成分。简单的讲,该采用器相配多个地方满足an+b的子成分。

示例:

  • 1n+0,或n,匹配每二个子成分。
  • 2n+0,或2n,相称岗位为2、4、6、8…的子成分,该表明式与重要字even等价。
  • 2n+1合营岗位为1、3、5、7…的子成分、该表达式与根本字odd等价。
  • 3n+4合作岗位为4、7、10、13…的子元素。

ab的值必需为整数,第多个子成分的岗位为1,也正是说,该伪类相配全体地方落在联谊{an+b;n=0,1,2,…}中的成分。平常用来表格的隔行相配。

 

Nth-Last-Child

伪类:nth-last-child协作在文书档案树中前边有an+b-1个兄弟成分的因素,此时n出乎或等于0,並且该因素拥有父成分。

 

实在,该伪类的作用与:nth-child同样,不过其是从后往前选用成分,实际不是从前以后。

 

Nth-Of-Type

:nth-of-type CSS 伪类 相配三个在文书档案树中地方为an+b-1 且和伪元素前名字一样 的元素, 此时n超过或等于0,而且该因素具备父成分。参见 :nth-child关于伪成分参数语法详细的表明. 假使您想在不受同胞异类成分和父元素影响保险自个儿挑选一样种类得成分,那几个伪成分越来越灵敏实用.

 

First-Of-Type

:first-of-type CSS 伪类相配父元素的具备该子成分类型中率先个冒出的元素.

 

Last-Of-Type

 :last-of-type CSS 伪类 表示了在(它父成分的)子成分列表中,最终贰个给定类型的元素。

 

Empty

 :empty 伪类 代表未有子成分的因素。 这里说的子成分,只总计成分结点及文件(包蕴空格),注释、运维指令不考虑在内。

 

Target

 伪类采取器 :target 代表一个特殊的元素,若是谈论区别的话,它需要一个id去匹配文书档案URubiconI的局地标志符.

包含片段标志符的UEscortIs链接到文书档案中某一个成分,被叫作是目的成分。举例,这里有三个UHighlanderI 指向四个叫section2锚点:
http://example.com/folder/document.html#section2
以此锚点能够是专断二个享有id属性的因素, e.g.<h1 id="section2"> 在我们的例子中,目标元素h1通过伪类选择器:target可以这样被表述:

 

Checked

 :checked CSS 伪类采取器表示其他radio(<input type="radio">), checkbox (<input type="checkbox">) 或option HTML成分("option")) 在三个HTML成分("select") 成分选中或一连四个情景。顾客能够改造在该因素上的事态,或采纳三个不等的值,在这种场地下:checked伪类不再适应于这么些因素,但仍是有关的多少个。

 

Enabled

 CSS 伪类 :enabled 表示其他启用的(enabled)元素。假如叁个成分能够被激活(如选取、点击或收受文本输入)或获得关节,则该因素是启用的。成分还也许有三个剥夺的处境(disabled state),在被剥夺时,成分无法被激活或得到关节。

 

Disabled

 :disabled 是 CSS 伪类,表示其他被剥夺的因素。假使一个因素不能够被激活(如选拔、点击或接受文本输入)或得到关节,则该因素处于被剥夺状态。成分还有二个启用情状(enabled state),在启用情形下,元素得以被激活或获得关节。

 

本文由小鱼儿玄机二站发布于编程应用,转载请注明出处:【CSS 学习】CSS 选择器

关键词: