选择器权重和伪类选择器

选择器有id class tag 三种

id代表千位
class代表百位
tag代表个位
其中!improtant是最高级别，忽略权重
下面演示权重递归
为了方便演示，代码顺序采用倒序，以免同位选择器因为读写顺序产生歧义

html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>权重和伪类选择器</title>
  <link rel="stylesheet" tyep="text/css" href="0321.css" />
</head>
<body>
  <ul class="item" id="title">
    <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>
    <li>列表11</li>
    <li>列表12</li>
    <li>列表13</li>
  </ul>
</body>
</html>

css部分

/* 添加一个id */
#title li {
  background-color: brown;
}
/* 添加class */
.item li {
  background-color: blueviolet;
}
/* 两个标签 */
ul li {
  background-color: bisque;
}
/* 一个标签 */
li {
  border: 1px solid;
  background-color: aquamarine;
}

伪类选择器

伪类选择器以’：’开头，常用的有first-child last-child nth-of-type(n+b) nth-first-of-type last-of-type 奇数odd 偶数even 等组合
以下是演示css

li {
  border: 1px solid;
}
/* 选择第一个 */
ul > li:first-child {
  background-color: aquamarine;
}
/* 选择最后一个 */
ul > li:last-child {
  background-color: brown;
}
/* 选择第三个 */
ul > li:nth-of-type(3) {
  background-color: bisque;
}
/* 选择倒数第三个 */
ul > li:nth-last-of-type(3) {
  background-color: bisque;
}
/* 前三个 */
ul > li:nth-of-type(-n + 3) {
  background-color: red;
}
/* 最后三个 */
ul > li:nth-last-of-type(-n + 3) {
  background-color: blue;
}
/* 奇数行 */
ul > li:nth-last-of-type(odd) {
  background-color: blueviolet;
}
/* 偶数行 */
ul > li:nth-last-of-type(even) {
  background-color: gray;
}

选择器权重和伪类选择器

选择器权重和伪类选择器

相关文章