css伪类和伪元素的学习

最近用js实现一些css效果。发现有很多东西效果其实可以用伪类或者伪元素实现。特地补充下这方面的知识。 记录下

为什么引入伪类和伪元素

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

css引入伪类和伪元素概念是为了格式化文档树以外的信息,也就是说。伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者列表中的第一个元素。

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的,比如说,当用户悬停在指定的元素时,我们可以用:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。

伪元素用户创建一些不在文档树中的元素,并为其添加样式,比如说,我们可以通过:before来在一个元素前增加一些文本,

伪类

clipboard.png

伪类-状态

  1. :link 选择未访问的链接
  2. :visited 选择已访问的链接
  3. :hover选择鼠标指针浮动在其上的元素
  4. :active选择活动的链接
  5. :focus 选择获取焦点的输入字段

伪类-结构化

  1. :not 一个否定伪类,用于匹配不符合参数选择器的元素
  2. :first-child 匹配元素的第一个子元素
  3. :last-child 匹配元素的最后一个子元素
  4. :first-of-type 表示一组兄弟元素中其类型的第一个元素
  5. :last-of-type 表示一组兄弟元素中其类型的最后一个元素
  6. :nth-child 根据元素的位置匹配一个或者多个元素,它接受一个an+b形式的参数

    0n+3或简单的3匹配第三个元素
    2n+1匹配位置为1,3,5,7...的元素 你可以用odd替换奇数行,even代替偶数行
  7. :nth-last-child 与:nth-child相似,不同之处在于它从最后一个子元素开始计数
  8. :nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型的元素
  9. :nth-last-type 与nth-of-type相似,不同之处在于它是从最后一个子元素开始计数的。
  10. :only-child 当元素是其父元素中唯一的子元素时,:only-child匹配该元素
  11. :only-of-type 当元素是其父元素中唯一特定类型的子元素时,:only-child匹配该元素
  12. :target 当url带有瞄名称,指向文档内某个具体的元素时:target匹配该元素

伪类-表单相关

  1. :checked 匹配被选中的input元素,这个input元素包裹radio和checkbox.
  2. :default 匹配默认选中的元素
  3. :disabled 匹配禁用的表单元素
  4. :empty 匹配没有子元素的元素,如果元素中含有文本节点,html元素或者一个空格,则:empty不能匹配这个元素
  5. :enabled 匹配没有设置disabled属性的表单元素
  6. :in-range 匹配在指定区域内元素,
  7. :out-of-range 匹配不在指定区域内的元素
  8. :indetermimate 当某组中的单选框或复选框还没有选取状态时,:indeterminate匹配该组中所有的单选框或复选框
  9. :valid 匹配条件验证正确的表单元素
  10. :invalid 匹配提交验证错误的表单元素
  11. :optional :required匹配设置有无设置required属性的表单元素
  12. :read-only 匹配设置了只读属性的元素
  13. :read-write匹配处于编辑状态的元素

伪类-其他关

  1. :root 匹配文档的跟元素
  2. :fullscreen 匹配处于全屏模式下的元素

伪元素

clipboard.png

有时你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:). 这是CSS3的一部分,并尝试区分伪类和伪元素. 大多数浏览器都支持这两个值。

1 ::before/:before 在被选元素前插入内容,需要使用content属性指定要插入的内容。被插入的内容实际上不在文档树中

2 ::after/:after 在被元素后插入内容.其用法和特性与:before相似

3 ::first-letter/:first-letter 匹配元素中文本的首字母

4 ::first-line/:first-line匹配元素中第一行的文本,这个伪元素只能用在快元素中。不能用在内联中

5 ::selection匹配被用户选择或者处于高亮状态的部分,该元素只支持双冒号的形式

6 ::placeholder 匹配占位符的文本,只有元素设置placeholder属性是,该伪元素才能生效。

全文cx痕迹很严重。详细文章请看http://www.alloyteam.com/2016...

144 声望
5 粉丝
0 条评论
推荐阅读
项目实践总结
2 探索性产品,产品的方案都是摸索实践中产生,没有成型产品可以借鉴,这就意味着订单流程随时都可能变化,随时都要对老数据展示进行修复处理。(我们订单流程大的变化有过3次,每一次都必须兼容老数据的处理,头...

小溪流阅读 1k

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.3k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan30阅读 2.2k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.5k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.6k评论 1

封面图
万能的CSS 渐变!单标签绘制一个足球场
一眼望去,这里的形状只有圆形和矩形,在不借助其他标签的情况下(包括伪元素),其实很容易联想到渐变,一起看看如何绘制的吧,有非常多的渐变小技巧~

XboxYan18阅读 1.9k评论 8

封面图
144 声望
5 粉丝
宣传栏