CSS伪类的基本使用

前端基础：CSS中伪类的作用和基本使用

作为一名优秀的前端开发，不会使用伪类和伪元素有点说不过去。

但是很多小白可能伪类和伪元素都分不清楚，我先同通俗的话解释下：伪类是用来给指定选择器添加状态效果，伪元素是给指定元素添加内容修饰。

今天先带大家看一下伪类是如何使用的，明天给大家演示下伪元素的使用。

常见的伪类诸如:active/:focus/:hover/:visited/:first-child等大家可能比较熟悉，用的比较频繁，实际上伪类有几十个，下面分门别类的展示一下

一、用于链接，按钮等元素的常见伪类

// :active 常见于用户点击按钮和松开按钮之间的样式// :visited 常用于链接被访问之后的样式// :link 一个链接未被点击时的样式

二、用于可获取焦点的元素的常见伪类

// :focus 可输入内容的标签选中时的元素样式
// :focus-within 当他的后代出现光标时触发该样式

三、用于打印时的常见伪类

// :first 打印文档的时候，第一页的样式。用于@page
// :left 用于打印时的左侧样式
// :right 用于打印文档的所有右页

四、用于指定元素的常见伪类

// :first-child 表示在一组兄弟元素中的第一个元素。
// :first-of-type 表示一组兄弟元素中其类型的第一个元素
// :last-child 代表父元素的最后一个子元素。
// :last-of-type 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素
// :not() 用来匹配不符合一组选择器的元素。
// :nth-child() 匹配到的元素集合（n=0，1，2，3...）
// :nth-last-child() 这个CSS 伪类 从兄弟节点中从后往前匹配处于某些位置的元素
// :nth-last-of-type() 从结尾处反序计数
// :nth-of-type 针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置
// :only-child 匹配没有任何兄弟元素的元素
// :only-of-type 匹配没有其他相同类型的兄弟元素

五、与鼠标相关的伪类

// :hover  鼠标悬浮在某个元素上时的样式

六、其他伪类

// :checked 表示处于选中状态是的radio、chexkbox等元素的状态
// :default 表示处于默认值时的元素状态，常见于radio option等
// :dedined 用于定义好的元素上。常见于自定义元素标签
// :empty 当元素没有子元素时采用此样式
// :enadled 用于能被激活或者能获取焦点的元素
// :host 用于shadowDOM 不常见
// :indeterminate 用于状态不确定的元素，比如正在编辑中的input或者正在改变中的progress元素
// :in-range 用于input标签的内容在限定的min和max中的样式
// :out-of-range 用于input标签的内容超出min和max时的样式
// :lang() 根据语言确定一些符号
// :optional 用于没有表示必填的一些元素属性
// :read-only 表示元素不可被用户编辑的状态
// :read-white 代表可被用户编辑的元素的样式
// :root 相当于 html不过比html标签选择器权重更高
// :target 常用于点击跳转套页面指定id元素时的样式
// :valid 内容符合要求时的元素样式

本来想再写一些例子的，但是有点晚了先睡觉啦有看的再更新。

CSS伪类的基本使用相关推荐

:empty css 可以用在哪些标签,CSS伪类:empty让我眼前一亮(实例代码)
最近看过我文章的都知道:我最近在负责一个微信小程序的项目,在其中遇到了很多有趣的事和一些"奇思妙想".本文的背景就是某天早上我看着wxml文件中一堆wx:if/else和hidde ...
CSS特效（1）——css伪类实现表单验证样式
css伪类实现表单验证样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
HTML转义字符 Unicode和CSS伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...
html分为哪两种,css伪类分为哪几种
css伪类分为UI伪类和结构化伪类两种.UI伪类分为链接伪类.focus伪类和target伪类.结构化伪类分为[:first-child].[:last-child]和[:nth-child]. CS ...
html鼠标点击伪类,CSS伪类：CSS3鼠标滑过按钮动画
前言按钮,对开发者而言,是非常常见的一个功能.前端通常会对按钮加入一些操作交互样式,增加一些用户体验. 比如:hover样式.点击样式.loading样式等.下面我们通过简单示例在学习一下css3动 ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
前端学习（219）:css伪类选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...
css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类，助你提升布局效率！
作者:Chidume Nnamdi 译者:前端小智来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...
unicode html转义字符,HTML转义字符 Unicode和CSS伪类介绍(示例代码)
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...

CSS伪类的基本使用

CSS伪类的基本使用相关推荐

最新文章

热门文章