css3 伪对象选择器添加几何图形文字的方法

伪对象选择器包含三种,分别为:

E::selection

E::after

E::before

其中before和after必须与content结合使用,如果content想用几何图形要加 \ 进行转义,content里面的内容相当于文字,可以通过color改变颜色,font-size改变大小

等等。

其书写方式为:

#E::before{    content:"\25C0";//获取的方法    color: rgba(254, 0, 0, 0.6);//可以改变它的颜色    font-size: 20px;//可以改变它的大小    position: relative;    left: -29px;//改变位置}
时间: 2024-08-01 22:44:05

css3 伪对象选择器添加几何图形文字的方法的相关文章

css的after伪对象选择器简单介绍

css的after伪对象选择器简单介绍:本章节将会介绍一下after伪对象选择器的用法,希望能够给需要的朋友带来一定的帮助.此选择器前面要加两个点:或者四个点::,两个点的时候是css2中的写法,在css3中规定是四个点,这是为了和伪类选择器进行区别,当然当前两个点也是适用的.语法结构: E:after{ Rules } E::after{ Rules } 此选择器能够设置元素内部结尾的一些结构内容 通常和content属性一起使用,关于content可以参阅CSS的content属性一章节. 

利用伪对象选择器E:after实现清除浮动效果

利用伪对象选择器E:after实现清除浮动效果:关于清除浮动已经是老生畅谈的问题,文章实在是太多了,几乎已经被谈烂了.这当然是因为浮动是不居中必须要用到的技巧,那么清除浮动自然也是必须的,但是本章节还是要啰嗦一下,再次介绍一下清除浮动的方法的一种,因为它会用到之前比较少见的伪对象选择器,希望能够引起大家的注意.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> &

CSS3伪类选择器详解

前面花了两节内容分别在<CSS3基本选择器>和<CSS3属性选择器详解>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择器的使用方法.

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){

css伪元素选择器(伪对象选择器)checked + 伪元素练习

伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CSS中轻松或者可靠检测到的某个元素的 状态或属性 : 伪元素表示DOM外部的某种 文档结构 . 伪类更多的是定义元素的状态,而伪元素则是改变文档结构,在结构外另加一个没有实际存在的元素(伪元素)常用伪元素: 1. E:before/E::before 2. E:after/E::after 1. E:

让 IE 8 及以下浏览器支持 CSS3伪类选择器

首先说明一下: 用IE9以下的用户,你们都是爸爸. 前言:当css3.0出现以后,出现了很多选择器,其中伪类选择器很好用,比如:nth-child,很容易判断并选择对象.让我们的工作变的更方便. 但有个麻烦,IE8及IE8以下对很多伪类选择器并不兼容. 这13个伪类选择器是比较长用到的: 会发现,IE9对这些伪类选择器都能兼容.IE8.IE7对 :first-child,:hover是兼容的,IE8对:focus是兼容的,而其他IE7,IE8并不兼容. IE 对css3的严重不支持, 这是让人无

CSS3 伪类选择器 :nth-child()

:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0开始计算*/ :nth-child(n*length)/*n的倍数选择,n从0开始算*/ :nth-child(n+length);/*选择大于length后面的元素*/ :nth-child(-n+length)/*选择小于length前面的元素*/ :nth-child(n*length+1);

CSS3伪类选择器

first-line   设置首行样式 first-letter 设置首字母样式 before  在某元素前插入内容并设置内容样式 after 在某元素后插入内容并设置内容样式 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> p:first-line{back

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)

<CSS3基本选择器> 一.通配符选择器(*) *{ marigin: 0; padding: 0; } 二.元素选择器(E) li {background-color: grey;color: orange;} 三.类选择器(.className) 四.id选择器(#ID) #first {background: lime;color: #000;} #last {background: #000;color: lime;} 五.后代选择器(E F) .demo li {color: blu