css3新增伪类

1,969 阅读2分钟

1、否定伪类选择器

div:not(div2)    //除div2之外的全部div

2、同一父元素下最后(第一)一个元素

//最后一个
li: last-child{
  color: red;
}
  //第一个
li: first-child{
  color: red;
}
//任意一个
li: nth-child(3){
  color: red;
}

3、父元素下只是一个子元素

span: only-child{
      color: red;  
}
---------------------
<p>
      <span>伪类</span>//只有这行变红
</p>

<p>
      <span>伪类1</span>
      <span>伪类2</span>
      <span>伪类3</span>
</p>

4、匹配空元素(没有子元素的元素)

div: empty{
    width: 30px;
    height: 30px;
    background-color: red;
}
--------------------------
<div></div>

5、UI元素状态伪类

:enable 选择可用表单元素

:disable 选择禁用表单元素

:checked 选择被选中的表单元素


:root  选择文档的根元素,等同于html元素

:target 选取活动的目标元素


:after 在元素内部最前添加内容

:before 在元素内部最后添加内容


p:nth-child(n)   选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n) ..............................................从最后一个子元素开始计数

p:nth-of-type(n)  选择其父元素的n个元素

p:nth-last-of-type(n) ........................从最后一个子元素开始计数


p:last-of-type 选择其父元素的最后的一个P元素

p:last-child 选择其父元素的最后子元素(一定是P才行)

p:first-of-type 选择其父元素的首个P元素

p:first-child 选择其父元素的首个p元素(一定是p才行)

p:only-child    选择其父元素的只有一个元素(而且这个元素只能是p元素,不能有其他元素)

p:only-of-type   选择其父元素的只有一个p元素(不能有第二个P元素,其他元素可以有)