CSS3选择符

最新推荐文章于 2021-11-23 10:20:59 发布

weixin_45846263

最新推荐文章于 2021-11-23 10:20:59 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/weixin_45846263/article/details/105610932

版权

CSS3选择符

在css中除了我们知道的元素选择符，还新增了一些选择符下面就来说说这些选择符。
很多选择符不仅仅是CSS里面可以用，js中也是可以用。

关系选择符

兄弟选择符(E~F)
选择符合条件的所有兄弟元素
相邻选择符(E+F)
选择紧贴在E元素之后F元素，元素E与F必须同属一个父级，只能向后找。
在这里插入图片描述

属性选择器

=全等，~=约等，^=开头，$=结尾，*=含有，|=特别

在这里插入图片描述

伪类选择器

结构伪类：　
:nth-child(n)正数
:nth-last-child(n) 倒数
匹配属于其父元素中第n个子元素子元素相对整洁（没有其他的标签乱入）其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
可以写隔行换色表格效果

<html>
 <head>
<style type="text/css">
.listD li:nth-child(3n+1) {
      background-color: plum;
     }
   
     .listD li:nth-child(3n+2) {
      background-color:lightblue;
     }
   
     .listD li:nth-child(3n+3) {
      background-color: pink;
     }
  </style>
 </head>
 <body>
  <ul class="listD">
          <li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          <li>列表项4</li>
          <li>列表项5</li>
          <li>列表项6</li>
          <li>列表项7</li>
          <li>列表项8</li>
          <li>列表项9</li>
          <li>列表项10</li>
  </ul>
   </body>
</html>

在这里插入图片描述
:first-child 匹配属于父元素中的第一个
:last-child 匹配属于父元素中的最后一个
:first-of-type 匹配父元素下第一个类型为E的子元素
:last-of-type 匹配父元素下最后一个类型为E的子元素
:only-child 唯一子元素
:empty 选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
:target 选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
:not 选择器称为否定选择器，可以选择除某个元素之外的所有元素。
伪元素：
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动。
::selection 伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。只能改变背景颜色和文本颜色

 p::selection{
     background-color: #DDA0DD;
     color:#f00;
    }

在这里插入图片描述
::first-line 设置对象内的第一行的样式。
::first-letter 设置对象内的第一个字符的样式。

状(静)态伪类：
input:enable
input:disable
input:checked
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。
:disabled选择器刚好与:enabled选择器相反，用来选择不可用表单元素。要正常使用:disabled选择器，需要在表单元素的HTML中设置“disabled”属性。
在这里插入图片描述

weixin_45846263

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择符

CSS3选择符在css中除了我们知道的元素选择符，还新增了一些选择符下面就来说说这些选择符。很多选择符不仅仅是CSS里面可以用，js中也是可以用。关系选择符兄弟选择符(E~F)选择符合条件的所有兄弟元素相邻选择符(E+F)选择紧贴在E元素之后F元素，元素E与F必须同属一个父级，只能向后找。属性选择器=全等，~=约等，^=开头，$=结尾，*=含有，|=特别伪类选择器结构伪...
复制链接

扫一扫