CSS复合选择器

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

ul li {
            background-color: pink;
      }
.father .son {
            background-color: powderblue;
      }

这样的选择器选择的是在ul和.father选择器所处标签下所有的li和.son选择器元素。

<ul>
        <li>me</li>  都被选中
        <li>me</li>  都被选中
        <li>me</li>  都被选中
</ul>
<div class="father">
        <div class="son">hi</div>  都被选中
        <div class="son">hi</div>  都被选中
        <div class="son">hi</div>  都被选中
</div>
  1. 元素1 和元素2 中间用空格隔开
  2. 元素1 是父级，元素2 是子级，最终选择的是元素2
  3. 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
  4. 元素1 和元素2 可以是任意基础选择器

子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

.father>h1 {
            color: pink;
        }

这样的选择器选择的是ul和.father选择器所处标签下第一级被该选择器选中的标签。

<div class="father">
        <h1>123</h1>  被选中
        <h1>123</h1>  被选中
        <h1>123</h1>  被选中
        <div class="son">
            <h1>456</h1>
        </div>
</div>
  1. 元素1 和元素2 中间用大于号隔开
  2. 元素1 是父级，元素2 是子级，最终选择的是元素2
  3. 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

.first, .second {
            background-color: powderblue;
      }

这样的选择器选择的是.father和.son选择器所处标签处的元素

<div class="frist"></div>  被选中
<div class="son"></div>  被选中
  1. 元素1 和元素2 中间用逗号隔开
  2. 逗号可以理解为和的意思
  3. 并集选择器通常用于集体声明

兄弟选择器

兄弟选择器选择的是两个或多个相邻选择器中的的其中几个标签，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

.frist+.second {
            background-color: pink;
        }

该选择器选择的是同一标签下的.first和.second选择器所选中的标签，可以结合下面的html代码

<div class="father">
        <div class="frist">hi</div>  被选中
        <div class="second">hi</div>  被选中
        <div class="third">hi</div>
</div>

注意：hover对兄弟节点进行控制时，必须加上+兄弟选择器对兄弟节点进行控制，否则不起效果

‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如:hover 、:first-child

.father:hover {
            background-color: pink;
        }

该选择器选择的是.father元素在鼠标经过时，上列代码是鼠标经过.father元素时元素的背景颜色变成粉红色

同样的伪类选择器还有很多，更多选择器访问https://www.w3school.com.cn/css/css_pseudo_classes.asp

CSS3新增选择器

属性选择器

选择器 描述
[attribute] 用于选取带有attribute属性的元素。
[attribute=value] 用于选取带有attribute属性和值为value的元素。
[attribute~=value] 用于选取attribute属性值中包含值为value元素。
[attribute|=value] 用于选取带有值为value开头的attribute属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配attribute属性值以value值开头的每个元素。
[attribute$=value] 匹配attribute属性值以value值结尾的每个元素。
[attribute*=value] 匹配attribute属性值中包含value值的每个元素。

例如：我们想要选择div元素下所有包含class属性且属性值为choose的元素

div[class='choose'] {
            background-color: salmon;
        }

其html结构为：

<div class="choose">lala</div>

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择器 描述
first-child 匹配父元素中的第一个子元素
last-child 匹配父元素中最后一个E元素
nth-child(n) 匹配父元素中的第n个子元素E
first-of-type 指定类型的第一个
last-of-type 指定类型的最后一个
nth-of-type(n) 指定类型的第n个

nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）

  • n 可以是数字，关键字和公式

  • n 如果是数字，就是选择第n 个子元素，里面数字从1开始…

  • n 可以是关键字：even 偶数，odd 奇数

  • n 可以是公式：常见的公式如下( 如果n是公式，则从0开始计算，但是第0 个元素或者超出了元素的个数会被忽略)

公式 取值
2n 偶数
2n+1 奇数
5n 5 10 15 ...
n+5 从第5个开始（包含第五个）到最后
-n+5 前5个（包含第5个）...

区别：

  • nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
  • nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

总的来说就是：

  • nth-child 是查找到排序好的第n个元素再匹配。

  • nth-of-type是先匹配到元素，在根据排序好的元素查找到第n个元素。

例如以下代码

css：

.father .son:nth-child(2n) {
            background-color: salmon;
     }
        .mother div:nth-of-type(2n) {
            background-color: seagreen;
     }

html：

<div class="father">
        <div class="son">hi</div>
        <div class="son">hi</div>  被选中
        <div class="son">hi</div>
        <div class="son">hi</div>  被选中
        <div class="son">hi</div>
</div>

<div class="mother">
        <div>hihi</div>
        <div>hihi</div>  被选中
        <a href="javascript:void(0);">hihi</a>  因为不属于div元素，所以没有被选中
        <div>hihi</div>
        <div>hihi</div>  被选中
</div>
  1. 结构伪类选择器就是选择第n个
  2. nth-child从所有子级开始算的，可能不是同一种类型
  3. nth-of-type 是指定同一种类型的子级，比如 ul li:nth-of-type(2) 是选择第2个li
  4. 关于nth-child（n） 我们要知道n从0开始计算的，要记住常用的公式
  5. 如果是无无序列表，我们肯定用 nth-child 更多

伪元素选择器

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
  1. before 和 after 必须有 content 属性
  2. before 在内容的前面，after 在内容的后面
  3. before 和 after 创建一个元素，但是属于行内元素。
  4. 因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
  5. 伪元素和标签选择器一样，权重为 1

例如以下代码

css：

.box {
            width: 100px;
            height: 100px;
            background-color: pink;
      }
.box::before {
            content: "你好";
      }
.box::after {
            content: "世界";
      }

html：

<div class="box">hello</div>

这段代码在浏览器中打开，会发现hello前面生成了你好，后面生成了世界

伪元素的功能非常强大，配合定位能搭配出非常好的效果

posted @ 2021-05-02 00:58  JSW79  阅读(99)  评论(0)  编辑  收藏  举报
隐藏目录