博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3学习手记(2) 伪类选择器
阅读量:6160 次
发布时间:2019-06-21

本文共 1782 字,大约阅读时间需要 5 分钟。

 

伪类选择器

  • 动态伪类
  • UI元素状态伪类
  • CSS3结构类
  • 否定选择器
  • 伪元素

 

动态伪类

这些伪类并不存在于HTM中,只有当用户和网站交互的时候才能体现出来

  • 锚点伪类 :link  :visited
  • 用户行为伪类 :hover :active :focus(获取鼠标焦点)

 

UI元素状态伪类(CSS3新增)

我们把:enabled,:disabled,:check伪类称为UI元素状态伪类 兼容IE9以上  check只兼容OPera

            

 

 

CSS3结构类(nth选择器)

选择方法

  • first-child  选择属于其父元素的首个子元素的每个Element元素,并为其设置样式  兼容IE8以上
  • last-child   指定属于父元素的最后一个子元素的Element元素样式  兼容IE8以上
  • nth-child(n)  匹配属于其父元素的第N个子元素,不论元素的类型 兼容IE9以上   (关于参数n  n是一个简单的表达式,取值从0开始,这里只能是n,不能使用其他字符 odd(奇数) even(偶数
  • nth-last-child(n)  匹配属于其父元素的第N个子元素,不论元素的类型,从最后一个子元素开始计数  兼容IE9以上   
  • nth-of-type(N)  选择器匹配属于父元素的特定类型的第N个子元素的每个元素  兼容IE9以上
            
0-1
1-1
2-1
3-1
0-2
0-3
2-1
2-2
2-3

  • nth-last-of-type(N)   选择器匹配属于父元素的特定类型的第N个子元素的每个元素 从最后一个元素开始匹配  兼容IE9以上
  • first-of-type  选择器匹配属于其父元素特定类型的首个子元素的每个元素 兼容IE9以上
  • last-of-type  选择器匹配属于其父元素特定类型的最后一个子元素的每个元素 兼容IE9以上
  • only-child     选择器匹配属于其父元素唯一子元素的每个元素  兼容IE9以上
  • only-of-type  择器匹配属于父元素的特定类型的唯一子元素的每个元素  兼容IE9以上
  • empty  选择器匹配没有子元素(包括文本节点)的每个元素  兼容IE9
            
second
Third

否定选择器(not)

:not(Element/selector)选择器匹配非指定元素/选择器的每个元素

语法格式

父元素:not(子元素/子选择器)   兼容IE9

            

 

            

 

转载于:https://www.cnblogs.com/zry2510/p/7080360.html

你可能感兴趣的文章
6.13心得
查看>>
Runtime类
查看>>
eclipse decompiler
查看>>
记一个搜索网盘资源的网站
查看>>
jdk1.7和jdk1.8的String的getByte方法的差异
查看>>
java父子进程通信
查看>>
Android ADB server didn't ACK * failed to start daemon * 简单有效的解决方案
查看>>
Olap学习笔记
查看>>
Codeforces Round #431 (Div. 1)
查看>>
如何进行数组去重
查看>>
将标题空格替换为 '_' , 并自动复制到剪切板上
查看>>
List Collections sort
查看>>
Mysql -- You can't specify target table 'address' for update in FROM clause
查看>>
使用局部标准差实现图像的局部对比度增强算法。
查看>>
2017-2018-1 20165313 《信息安全系统设计基础》第八周学习总结
查看>>
《代码敲不队》第四次作业:项目需求调研与分析
查看>>
菜鸡互啄队—— 团队合作
查看>>
HttpWebRequest的GetResponse或GetRequestStream偶尔超时 + 总结各种超时死掉的可能和相应的解决办法...
查看>>
SparseArray
查看>>
第二章
查看>>