css3新增伪类有哪些(2019惠普面试)

2019-07-27  本文已影响0人  希染丶

1.否定选择

div:not(.div2){
  color: red;
}

2.同一父级下序列选择

li: fitst-child{}
li: last-child{}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

3.only-child 父级下只有一个子元素

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

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

4.空元素 :empty

div:empty
<div></div>

5.表单元素伪类

input: checked{
  color: red;
}
----------------------------
<input type="radio" name="" checked="checked"></input>
---------------------------
input: disable{
  color: red;
}
---------------------------
<input type="text" name="" disabled="disabled"></input>

6.扩展

input disabled和readonly区别
disabled变为不可用,表单元素变灰,操作无反应;
适用于所有表单元素input,radio,select,checkbox,button
readonly只适用于可输入表单,input,textarea,变为不可输入和修改,但是正常提交value

上一篇 下一篇

猜你喜欢

热点阅读