伪类选择after before

2024-11-04

css之伪类选择器:before :after(::before ::after)

一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before :after的区别:css3中修订后的伪元素使用::两个冒号,使用单冒号和双冒号的功能还是一样,IE8只支持单冒号的伪元素,所以使用单冒号的最安全. 关于伪元素和伪类(选择器): 伪元素: 伪类选择器: 二.实例: 表单没有添加冒号的情况: 1. :before 2. :after

CSS3初学篇章_2（伪类选择符）

id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以"."定义 #id{ color:red; } .class{ color:blue; } <p id="id">id选择符</p> <p class="class">class选择符</p> 伪类选择符 /*设置超链接a在

CSS :hover伪类选择定义和用法

伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元素的:hover ,也就是只支持通过类型选择符选择的a元素的:hover . 语法结构: E:hover{ Rules } 浏览器支持: IE浏览器支持此选择符.火狐浏览器支持此选择符.谷歌浏览器支持此选择符.opera浏览器支持此选择符. 实例代码: <!DOCTYPE html> <ht

css伪类选择符

1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) n从1开始3)E :nth-last-child(n) 匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效.4):first-of-type 以父元素为参照,选择器匹配属于其父元素的特定类型的首个子元素的所有元素. 5)标签 : only-of-type , 以父元素为参照,匹配只含

CSS选择符-----伪类选择符

Element:hover E:hover { sRules } 设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 { font-size: 16px; } a, div { display: block; ma

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣

css3 -- 伪类与伪元素

伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){} E : first-*(odd){} B:nth-child 是根据其父元素中国子元素的总数进行计算 nth-of-type 是根据特定类型的子元素进行计数 nth-last-child 与nth-child类似,不过是从最后开始计算 nth-last-of-type 与nth-of-type 类似,不过是从最后开始计算 C:first-of-type .last

css 伪类::after ::beftor 的使用方式

注释:对于 IE8 及更早版本中的 :before,必须声明 . ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动. .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .cl

二.CSS的伪类

CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CSS3新增伪类 UI伪类 UI伪类会在HTML标签处于某种状态时,应用CSS样式,最常使用UI伪类的标签是a,利用链接伪类,用户可以在鼠标悬停是改变的颜色,去掉文本的下划线或提示信息面板等我们先来讨论下链接伪类.链接伪类总共有四个,因为链接始终是以下四种状态之一 link 等待用户点击 visited 用户

CSS Pseudo-Element Selectors伪对象选择符

一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效. 为了支持IE8,许多目前许多情况还是使用单个冒号,显示效果一样 Selectors选择符 CSS Version版本 Description简介 E:first-letter/E::first-letter CSS1/CSS3 设置对象内的第一个字符的样式. E:first-line

【CSS】伪类与伪元素

一伪类语法: selector : pseudo-class {property: value} 提示:伪类名称对大小写不敏感. 与 CSS类搭配使用 selector.class : pseudo-class {property: value} 例子:a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:act

奇妙的CSS之伪类与伪元素

我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和伪元素是预定义的.独立于文档元素的,它们不是从DOM中获取的,不是基于元素本身特征的(id,类,属性等).它们从元素的特殊状态来获取,比如元素的兄弟元素,子元素,文本元素的第一个字符等. CSS伪类: 和一般的DOM中的元素样式不一样,它并不需要任何DOM内容.只是插入了一些修饰类的元素,这些元素对

CSS 伪类与伪元素

CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生选择器等等这些从HTML文档层次结构(DOM树)中获取元素不同的是,伪类和伪元素是预定义的.独立于文档元素的.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).当然,伪类和伪元素的表示形式也使用“:”(英文冒号)

CSS 类、伪类和伪元素差别具体解释

CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素加入样式,class是定义在HTML文档树中的. 可是这在一些情况下是不够用的,比方用户的交互动作(悬停.激活等)会导致元素状态发生变化.class对这些动态变化无能为力. 为此,CSS引入了伪类(pseudo-class)的概念用来支持依据文档树以外的信息来过滤元素的能力. 伪类是一个抽象类,本质上还是一个类,因此其主要作用仍然是用来选择元素而后设定详细的样式. 伪类的定义使用:单冒号加上名称,如 mydiv:hover. 伪

妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些一.总结一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个divE:target { sRules } 匹配相关URL指向的E元素.

CSS伪元素与伪类的区别

伪类和伪元素介绍伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类. :first-child :link: :visitive :hover :active :focus :lang 伪元素:与伪类针对特殊状态的元素不同的是,伪元

CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属性选择器.伪类选择器.过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,使编写代码更加简单轻松. 根据所获取页面中元素的不同,可以把CSS3选择器分为5大类:基本选择器.组合选择器.伪类选择器.伪元素和属性选择器.其中,伪类选择器又分为6种:动态伪类选择器.目标伪类选择器.

HTML连载64-a标签伪类选择器的注意点与练习

一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原则: (love\hate原则,即link\visited\hover\active)默认状态.被访问后的状态.悬停状态.长按状态 (3)如果默认状态的阿燕是和被访问过的状态的样式一样,那么可以缩写为 a{ color:颜色;},后面写了另外两种状态也是不影响的. 二.快捷键 (1)ul>(li>

HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出

一.外联样式通过link标签引入外部css文件夹中的xxx.css文件到head标签中例: 二. 1.组选择器选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">

CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1) id选择器(# myid) 2) 类选择器(.myclassname) 3) 标签选择器(div, h1, p) 4) 相邻选择器(h1 + p) 5) 子选择器(ul > li) 6) 后代选择器(li a) 7) 通配符选择器( * ) 8) 属性选择器

CSS选择器之伪类选择器（伪元素）

selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 <p> 元素的首行,并为其设置样式. first-letter 选择每个 <p> 元素的首字母,并为其设置样式. before 在每个 <p> 元素的内容之前插入新内容.(IE7及以下不支持) after 在每个 <p> 元素的内容之后插入新内容.(IE7及以下不支持

伪类选择after before

热门专题