Code analysis of pseudo-class selectors and pseudo-element selectors in CSS-CSS Tutorial-php.cn

This article brings you an introduction to pseudo-class selectors and pseudo-element selectors in CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

1. Link pseudo-class

1. Link pseudo-class

/*链接伪类*/ 注意:link，:visited，:target是作用于链接元素的！ :link 表示作为超链接，并指向一个未访问的地址的所有锚 :visited 表示作为超链接，并指向一个已访问的地址的所有锚 :target 代表一个特殊的元素，它的id是URI的片段标识符

Copy after login

2. Code example:
01 _Anchor pseudo-class.html

点我点我点我

我是p啦

Copy after login

02_Anchor pseudo-class.html

     
  点我点我点我

Copy after login

03_target.html

p1 p2 p3

Copy after login

2. Dynamic pseudo-class

1. Dynamic pseudo-class

/*动态伪类*/ 注意:hover，:active基本可以作用于所有的元素！ :hover 表示悬浮到元素上 :active 表示匹配被用户激活的元素（点击按住时） 注意： 由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

Copy after login

2. Code example:

我是test

Copy after login

3. Privacy and:visited selector

1. Privacy and:visited selector

/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接 ： color background-color border-color

Copy after login

4. Form-related pseudo-classes

1. Form-related pseudo-classes

/*表单相关伪类*/ :enabled 匹配可编辑的表单 :disable 匹配被禁用的表单 :checked 匹配被选中的表单 :focus 匹配获焦的表单

Copy after login

2 , Code example:
01_Form status.html

  无标题文档

Copy after login

02_Form status.html

  无标题文档

Copy after login

03_Get focus.html

Copy after login

04 _Simulate radio button.html

  无标题文档

Copy after login

4. Structural pseudo-class

1. Structural pseudo-class

/*结构性伪类*/index的值从1开始计数！！！！ index可以为变量n(只能是n) index可以为even odd #wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele #wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素 除此之外:nth-child和:nth-of-type有一个很重要的区别！！ nth-of-type以元素为中心！！！ :nth-child(index)系列 :first-child :last-child :nth-last-child(index) :only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1)) :nth-of-type(index)系列 :first-of-type :last-of-type :nth-last-type(index) :only-of-type (相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)) :not :empty(内容必须是空的，有空格都不行，有attr没关系)

Copy after login

2. Code example:

Copy after login

04_not.html

not

first second third fourth fifth

Copy after login

05_empty.html

empty

Second

Third

Copy after login

5. Pseudo elements

1. Pseudo elements

/*伪元素*/ ::after ::before ::firstLetter ::firstLine ::selection

Copy after login

2. Code example:
after.html

after

伪元素

Copy after login

before.html

before

伪元素

Copy after login

firstLetter.html

First-Letter

sssss

Copy after login

firstLine.html

First-Line

sssss
sssss
sssss

Copy after login

selection.html

Selection

SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection

Copy after login

Related recommendations:

Some selections using pseudo-classes, pseudo-elements and adjacent elements in CSS Skills of selectors

Summary of selector types in CSS and examples of efficiency comparison

The above is the detailed content of Code analysis of pseudo-class selectors and pseudo-element selectors in CSS. For more information, please follow other related articles on the PHP Chinese website!