伪类简说

状态类

x:active 按住时

x:focus 焦点集中时

x:hover 鼠标悬停时

x:link  链接未访问之前

x:visited 链接访问之后

优先顺序应为:Link--visited--hover--active

x:lang(xx) 选择属性是lang="xx" x元素

x:not(y) 选择不含y的x元素(适用于样式复杂多变)

x:root 选择x的根元素 通常是html元素(也就是说没有x 一般都会是文档的根元素即<html>)

x:first-child 选择父元素的第一个子元素并且是x的元素

x:last-child 选择父元素的最后一个子元素并且是x的元素

x:only-child 选择父元素的唯一一个子元素并且是x的元素

x:nth-child(n) 选择父元素的第n元素并且是x的元素

x:nth-last-child(n) 选择父元素的倒数第n个元素并且是x的元素

x:first-of-type 选择同辈元素中的第一个x元素

x:last-of-type  选择同辈元素中的最后一个x元素

x:only-of-type 选择同辈元素中的唯一一个x元素

x:nth-of-type(n)  选择同辈元素中的第n个x元素

x:nth-last-of-type(n)选择同辈元素中的倒数第n个x元素

x:empty 选择没有子元素的x元素(包括内容有文本)

x:checked 选择按钮处于被选中状态的元素x(适用于input的type是radio和checkbox)

x:enabled 选中可用元素x(适用于input)

x:disabled 选择禁用的元素x(适用于input)

x:target 选择url指向的x元素(就是锚记  如果没有x 就指向哪里选哪里 不限制元素)

时间: 2024-10-17 18:42:59

伪类简说的相关文章

&lt;a&gt;链接的四个伪类顺序

摘自: http://www.cnblogs.com/xiayi/p/5350423.html <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类,但它确实作为一个类来使用.(这些类确实存在,浏览器在后台会向这些类增加和删除元素) 我在看<CSS设计指南>时,它说到四个伪类的书写顺序一定要正确,否则浏览器可能不会显示预期的结果. 也即这样写: a:

虎记:强大的nth-child(n)伪类选择器玩法

转载前端小哥:https://www.cnblogs.com/hu-w/p/5289668.html 写在前面的戏: 最近参加了度娘前端IFE的春季班,刷任务,百度真是有营销头脑,让咱们这帮未来的技术狂人为他到处打广告(我可不去哪),其中做的几个任务中有几个以前没有用到的东西, 也算是有些许收获(现在做了一半任务哦,萌萌哒),今天就来捋一捋css强大的nth-child(n)选择器功能(以庆祝博客粉丝突破YI员,访问量突破一百大关,可喜可贺,荣登博客名人指日可待!!) (常规选择器的YY) 这里

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

CSS3伪类实现动画旋转效果

一个简单的动画效果demo,keyframes为关键帧,图片贴在代码下方.利用了伪类实现css3动画效果,初学者可以看一下,恩.<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="D

CSS3特殊伪类::selection改变页面选中文字的样式

一般在网页上面,选中文字的时候,文字的样式是会改变的,当然,样式也都是千篇一律的浏览器的默认样式,蓝底白字,偶然看到有些网页上面当文字选中的时候会有不一样的样式,当时就很是好奇,后来才慢慢发现是css的一个伪类::selection ::selection是一个CSS3选择器(这也告诉这我们CSS3必须要去熟悉,这玩意确实可以弄出很多意想不到的好效果.) 兼容性:IE9+,Chrome,Opera,Safari,Firefox…(也可以去查看)caniuse.com#search=::selec

CSS中的伪类和伪元素

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

关于css伪类的一些兼容性测试

测试环境:xp ,ie7~8  chrome. link 伪类 :(:link,:visited)  这个是链接专用 动态伪类 :(:hover,:active,:focus) <!DOCTYPE html> <html> <head></head> <style type="text/css"> a:link,input:hover{color:blue;} a:visited{color:green;} a:active{

CSS3 选择器——伪类选择器

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

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>