CSS笔记之伪类与伪元素

伪类分为两种:UI伪类 与 结构化伪类

UI伪类:a:link{}    a:hover{}   a:active{}  a:visited{}

input[type=‘text‘]:focus{}    #title-one:target{}

结构化伪类:  table  tr:nth-child(even){}   //even---下标为偶数的子元素

table  tr:nth-child(odd){}   //odd---下标为奇数的子元素

table  tr:first-child{}

table  tr:last-child{}

ul      li:first-child{}

伪元素:最常用的伪元素莫过于 :before  与  :after

在清除浮动时就使用这两个伪元素,当然,在其他的地方也会用到。

关于伪类与伪元素的笔记就到此,如果园友知道更多的,欢迎补充。

时间: 2024-12-23 14:05:40

CSS笔记之伪类与伪元素的相关文章

CSS伪类和伪元素

一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3C规范中,CSS伪类有如下几个: :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦点的元素增加样式 :hover:当鼠标悬浮在元素上方时,向元素增加样式 :link:向未被访问的链接增加样式 :visited:向已被访问的链接增加样式 :first-child:向元素的第一个子元素增加样式 :lang:向带有指定lang属性的元素增加样式 提示: 1.伪类名称对大小写不敏感.比如:ACTIV

CSS中的伪类和伪元素

伪类 伪类与类相似,但又没有类附加标签上.伪类分为UI伪类和结构化伪类. UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的元素上) :active(将样式添加到被激活的元素上) :focus(将样式添加到被选中的元素上) 结构化伪类 :first-child(将样式添加到第一个子元素上) :last-child(将样式添加到最后一个子元素上) 伪元素 伪元素是在文档中若有实无的元素. 主要有以下几种 :fir

CSS伪类和伪元素的区别

CSS - 伪类和伪元素的区别 本文转载于http://www.cnblogs.com/iceflorence/p/5796083.html 伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它

【从0到1学Web前端】CSS伪类和伪元素

1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} 如下面的一段代码: a.red : visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syn

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:

关于css中伪类及伪元素的总结

css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有“段落的第一行”.“文章首字母”之类的选择器,而这在一些出版场景里又是必须的,这一情况下出现的.引用标准中的话: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on infor

CSS 伪类和伪元素--pseudo

总结在前: 0. 参考资料 1. 伪类和伪元素是不同的两种东西. 2. 伪类和伪元素都属于CSS选择器. 3. CSS引入伪类和伪元素是为了实现基于文档树之外的信息,i.e. 段落的第一行,的格式化. 4. 伪类和伪元素都不出现在源文件和文档树中. 伪类:一开始单单只是用来表示一些元素的动态状态,典型的是<a>的 LVHA四个状态,CSS2标准扩展了概念范围, 使其成为了所有逻辑上存在,但在文档树中却无须标识的分类. 伪元素:代表某个元素的子元素,虽然这个子元素在逻辑上存在, 但是不存在于文档

CSS - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式. 属性 描述 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦

css伪类和伪元素属性

对css中基本选择器和属性选择器以及伪类选择器做了总结,但是提到伪类,与之相对应的必然是伪元素. 那么,,,二者到底有什么不能说的秘密呢?接下来 先归类下两者 伪类的种类: 伪元素的种类: 两者的使用方法: css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes  伪类 ::Pseudo-elements 伪元素 但因为兼容性问题,现在大部分两者还是统一用单冒号,但抛开兼容性问题,我们书写时应尽量养成良好习惯,区分两者. 二者区别