CSS3新增选择器

执迷原理

于 2022-11-08 20:52:09 发布

阅读量510

点赞数 1

文章标签： css3 css html

本文链接：https://blog.csdn.net/ddd2501/article/details/127758666

版权

1.属性选择器

通过“元素的属性”来选择元素的一种方式（属性选择器在CSS2.1中已经存在，只是进行了扩展）
实际运用场景：百度文库列表小图标（利用属性选择器去匹配a标签的href属性中的最后几个字符，也就是文件后缀名，然后分别添加图标就行了）

E[attr ^= "xxx"]	选择元素E，其中E元素的attr属性是以xxx开头的任何字符
E[attr $= "xxx"]	选择元素E，其中E元素的attr属性是以xxx结尾的任何字符
E[attr *= "xxx"]	选择元素E，其中E元素的attr属性是包含xxx的任何字符

2.结构伪类选择器

子元素伪类选择器
- 指的是选择某一个元素下的子元素
子元素伪类选择器有两大类：
- :first-child、:last-child、:nth-child(n)、:only-child

E:first-child	选择父元素下的第一个子元素（该元素类型为E,以下类同）
E:last-child	选择父元素下的最后一个子元素
E:nth-child(n)	选择父元素下的第n个子元素或奇偶元素，n取值有3种：数字、odd和even，其中n从1开始（适合用于无序列表给多个li元素添加样式）
E:only-child	选择父元素下唯一的子元素，该父元素只有一个子元素

- :first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

E:first-of-type	选择父元素下的第一个E类型的子元素
E:last-of-type	选择父元素下的最后一个E类型的子元素
E:nth-of-type(n)	选择父元素下的第n个E类型的子元素或者奇偶元素，n取值为3种：数字、odd和even，n从1开始
E:only-of-type	选择父元素下唯一的E类型的子元素，该父元素可以有多个子元素

- 区别:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type和:first-child、:last-child、:nth-child(n)、:only-child
  - 从下面例子看到：:first-child在选择父元素下的子元素时，不仅要区分元素类型，还要要求是第一个子元素。而:first-of-type在选择父元素下的子元素时，只需要注意子元素类型就可以，不需要在意是不是第一个子元素
  - 别的类型的选择器都是同样的道理，以此类推就好了

<div>
    <h1></h1> (1)
    <p></p> (2)
    <span></span> (3)
    <span></span> (4)
    <h1></h1> (5)
</div>
// h1:first-child 指的是div父元素下的第一个h1元素 ，如果有选中，如果没有不选中.这里选中(1),不选中(5)
// span:first-of-type 指的是div父元素下的第一个span类型的子元素，选中(3)，不能选中(4)
// h1:last-child 指的是div父元素下的最后一个h1元素 ，选中（5），不选中（1）
// span:last-of-type 指的是div父元素下的最后一个span类型的子元素，选中（4），不选中（3）

3.UI伪类选择器

指的是针对“元素的状态”来选择元素的一种伪类选择器，UI全称为：“User Interface”，也就是用户界面
大多数UI伪类选择器都是针对表单元素的
UI选择器包括以下五类：
- :focus（是否具有焦点，用tab键就能确定）
  - 我们可以根据该伪类选择器来定义元素获取焦点时使用的样式，具有“获取焦点”和“失去焦点”特点的元素只有两种：
    - 表单元素（按钮、单选框、复选框、文本框、下拉列表）
    - 超链接
- ::selection
  - 我们可以使用::selection选择器来定义页面中被选中文本的样式，注意是双冒号不是单冒号。实际上单冒号往往都是伪类，而双冒号往往都是伪元素
- :checked
  - 这个兼容性比较差，目前只有Opera可以使用
  - 在CSS3中，我们可以使用:checked选择器来定义单选框或复选框被选中时的样式
- :enabled和:disabled
  - 来定义表单元素“可用”或者“不可用”时的样式
- :read-write和:read-only
  - 在CSS3中来定义表单元素“可读”或者“可写”时的样式

4.其他伪类选择器

:root
- 可以根据该伪类选择器来选择HTML页面的根元素，可以更换整个页的背景色等等用途
:empty
- 我们可以使用该伪类选择器选择一个“不包含任何子元素和内容”的元素，也就是选择一个空元素
:target
- 可以是使用:target选择器来选取页面中的某一个target元素
- 所谓target元素，就是指id被当成页面的锚点链接来使用的元素
- 用途：在实际开发中，搭配锚点链接来使用，可以实现用户体验更好的导航效果
:not()(重点理解)
- 该选择器来选取某一个元素之外的所有元素（注意是某一个元素，则意味着排除对象也只能是同一种类型的元素才能生效）
- 这个选择器非常重要，在日后开发过程中常常用到，需要重点掌握
- 类似数学集合中的补集（可以这么去理解）
- 如果对应的元素没有设置任何样式，那么它会被浏览器认定为取消，虽然看不见元素展示，但是还是会被渲染

<style>
    div{text-align: center;}
    p{   // 因这里给了 所有 p 样式，所以会被渲染
      width: 100px;
      height: 100px;
      border: 1px solid red;
      line-height: 100px;
    }
    p:not(#first){    // 除了id为first以外的所有同类型元素 
                      // 这个 id为first的 p 元素，假如没有样式，它就会消失
      color: white;
      background-color: blue;
    }
</style>


<body>
  <div>
    <p id="first">1</p>
    <p>2</p>
    <p>3</p>
  </div>
</body>