美文网首页前端开发那些事儿
一篇搞清CSS3新增选择符

一篇搞清CSS3新增选择符

作者: 深度剖析JavaScript | 来源:发表于2020-08-23 10:26 被阅读0次

CSS3新增的选择符其实就是在CSS2选择符的基础上增加了一些,大的种类没变。具体新增如下

  1. 关系选择符新增:

E + F
E ~ F

  1. 属性选择符新增:

E[attr ~="val"] E[attr |="val"] E[attr ^="val"]
E[attr $="val"] E[attr *="val"]

  1. 伪元素选择符新增

E::placeholder
E::selection

  1. 伪类选择器新增

E:not(s) :root E:target
E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n)
E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-of-last-type(n)
E:empty E:checked
E:enabled E:disabled
E:read-only E:read-write

以上就是CSS3新增的选择符,可以看到就是在关系选择符、属性选择符、伪类和伪元素中增加了一些,想想也是,在大类不新增的情况下,确实只能在这几个地方新增,它不可能在id选择器、标签选择器、通配符选择器、类选择器等上新增吧。

下面一个一个详细讲讲:

  1. E + F 表示下一个满足条件的兄弟元素节点
<head>
  <style>
    div + span{
      color: #f00;
    }
  </style>
</head>
<body>
  <div>div</div>  
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
</body>
结果

注意:选择的是紧挨着的元素,如果上述例子div下面放一个p元素,则会无法选择到span。

  1. E ~ F 表示满足条件的下一些兄弟元素节点
<head>
  <style>
    div ~ span {
      color: #f00;
    }
  </style>
</head>
<body>
  <span>span</span>
  <div>div</div>
  <span>span0</span>
  <p>p</p>
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
</body>
结果

注意:只会选中其后面的兄弟元素节点,即只能选中弟弟们,哥哥们是选不到的。

  1. E[attr ~="val"] 表示属性名为attr,属性值包含一个独立的val的元素
 <style>
    span[class~='a'] {
      color: #f00;
    }
  </style>
</head>
<body>
  <span class="a">span0</span>
  <span class="b">span1</span>
  <span class="a b">span2</span>
  <span class="aaa bbb">span3</span>
</body>
结果

注意:表示的属性值必须是独立的,如果上例中class="ab"是选中不了。

  1. E[attr |="val"] 表示属性名为attr,属性值以val开头或者以val-开头的元素
<head>
  <style>
    span[class|='a'] {
      color: #f00;
    }
  </style>
</head>
<body>
  <span class="a">span0</span>
  <span class="a-test">span1</span>
  <span class="b-test">span2</span>
  <span class="ab-test">span3</span>
</body>
结果

注意:以什么开头或者以什么加-开头都行

  1. E[attr ^="val"] 表示属性名为attr ,属性值以val开头的元素
<head>
  <style>
    span[class^='a'] {
      color: #f00;
    }
  </style>
</head>
<body>
  <span class="a">span0</span>
  <span class="a-test">span1</span>
  <span class="b-test">span2</span>
  <span class="ab-test">span3</span>
</body>
结果
  1. E[attr $="val"] 表示属性名为attr,属性值以val结尾的元素
<head>
  <style>
    span[class$='test'] {
      color: #f00;
    }
  </style>
</head>
<body>
  <span class="a">span0</span>
  <span class="a-test">span1</span>
  <span class="b-test">span2</span>
  <span class="ab-test">span3</span>
</body>
结果
  1. E[attr *="val"] 表示attr属性的属性值中包含val的元素
<head>
  <style>
    span[class*='t'] {
      color: #f00;
    }
  </style>
</head>
<body>
  <span class="a">span0</span>
  <span class="a-test">span1</span>
  <span class="b-test">span2</span>
  <span class="ab-test">span3</span>
</body>
结果

注意:整个属性值中,只要在任意一个地方包含即可。

再往下是伪类和伪元素新增的了
这里简单简单说一下伪元素和伪类,好多人比较容易搞混:
伪类表示的是被选择元素的某种状态
伪元素表示的是被选择元素的某个部分

8. 伪元素:E::placeholder 表示被选择元素的占位符

<head>
 <style>
   input::-webkit-input-placeholder {
     color: #999;
   }
   input:-ms-input-placeholder {
     /* IE10+ */
     color: #999;
   }
   input:-moz-placeholder {
     /*Firefox4-18 */
     color: #999;
   }
   input::-moz-placeholder {
     /* Firefox19+ */
     color: #999;
   }
 </style>
</head>

<body>
 <input type="text" placeholder="占位符" />
</body>

一般::placeholde选中的是input元素中的占位符部分,设置占位符的样式

9. E::selection 表示元素被选择的部分,设置该部分的样式

<head>
  <style>
    span::selection{
      color: #f00;
      background-color: antiquewhite;
    }
  </style>
</head>
<body>
  <span class="a">span0</span>
  <span class="a-test">span1</span>
  <span class="b-test">span2</span>
  <span class="ab-test">span3</span>
</body>
鼠标选中结果样式改变

下面是C3新增的伪类

  1. E:not(s) 表示选择的元素中不包含某些元素的元素,剔除一些不满足条件的元素
<head>
  <style>
    span:not([class="a"]){
      color: #f00;      
    }
  </style>
</head>
<body>
  <span class="a">span0</span>
  <span class="b">span1</span>
  <span class="c">span2</span>
  <span class="d">span3</span>
