css伪类选择器应该怎样用（中）
接上篇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>
发表评论 取消回复