Tailwind Pseudo Class

最新推荐文章于 2024-07-29 11:20:31 发布

JunChow520

最新推荐文章于 2024-07-29 11:20:31 发布

阅读量614

点赞数

本文链接：https://blog.csdn.net/JunChow520/article/details/106869433

版权

CSS伪类（pseudo-class）用来添加选择器的特殊效果，CSS伪类选择器会根据条件匹配组件，但不一定是由DOM树定义的。CSS伪类是添加到选择器上的关键字，用于为指定要选择的元素的特殊状态添加样式。

CSS伪类允许设置元素状态的样式，以及DOM树种现有但不能通过其他选择器作为目标的元素，而无需添加任何选择器。

CSS伪类选择器可以分为伪类（pseudo-class）和伪元素（pseudo-element）。CSS3为了区分pseudo-class和pseudo-elemnt，因此为pseudo-element添加了一个冒号:。

伪类pseudo-class：元素的状态选择器
伪元素pseudo-element：元素子级选择器

例如：链接a元素的伪类，支持链接在不同状态下以不同样式展示。

a:link{}
a:visited{}
a:hover{}
a:active{}

链接伪类	描述
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标划过链接
a:active	已选中的链接

例如：段落p的伪元素

:first-letter
:first-line

伪类和一般DOM元素样式不同之处在于，伪类并不改变DOM内容，只是插入修饰类的元素，修饰类元素对用户来说是可见的，但对DOM来说是不可见的。

伪类不是真正的元素，不要使用伪类去展示实际意义的内容，使用伪类显示修饰性内容或设计性内容，比如图标。
伪类对用户是可见的，但对DOM来说是不可见的。

伪类以冒号:开头

selector:pseudo-class{property: value;}

选择器:伪类{属性名：属性值}

伪类配置CSS类使用

selector.class:pseudo-class{property: value}

例如：

a:demo.visited{ color:#ff0000; }

W3C定义的伪类包括

伪类	描述
:active	向被激活元素添加样式
:focus	向拥有鼠标输入焦点的元素添加样式
:hover	当鼠标悬停在元素上方时，先元素添加样式

Tailwind伪类变量

Tailwind伪类变量类似于响应式设计处理，在鼠标悬停、焦点等位置设置元素的样式可通过在工具类前添加对应的伪类来实现。

例如：https://codepen.io/junchow/pen/YzwNree?editors=1000

<div class="container mx-auto my-12 p-12 bg-gray-100">
  <form action="" class="w-full max-w-sm mx-auto flex flex-col">
    <div class="flex items-center">
      <input class="flex-1 px-4 py-2 w-full bg-gray-200 focus:bg-white hover:bg-white border border-transparent focus:border-gray-300 hover:border border-gray-300 rounded focus:outline appearance focus:shadow-outline appearance-none leading-tight text-gray-900"/>
      <button class="flex-shrink-0 ml-4 px-4 py-2 bg-teal-500 hover:bg-teal-600 rounded focus:outline-none focus:shadow-outline text-white font-bold">确定</button>
    </div>
  </form>
</div>