全部伪类和使用

1.动态伪类

:link 未访问的链接

:visited 已经访问的链接

:hover 鼠标停留时候链接

:active 激活链接时候

:focus 指当前拥有输入焦点的元素,因为a元素可以被tab键选中聚焦,所以focus也适用a元素。
如果不想元素被选中可以tabindex调整tab选中的顺序

 <a tabindex="-1" href="">案件</a>

使用注意:
:hover必须放到:link和:visited后才能生效,:active必须放到:hover后才能生效。其中:hover,:active可以用在其他元素上

2.目标伪类

:target 用于a链接锚点,可修改锚点的样式

3.语言伪类

:lang,用于设置语言种类

4.元素伪类

给元素添加状态

:checkde

:enabled

:disabled

<button disabled>按钮</button>

按钮是不可选择状态,如果不设置则默认是enabled

5.结构伪类:

可以在前面加类名表示这个类的子元素,如有class名为z1,就可以设置z1的子元素伪类:

z1 :nth-child(1) ,z1 p:nth-of-type(2)

:nth-child,p:nth-child(1),:nth-last-child

:nth-child(1)表示父元素中的第一个子元素,1代表的数字就是第几个子元素。如:nth-child(2n)其中n表示为整数

p:nth-child(1)表示父元素中的第一个子元素且这个子元素要是p元素,如果第一个元素不是p元素则对应的样式不生效

:nth-last-child表示倒数,如:nth-last-child(1)就表示倒数第一个子元素

:nth-of-type()、:nth-last-of-type()

:nth-of-type(2)表示每个类型子元素的第二个变化
p:nth-of-type(1),type表示指定类型,此就指向子元素中的第一个p元素,不管父元素的第一个子元素是什么,只找p元素

p:nth-last-child(1)指向子元素中的倒数第一个p元素,p可以替换成其他元素,1表示的是第几个p元素

:first-child、:last-child、:first-of-type、:last-of-type

:first-child类似于:nth-child(1)表示第一个子类,:last-child类似:nth-last-child(1)表示最后的子元素,:first-of-type类似:nth-of-type(1),:last-of-type类似:nth-last-of-type(1)

:root、:only-child、:only-of-type、:empty

:root,根元素,也是html元素表示选中html元素

:only-child,是父元素中的唯一子元素

:only-of-type,是父元素中唯一这种类型的子元素

:empty,元素内容是空的如单纯的

<p></p>

6.否定伪类

:not

:not的格式是:not(x),x是一个简单的选择器,它可以是一个元素选择器,类选择器,属性选择器等(除否定伪类),但是他不支持组合。如:not(div,p)

body :not(div),表示body子元素中不是div的元素进行变化。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PostCSS 插件有很多,以下是 PostCSS 官方网站上列出的所有插件及其作用: 1. PostCSS-import:使用 @import 导入外部 CSS 文件。 2. PostCSS-mixins:类似于 Sass 的 Mixin。 3. PostCSS-nested:允许使用嵌套规则。 4. PostCSS-simple-vars:使用自定义变量,类似于 Sass 的变量。 5. PostCSS-math:进行数学计算。 6. PostCSS-color-function:使用颜色函数。 7. PostCSS-calc:使用 calc 函数。 8. PostCSS-extend:使用类似于 Sass 的 @extend。 9. PostCSS-for:使用类似于 Sass 的 @for。 10. PostCSS-each:使用类似于 Sass 的 @each。 11. PostCSS-conditionals:使用类似于 Sass 的 @if 和 @else。 12. PostCSS-nth-child-fix:支持伪类选择器 :nth-child。 13. PostCSS-modules:将 CSS 类名转换成哈希值,避免类名冲突。 14. PostCSS-pxtorem:将像素值转换成 rem 值,使得页面更好地适配不同大小的设备。 15. PostCSS-zindex:自动计算 z-index 值。 16. PostCSS-font-magician:自动引入相应的字体文件。 17. PostCSS-will-change:为元素添加 will-change 属性。 18. PostCSS-apply:使用类似于 CSS 变量的 @apply。 19. PostCSS-csso:代码压缩优化。 20. PostCSS-discard-comments:去除注释。 21. PostCSS-discard-duplicates:去除重复的样式。 22. PostCSS-discard-empty:去除空的样式。 23. PostCSS-discard-overridden:去除被覆盖的样式。 24. PostCSS-merge-longhand:合并长手写属性。 25. PostCSS-merge-rules:合并相同的规则。 26. PostCSS-minify-font-values:压缩字体值。 27. PostCSS-minify-gradients:压缩渐变值。 28. PostCSS-minify-params:压缩参数值。 29. PostCSS-minify-selectors:压缩选择器。 30. PostCSS-normalize-charset:添加 @charset 规则。 31. PostCSS-normalize-display-values:标准化 display 属性值。 32. PostCSS-normalize-positions:标准化定位属性值。 33. PostCSS-normalize-repeat-style:标准化背景重复和背景平铺属性值。 34. PostCSS-normalize-string:标准化字符串。 35. PostCSS-normalize-timing-functions:标准化缓动函数。 36. PostCSS-normalize-unicode:标准化 Unicode 字符。 37. PostCSS-normalize-url:标准化 URL。 38. PostCSS-normalize-whitespace:标准化空白。 39. PostCSS-ordered-values:按字母顺序排列属性值。 40. PostCSS-reduce-idents:缩短标识符,如类名、id 等。 41. PostCSS-reduce-initial:缩短初始值。 42. PostCSS-reduce-transforms:合并 transform 属性。 43. PostCSS-unique-selectors:去除重复的选择器。 44. PostCSS-pseudo-class-any-link:添加 :any-link 伪类。 45. PostCSS-pseudo-class-first:添加 :first-match 和 :nth-match 伪类。 46. PostCSS-pseudo-class-focus-within:添加 :focus-within 伪类。 47. PostCSS-pseudo-class-last:添加 :last-match 伪类。 48. PostCSS-pseudo-class-matches:添加 :matches 伪类。 49. PostCSS-pseudo-class-not:添加 :not 伪类。 50. PostCSS-pseudo-class-placeholder:添加 ::placeholder 伪类。 51. PostCSS-pseudo-element-any-link:添加 ::any-link 伪元素。 52. PostCSS-pseudo-element-content-insert:添加 ::before 和 ::after 伪元素。 53. PostCSS-pseudo-element-custom-properties:添加 ::part 和 ::theme 伪元素。 54. PostCSS-pseudo-element-dir:添加 ::dir 伪元素。 55. PostCSS-pseudo-element-file-selector-button:添加 ::file-selector-button 伪元素。 56. PostCSS-pseudo-element-fullscreen:添加 ::fullscreen 伪元素。 57. PostCSS-pseudo-element-placeholder-shown:添加 ::placeholder-shown 伪元素。 58. PostCSS-pseudo-element-range-thumb:添加 ::range-thumb 伪元素。 59. PostCSS-pseudo-element-scrollbar:添加 ::scrollbar 伪元素。 60. PostCSS-pseudo-element-scrollbar-button:添加 ::scrollbar-button 伪元素。 61. PostCSS-pseudo-element-scrollbar-track:添加 ::scrollbar-track 伪元素。 62. PostCSS-pseudo-element-scrollbar-track-piece:添加 ::scrollbar-track-piece 伪元素。 63. PostCSS-pseudo-element-slotted:添加 ::slotted 伪元素。 当然,还有很多其他的 PostCSS 插件,可以根据自己的需要来选择和使用

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值