1，选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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" href="css/selector-weight.css" />
    <!-- <style>
        body {
            background-color: red;
        }
    </style> -->
    <!-- 文档样式  > 外部样式 -->
</head>
<body>
    <h1 class="title" id="active">Hello</h1>
    <div class="col-md-3 vip"></div>
</body>
</html>

/* id: 千位
class: 百位
tag: 个位 */
/* id:0 
class: 0
tag: 2
权重 : 0,0,2 */
body h1 {
    color: violet;
}
/* 调试样式 */
body {
    background-color: red !important;
}
/* 0,1,2 */
/* body h1.title {
    color: red;
} */
/* 0,1,0 > 0,0,2 */
h1.title {
    color: red;
}
/* 1,0,0 > 0,1,1 */
/* 1,1,2 */
body h1#active.title {
    color: seagreen;
}
/* (0,0,1) */
/* !important: 最高指示,忽略任何权重 */
/* !important: 调试样式 */
h1 {
    color: chartreuse !important;
}
/* (1, 1, 1) */
h1#active.title {
    color: blue;
}
/* 1,1,1 --> 1,1,2 */
/* 权重让选择器摆脱了对书写顺序的依赖 */
/* 0,0,2 > 0,0,1 */
h1 {
    color: darkorange;
}
/* (0,1,1) */
div.col-md-3 {
    border: 1px solid #000;
}
body {
    background-color: yellow;
}
/* (0,2,1)  > (0,,1,1) */
div.col-md-3.vip {
    border: 1px solid #000;
    /* .... */
}
/* 原因就是不需要修改框架源码,只需要通过动态调整优先级就可以改变默认样式 */

2,伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <style>
        @import url('css/selector-fake.css');
    </style>
</head>
<body>
    <!-- 伪: 假 -->
    <!-- 类: class  -->
    <!-- 结构伪类 -->
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        <li>item16</li>
        <li>item17</li>
        <li>item18</li>
    </ul>
</body>
</html>

/* 分组结构伪类, 用于选择:子元素 */
/* 所以应该给它一个查询起点 */
/* .list>.first {
    background-color: violet;
} */
/* .list>li:nth-of-type(1) {
    background-color: violet;
} */
/* nth-of-type(1)  ===> first-of-type  */
.list>li:first-of-type {
    background-color: green;
}
/* .list>li:nth-of-type(11) {
    background-color: violet;
} */
.list>li:last-of-type {
    background-color: red;
}
/* 倒数第4个 */
/* .list>li:nth-of-type(10) {
    background-color: violet;
} */
.list>li:nth-last-of-type(4) {
    background-color: violet;
}

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <style>
        /* @import url('css/selector-fake-parma.css'); */
        @import 'css/selector-fake-parma.css';
    </style>
</head>
<body>
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
    </ul>
</body>
</html>

/*
     :nth-of-type(an+b)
     1. a: 系数, [0,1,2,...]
     2. n: [0,1,2,3,....]
     3. b: 偏移量, 从0开始
     注: 计算出来的索引,必须是有效, 从1开始
   */
/* 选择元素只有二种情况:
1. 选择一个
2. 选择一组 */
/* 1. 匹配一个, a = 0 */
/* :nth-of-type(an+b) */
/* 匹配第3个 */
/* a=0,n=[0,1,...], b = 3  */
/* .list> :nth-of-type(0n + 3) {
    background-color: lightgreen;
} */
/* .list> :nth-of-type(3) {
    background-color: lightgreen;
} */
/* 2. 匹配一组 */
/* 2.1 a = 1 */
/* .list> :nth-of-type(1n) {
    background-color: lightgreen;
} */
/* n = 0,1,2...
1*0 =0
1*1 = 1
1*2 = 2
1*3 = 3
[1,2,3,....] */
/* .list> :nth-of-type(n) {
    background-color: lightgreen;
} */
/* .list>* {
    background-color: lightgreen;
} */
/* 实际开发中, 使用 n+b(偏移量)来快速选择一组元素 */
/* 匹配第3个元素后面的所有兄弟元素 */
/* .second~* {
    background-color: violet;
} */
/* .list> :nth-of-type(n + 3) {
    background-color: lightgreen;
} */
/* n = 0,1,2,...
0+3=3
1+3=4
2+3=5
.... */
/* a=-1  */
/* 取前3个 */
/* .list> :nth-of-type(-n + 3) {
    background-color: lightgreen;
} */
/* -1*0 + 3 = 3
-1*1 + 3 = 3-1 = 2
-1*2 + 3 = 3-2 = 1
-1*3+3 = 3-3 = 0
[3,2,1] */
/* 最后三个,只需要换一下选择器, 参数不变 */
/* .list> :nth-last-of-type(-n + 3) {
    background-color: lightgreen;
} */
/* .list> :nth-of-type(2n - 1) {
    background-color: lightgreen;
} */
/* 
.list> :nth-of-type(odd) {
    background-color: lightgreen;
} */
.list> :nth-of-type(even) {
    background-color: lightgreen;
}
/* odd: 奇数, even: 偶数 */

选择器权重+伪类选择器及参数

1，选择器

2,伪类选择器

相关文章