</body>
结果
  1. :root 表示根标签,在html文档中表示html标签,在xml标签xml的根标签
<head>
  <style>
    :root,body{
      background-color: #f00; 
      height: 100%;     
    }
  </style>
</head>
<body>
  <span class="a">span0</span>
  <span class="b">span1</span>
  <span class="c">span2</span>
  <span class="d">span3</span>
</body>
结果

设置根标签的高度100%,会把文档的视口高度继承下来

  1. E:target 表示选择元素中,被a标签锚点标记的元素
<head>
  <style>      
    div:target{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <a href="#test">点我</a>  
  <div id="test"></div>
</body>
点击之后显示被a标签的herf标记的元素
  1. E:first-child表示是别人的第一个孩子
<head>
  <style>      
    span:first-child{
      color: #f40;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div>
    <p>p</p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>
结果

注意:选中的元素必须是别人的大儿子,会受到其他类型元素的影响。如上例中,第二个div下的大儿子是p,所以用span:first-child选不到,因为这里是二儿子了。

  1. E:last-child 表示选中元素是别人的最后一个孩子
<head>
  <style>      
    span:last-child{
      color: #f40;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div>      
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <p>p</p>
  </div>
</body>
结果

:last-child必须也是别人的最后一个孩子,会受到其他元素类型的影响,如果其后面还有别的类型的元素,那也不能选到。

  1. E:only-child 表示被选中元素是别人的独生子,有别类型的元素也不行
<head>
  <style>      
    span:only-child{
      color: #f40;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div>
    <span>1</span>
    <i>i tag</i>
  </div>
  <div>      
    <span>1</span>
  </div>
</body>
结果
  1. E:nth-child(n) 表示选中元素是别人的第几个孩子,n从1开始算,但是作为表达式是从0开始算,也会受到其他类型的兄弟元素的影响
<head>
  <style>      
    p:nth-child(2n+1){
      color: #f40;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
  <div>
    <span>span</span>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
</body>
结果
  1. E:nth-last-child(n) 跟:nth-child(n)类似,这里表示的是被选中元素是别人的倒数第几个孩子
<head>
  <style>      
    span:nth-last-child(1){
      color: #f40;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div>    
    <p>1</p>
    <p>2</p>
    <span>span</span>
  </div>
</body>
结果

如果倒数第几个不是该类型的元素则无法选中。

上面5个方法E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n)会受到其他类型的元素的影响。这不太好,下面对应有5个方法,不受其他类型元素的影响的伪类,会更加好用点。

  1. E:first-of-type 表示选中元素中是别人的第一个该类型的大儿子,即匹配父元素下第一个类型为E的子元素
<head>
  <style>      
    p:first-of-type{
      color: #f40;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div>        
    <span>span</span>
    <p>pppp</p>
  </div>
</body>
结果

不受其他类型元素的影响,相当于在这个类型元素下找第几个。下面几个类似

  1. E:last-of-type 表示选中父元素下的所有E子元素中的倒数第一个。
  2. E:only-of-type 表示选中父元素的所有子元素中唯一的那个子元素E。
  3. E:nth-of-type(n) 表示选中父元素的所有E子元素中的第几个E元素
  4. E:nth-of-last-type(n) 表示选中父元素的所有E子元素中的倒数第几个E元素
  5. E:empty 表示选中的元素里面的内容为空,或者内容只有comment节点的元素;注意这里不管是否有属性节点
<head>
  <style>      
    p:empty{
      width:100px;
      height: 14px;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <p></p>
  <p><!-- 这里有comment节点 --></p>
  <p>有内容的p</p>
  <p class="have-attr-p"></p>
</body>
结果
  1. E:checked 表示被选中状态的E元素,例如单选框和复选框
  2. E:enabled 表示选中元素中可以正常使用的元素
  3. E:disabled 表示选中元素中被禁用的元素
  4. E:read-only 表示选中元素中设置了readonly="readonly"的元素
  5. E:read-write 表示选中的E元素中,可读可写的元素

相关文章

  • 一篇搞清CSS3新增选择符

    CSS3新增的选择符其实就是在CSS2选择符的基础上增加了一些,大的种类没变。具体新增如下 关系选择符新增: E ...

  • 前端面试题总结【8】:CSS面试必问点!

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? CSS 选择符:1.id选...

  • CSS3 :not() 制作最后一行li不添加边框

    来源:http://itssh.cn/post/925.html CSS3新增的:not()伪类选择符,匹配不含有...

  • 其他试题6~10

    6、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? 7、列出display...

  • 一篇搞清CSS3边框新增的属性

    CSS3在边框上新增了一些属性,一起来看一下 阴影类型:包括内阴影和外阴影,默认是外阴影,可以设置inset即可表...

  • css学习 第四天

    CSS组合选择符 CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器...

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

  • css组合选择符

    组合选择符说明了两个选择器之间的关系CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方...

  • Hack、过渡与变形(变换)

    条件Hack 图片的修复 属性 选择符 CSS3过渡动画 css3圆角 阴影 透明度 运动曲线 图片文字遮罩 变形...

  • 关于H5(1)

    H5基础都有哪些: H5有用的标签: 新增标签 *表单 *js新增功能 css3选择器: *css3新增的样式 浏...

网友评论

    本文标题:一篇搞清CSS3新增选择符

    本文链接:https://www.haomeiwen.com/subject/yiqpjktx.html