用CSS伪类制作一个不断旋转的八卦图？

前言介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图代码如下: HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="yinyang"></div> </bod…

在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) 例如: .next:after{ content: ""; width: 6px; height: 6px; border-left: 1px solid #666; border-bottom: 1px solid #666; transform: rotate(225deg); -w…

CSS-用伪类制作小箭头（轮播图的左右切换btn）

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e…

css伪类制作三角箭头

CSS 伪类

Link The :link CSS pseudo-class lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In orde…

CSS伪类整理笔记

0 伪元素虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别).当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号:: 一个选择器一般来说只能使用一个伪元素,并且伪元素必须处于选择器语句的最后. 常见的伪元素有以下几种: ::after ::before ::first-letter ::…

CSS伪类before，after制作左右横线中间文字效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width: 1000px; margin: 10px auto; border: 1px solid red; } h3.title { color: #F2AE11; fon…

12、第十二节课，css伪类（转）

一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5.名称[表达式] 5.1 E[att] 匹配所有具有att属性的E元素([att]获取所有的定义了att的标签:E[att=val] 匹配所有att属性等于“val”的E元素: 5.2 [att=val] 获取所有定义了att属性并且属性值等于val的标签: 5.3 [att^=val]获取所有定义了att…

巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义. 先上效果图正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript.为了吸引各位往下看,先上实际例子,再进行剖析. Duang~ 实际例子其…

巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能--就如同:hover 一样你可以做一些样式定义. 先上效果图正如标题所说,本文是教你如何巧用CSS3:target伪类制作Dropdown下拉菜单,原生HTM…

CSS伪类和伪元素

一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦点的元素增加样式 :hover:当鼠标悬浮在元素上方时,向元素增加样式 :link:向未被访问的链接增加样式 :visited:向已被访问的链接增加样式 :first-child:向元素的第一个子元素增加样式 :lang:向带有指定lang属性的元素增加样式 CSS3中的伪类(注意CSS3级…

CSS 伪类 (Pseudo-classes)

CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. 超链接 - :focus 的使用本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作). :first-child(首个子对象) 本例演示 :first-child 伪类的用法. :lang(语言) 本例演示 :lang 伪类的用法. 语法伪类的语法: selector : ps…

CSS伪类与CSS伪元素的区别及由来

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:"这两个是不同的",也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准…

深入理解CSS伪类

× 目录 [1]锚点 [2]UI元素 [3]结构伪类[4]其他前面的话伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到.实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示.本文将详细介绍伪类的详细知识锚点关于锚点<a>,有常见的5个伪类,分别是:link,:hover,:active,:focus,:visited a:link{background-color:pink;}/*…

应用越来越广泛的css伪类

说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码量.开发网页代码的效率也极大提高,今天我就跟大家分享一下学习css伪类的一些小经验. 对于开始接触css的朋友来说,在看其他人的代码的时候会经常看到 :hover,:foucs,:before,:after等相关代码,其实这些就是css伪类代码.简单来说应用css伪类就是增加了一个块. 接下来我们看…

(五)CSS伪类(Pseudo-class)

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} /* 鼠标移动…

关于CSS伪类选择器

#CSS伪类选择器 ##使用css伪类选择器需要注意的使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始读取的,也就是说,类似 p:first-child 这样的伪类选择器,指的是“某元素的以p元素作为第一子项的那项”,而不是“p元素的第一个子项”. 原因是因为,其实这里在p:之前,省略了 xxx & nbsp; 这几个字符,导致很容易产生误解. e.g. div p:first-child{colo…

【从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 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正了我的错误,所以今天打算好好研究下两者的区别.首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 css 无法描述的东西. 伪类种…

理解css伪类和伪元素

伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果伪类 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接添加样式. :visited 向已被访问的链接添加样式. :first-child 向元素的第一个子元素添加样式. :lang 向带有指定 lang 属性的元素添加样式. 伪元素 :first-let…

深入学习css伪类和伪元素及其用法

前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义伪类用于在页面中的元素处于某个状态时,为其添加指定的样式. 伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中,我们可以为其添加样式. [重点]最常规的区分伪类和伪元素的方法是:实现伪类的效果可以通过添加类来实现,但是想要实现伪元素的等价效果只能创建实际的DOM节点. 注意伪类使用单冒号 ":&q…

js动态改变css伪类样式

首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').click(function(){ var index = $(this).index(); var offset = 11; // 左侧偏移 11像素 var imgWidth = 240; // 图片的宽度是240 var pos = 0; // 因此第一个tab项的居中位置就是 240/2 + 1…

CSS 伪类 (Pseudo-classes)实例

CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态. a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000F…

谈谈css伪类与伪元素

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. 在这里也许有不少人都见过:before,::before这样的写法,估计有些人很纳闷,这两者有什么区别吗? 有疑问,那我们就先把疑问解决了先,不要把疑问留着.其实:before,::before这两种写法都是等效,只是:befor是CSS2的写法,::before是CSS3的写法.双冒号(::)这是CSS3…

HTML转义字符 Unicode和CSS伪类介绍

CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ p:first-child {font-weight: bold;} /* 伪类来选择元素的第一个子元素 */ a:focus {color:…

【从0到1学Web前端】CSS伪类和伪元素分类： HTML+CSS 2015-06-02 22:29 1065人阅读评论(0) 收藏

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 - 伪类和伪元素的区别

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

CSS 伪类和伪元素--pseudo

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

超链接标签的CSS伪类link,visited,hover,active

CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有:link,:visited,:hover,:active,而且需要按照这个顺序设置,有个简单的记法是,取首字母组成 love hate,记住“爱恨”就行了. 1, 查看超链接a标签的默认样式新建一个网页a.html,复制下面的内容: <html> <head> </head&…

转贴：CSS伪类与CSS伪元素的区别及由来具体说明

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:“这两个是不同的”,也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章…