网站首页 > 技术文章正文

css伪类选择器应该怎样用(中)

hmc789 2024-11-26 03:43:14 技术文章 3 ℃

接上篇css伪类选择器应该怎样用（上）继续整理css选择器。

由于我是将伪类及伪元素一起整理，其中没有去区分，重点写的也是如何使用，所以今天想起来就将伪类与伪元素区别也写一下，以防止进入误区。

伪类与伪元素定义基本一致，都是特殊状态下加样式，伪类是向存在的某个元素加样式，而伪元素是虚拟一个元素加样式。声明的时候伪元素是两个冒号“：”，伪类是一个冒号。before 和 after就是经常经常使用的伪元素。

一、:only-of-type 和 :only-child

(1)、:only-of-type

:only-of-type 匹配属于同类型中唯一的同级元素。

(2)、:only-child

:only-child 匹配属于父元素中唯一子元素的元素。

实例：

 <div>
 <p>only-of-type和only-child样式，两个都生效，由于only-child在下面，所以覆盖了绿色 </p>
 </div>
 <div>
 <p>only-child</p>
 <ul>
 <li>1</li>
 <li>2</li>
 </ul>
 </div>
 <style>
 p:only-of-type{
 background:green;
 }
 p:only-child{
 background:red;
 }
 </style>

二、:not

not选择器是用于匹配非指定元素或选择器的每个元素，即取反，可以选择指定元素外的所有元素。

实例：

 <div>我不想被选择</div>
 <p>我想被选择</p>
 <a href="">我想被选择</a>
 <div>我不想被选择</div>
 <h1>我想被选择</h1>
 <style>
 div{color: red;}
 *:not(div){
 background:#000;
 color: chartreuse;
 }
 </style>

除了div外，已经改变了其他标签样式，包括body还有html标签。所以用not选择器做全选比较好使。

三、:empty

匹配没有子元素的每个元素，包括文本节点。就相当于有个标签，其中没有内容。具体效果如下：

四、:selection

匹配元素中被用户选择或处于高亮状态的部分，并只能作用少数css属性。并且他就是上方提到过的伪元素之一。

五、:first-line

用于选择指定选择器的第一行。主要适用于块级元素中，可使用css元素也是有限:font,color,backgroud,word-spacing,letter-spacing,text-decoration,vertical-align,line-height,clear,text-transform.

上图为演示的p段落中的首行高亮。

六、:first-letter

:first-letter 选择器用于选取指定选择器的首字母。和first-line差不多，一样适用于块级元素，也是有限属性：font,color,backgroung,margin,padding,border,line-height,float,clear,vertical-align,text-decoration,text-transform

上图为演示的p段落中的首字母高亮。

七、:root

匹配文档根元素。:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

所以对全局声明有很大作用。一般用的较少。

八、:lang

:lang 选择器用于选择带有以指定值开始的 lang 属性的元素。

 p:lang(en){
 background:yellow;
 }

<p lang="en">toutiao</p>
<p lang="cn">头条</p>

设置en的lang被选择。

九、:checked

匹配input,仅适用于单选按钮和复选框。为了演示清晰，改了下input样式

可以看到背景颜色checked选中的，背景变为红色。

<div class="content">
 <input type="checkbox">未选中<br>
 <input type="checkbox" checked>选中变色<br>
 <input type="radio">未选中<br>
 <input type="radio" checked>选中变色<br>
</div>
 <style>
 input{ 
 -webkit-appearance:none; 
 appearance:none;
 width:20px; 
 height:20px; 
 background: #999;
 border:1px solid #999; 
 border-radius: 30px;
 outline: none; 
 }
 input:checked{
 background:red;
 }
 </style>

上一篇：那些常用却又常忘记的css样式
下一篇：用三角函数sin和cos画模拟雷达示意图的html代码解析

网站首页 > 技术文章 正文