剑指Offer
TypeScript
TypeScript

选择器

1.关系型选择器模式(不常用)

E+F:下一个满足条件的兄弟元素节点

1<div>div</div>
2<p>1</p>
3<p>2</p>
4<p>3</p>
5<p>4</p>
1div + p {
2  /*选择div兄弟下一个兄弟节点，叫p*/
3  background-color: red;
4}

E~F:下一堆满足条件的兄弟元素节点

1<div>div</div>
2<span class="demo">234</span>
3<p class="demo">1</p>
4<p>2</p>
5<p>3</p>
1div ~ p {
2  background-color: green;
3}

2.属性选择器(不常用)

复习属性选择器：

1<div class="demo" data="a" > data</div > <div > </div > div[data] {
2  background-color: red;
3}

1.小破浪

属性名是 data，属性值里面有独立 a 的元素

1<div data="a">1</div>
2<div data="b">2</div>
3<div data="a b">3</div>
4<div data="aa b c">4</div>
1div[data~="a"] {
2  background-color: red;
3}
4/*1,3变色*/

2.小竖线

以 a 开头或者以 a-开头

1div[class|="a"] {
2  background-color: red;
3}
1<div class="a">1</div>
2<div class="a-test">2</div>
3<div class="b-test">3</div>

3.^以...开头，$以...结尾，*存在

1div[class$="a"] {
2  background-color: red;
3}
1<div class="a">1</div>
2<div class="a-test">2</div>
3<div class="b-test">4</div>

3.伪元素选择器(不常用)

before,after 一个两个冒号都可，但是接下来的两个必须两个冒号

1.placeholder

1<input type="text" placeholder="请输入用户名" > input::placeholder {
2  color: green; /*只能改变字体颜色*/
3}

2.selection

1<div>成哥很帅</div>
2<div>邓哥也很帅</div>
1div:nth-of-type(1)::selection {
2  /*只能用这三种属性*/
3  /*color*/
4  /*background-color: */
5  /*text-shadow: 阴影*/
6  text-shadow: 3px 5px black;
7  color: #fff;
8  background-color: #fcc;
9  /*实现选中变色*/
10}
11div:nth-of-type(2)::selection {
12  color: yellow;
13  background-color: green;
14}
1user-select: none 不让选中;

DEMO

1<!DOCTYPE html>
2<html lang="en">
3  <meta charset="UTF-8" />
4  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
5  <title>Document</title>
6  <style>
7    span::selection {
8      background-color: green;
9      color: yellow;
10    }
11  </style>
12  <body>
13    名下痴汉tid梦，也从大家的视线中消失了。<span>老</span>dengxu是一位非Two将打败过dengxu作为自己的主要战绩吹了很久。
14    后来dengxu海归追梦，也从大家的视线中消失了。<span>邓</span>dengxu是一位非常有实大家的视线中消失了。<span>虚</span>dengxu是一位非常有实
15    <span>弱</span>名下痴汉tidesof
16  </body>
17</html>

DEMO

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7    <style>
8      p {
9        display: inline-block;
10        width: 200px;
11        border: 1px solid #000;
12      }
13      p::first-letter {
14        font-size: 30px;
15      }
16      p::first-line {
17        color: green;
18      }
19    </style>
20  </head>
21  <body>
22    <p>沙拉酱擦参考手册是空的充电口穿梭在考虑到开始做看大V南京市的计算机</p>
23    <input type="text" name="a" readonly /><span>dg</span>
24    <input type="text" name="a" read-write /><span>ds</span>
25  </body>
26</html>

4.伪类选择器

1.not(s)

案例

1<div class="demo">1</div>
2<div class="demo">2</div>
3<div class="test">3</div>
4<div>4</div>
1div:not([class]) {
2  background-color: red;
3}

实际开发类似需求----移动端列表页：除了最后一个都要加上一条横线

1*{
2    margin: 0;
3    padding: 0;
4}
5ul{
6    width: 300px;
7    border:1px solid #999;
8}
9li{
10    height: 50px;
11    margin: 0 5px;
12    /*border-bottom: 1px solid black;*/
13}
14li:not(:last-of-type){
15    border-bottom: 1px solid black;
16}
17<ul>
18<li>content</li>
19<li>content</li>
20<li>content</li>
21<li>content</li>
22<li>content</li>
23<li>content</li>
24<li>content</li>
25</ul>

2.root 和 html 地位相等

区別：

1.root:根标签选择器   html xml

2.html：根标签

3.root 包含 html

用法：

1:root{background-color}

3.target

含义

被标记成锚点之后--location.hash=×××

案例：可点击创造锚点

1<a href="#box1">box1</a>
2<a href="#box2">box2</a>
3<div id="box1">1</div>
4<div id="box2">2</div>
1div:target {
2  border: 1px solid red;
3}

DEMO

1<!DOCTYPE html>
2<html>
3    <head>
4        <title>finish js</title>
5        <style>
6            *{
7                padding: 0;
8                margin: 0;
9                list-style: none;
10            }
11            body{
12                height: 2000px;
13            }
14            a{
15                position: fixed;
16                top:0;
17            }
18            .item{
19                position: absolute;
20                top:1000px;
21                width: 100px;
22                height: 100px;
23                background: red;
24            }
25            #item1{
26                top:500px;
27            }
28            #item2{
29                top:1000px;
30            }
31            #item3{
32                top:1500px;
33            }
34            .item:target{
35                background: green;
36            }
37
38        </style>
39    </head>
40    <body>
41        <a href="#item1" style="left:200px">click1</a>
42        <a href="#item2" style="left:300px">click2</a>
43        <a href="#item3" style="left:400px">click3</a>
44        <div id="item1" class="item">1</div>
45        <div id="item2" class="item">2</div>
46        <div id="item3" class="item">3</div>
47    </body>
48</html

小项目：三个 a 标签控制页面背景颜色

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7    <style>
8      /*实现div=屏幕的高度	*/
9      :root,
10      body {
11        margin: 0;
12        padding: 0;
13        height: 100%;
14      }
15      #red,
16      #green,
17      #gray {
18        height: 100%;
19        width: 100%;
20      }
21      #red {
22        background-color: #f20;
23      }
24      #green {
25        background-color: green;
26      }
27      #gray {
28        background-color: gray;
29      }
30      div[id]:not(:target) {
31        display: none;
32      }
33      div.button-wrapper {
34        position: absolute;
35        width: 600px;
36        top: 400px;
37      }
38      div.button-wrapper a {
39        text-decoration: none;
40        color: #fff;
41        background-color: #fcc;
42        font-size: 30px;
43        border-radius: 3px;
44        margin: 0 10px;
45      }
46    </style>
47  </head>
48  <body>
49    <div class="button-wrapper">
50      <a href="#red" class="bgred">red</a>
51      <a href="#green" class="bggreen">green</a>
52      <a href="#gray" class="bggray">gray</a>
53    </div>
54    <div id="red"></div>
55    <div id="green"></div>
56    <div id="gray"></div>
57  </body>
58</html>

4.其他伪类选择器（此部分都考虑其他元素的影响）

受其他元素的影响，父子级，不出常用

1.first-child

1<div>
2  <p>1</p>
3  <p>2</p>
4  <p>3</p>
5</div>
1/*伪类选择器是被选择元素的状态*/
2p:first-child {
3  background-color: red;
4}
1<p>1</p>
2<div>
3  <p>1</p>
4  <p>2</p>
5  <p>3</p>
6</div>

是不是 first-child，不只看是 p 里面的第一个，要看父级下面的第一个

1<div>
2  <span>0</span>
3  <p>1</p>
4  <p>2</p>
5  <p>3</p>
6</div>

2.last-child

1<div>
2  <p>1</p>
3  <p>2</p>
4  <p>3</p>
5</div>
6<p>4</p>
7<!-- last-child:只要是最后一个儿子，就可，即14 -->

3.only-child

1span:only-child {
2  background-color: aqua;
3}
4div:only-child {
5  background-color: blueviolet;
6}
1<div>
2  <span>0</span>
3  <p>1</p>
4</div>

DEMO

1nth-child(n)<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7    <style>
8      /*实现div=屏幕的高度	*/
9      :root,
10      body {
11        margin: 0;
12        padding: 0;
13        height: 100%;
14      }
15      #red,
16      #green,
17      #gray {
18        height: 100%;
19        width: 100%;
20      }
21      #red {
22        background-color: #f20;
23      }
24      #green {
25        background-color: green;
26      }
27      #gray {
28        background-color: gray;
29      }
30      div[id]:not(:target) {
31        display: none;
32      }
33      div.button-wrapper {
34        position: absolute;
35        width: 600px;
36        top: 400px;
37      }
38      div.button-wrapper a {
39        text-decoration: none;
40        color: #fff;
41        background-color: #fcc;
42        font-size: 30px;
43        border-radius: 3px;
44        margin: 0 10px;
45      }
46    </style>
47  </head>
48  <body>
49    <div class="button-wrapper">
50      <a href="#red" class="bgred">red</a>
51      <a href="#green" class="bggreen">green</a>
52      <a href="#gray" class="bggray">gray</a>
53    </div>
54    <div id="red"></div>
55    <div id="green"></div>
56    <div id="gray"></div>
57  </body>
58</html>

4.nth-child()

CSS 从 1 开始,n 是从 0 开始   odd 奇数 even 偶数

1p:nth-child(2n) {
2  background-color: blueviolet;
3}
1<div>
2  <p>1</p>
3  <p>2</p>
4  <p>3</p>
5  <p>4</p>
6  <p>5</p>
7</div>

5.nth-last-child(n)

倒着数

5.其他伪类选择器（不受其他影响）

不受其他影响,常用

1.first-of-type

1<ul>
2  <li>1</li>
3  <li>2</li>
4  <li>3</li>
5  <li>4</li>
6  <li>5</li>
7  <li>6</li>
8</ul>
9<li>1</li>
1li:first-of-type {
2  background-color: aqua;
3}

这一类型里面是的第一个

2.last-of-type

3.only-of-type

1<div>
2  <span>0</span>
3  <p>1</p>
4  <!-- <p>2</p>不是特有的了 -->
5</div>
1p:only-of-type {
2  background-color: aqua;
3}

4.nth-of-type(n)常用

1<div>
2  <span>0</span
3  ><!-- 注意这一行 -->
4  <p>1</p>
5  <p>2</p>
6  <p>3</p>
7  <p>4</p>
8  <p>5</p>
9  <!-- <p>2</p>不是特有的了 -->
10</div>
1p:nth-of-type(n+2){从第二个开始查
2    background-color: aqua;
3}

5.nth-of-last-type(n)

与前一个相反

6.剩下的伪类选择器

1.empty:必须元素是空的，才叫 empty

1<div><span>123</span></div>
2<div></div>
3<div>234</div>
4<div><!--sda--></div>
5<!--注释也算节点-->
1div:empty {
2  border: 1px solid black;
3  height: 100px;
4}

2.checked

1<label> 一个小惊喜<input type="checkbox" /><span></span> </label>
1input:checked {
2  width: 200px;
3  height: 200px;
4}

DEMO 处理简单交互

1<style>
2  input:checked + span {
3    background-color: green;
4  }
5  input:checked + span::after {
6    content: "隔壁老王 电话xxx，请务必小心刑事";
7    color: #fff;
8  }
9</style>
10<label>
11  一个小惊喜
12  <input type="checkbox" />
13  <span></span>
14</label>

3.enable

1<input type="text" /> <input type="text" disabled />
1input:enabled {
2  background: green;
3}
4input:disabled {
5  border: 1px solid #f20;
6  background-color: #fcc;
7  box-shadow: 1px 2px 3px #f20;
8}

4.disable

5.read-only

1input:read-only{
2    color:chartreuse;
3}
4<input type="text">
5<input type="text" readonly value="你只能瞅着，干不了别的">

6.read-write

作业

选项卡

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7    <style>
8      * {
9        padding: 0;
10        margin: 0;
11        list-style: none;
12      }
13      .wrapper {
14        position: relative;
15        width: 400px;
16        height: 400px;
17        border: 1px solid black;
18        text-align: center;
19        margin: 0 auto; /*居中*/
20      }
21      .wrapper input {
22        width: 30px;
23        height: 30px;
24      }
25      /*.wrapper div和.wrapper实现三个小圆点在一行展示，块级元素。*/
26      /*.wrapper div相对于.wrapper定位：top,left*/
27      .wrapper div {
28        position: absolute;
29        top: 30px;
30        left: 0;
31        width: 400px;
32        height: 370px;
33        display: none; /*先都是none,选中那个那个变成block*/
34        text-align: center;
35        line-height: 370px;
36        font-size: 30px;
37        color: #fff;
38      }
39      .wrapper div:nth-of-type(1) {
40        background-color: red;
41      }
42      .wrapper div:nth-of-type(2) {
43        background-color: green;
44      }
45      .wrapper div:nth-of-type(3) {
46        background-color: blue;
47      }
48      input:checked + div {
49        /*input:checked + div{     不要有空格，否则错误*/
50        display: block;
51      }
52    </style>
53  </head>
54  <body>
55    <div class="wrapper">
56      <input type="radio" name="a" checked />
57      <div>a</div>
58      <input type="radio" name="a" />
59      <div>b</div>
60      <input type="radio" name="a" />
61      <div>c</div>
62    </div>
63  </body>
64</html>

手风琴

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8" />
5    <title>原生js手风琴特效</title>
6    <style>
7      * {
8        margin: 0;
9        padding: 0;
10      }
11      ul,
12      li {
13        list-style: none;
14      }
15      .box {
16        width: 1050px;
17        height: 300px;
18        margin: 100px auto;
19        overflow: hidden;
20      }
21      .accordion li {
22        float: left;
23        width: 100px;
24        height: 300px;
25        color: #000;
26        font-size: 20px;
27      }
28    </style>
29  </head>
30  <body>
31    <div class="box">
32      <ul class="accordion">
33        <li style="background: #f99;">1</li>
34        <li style="background: #9ff;">2</li>
35        <li style="background: #f9f;">3</li>
36        <li style="background: #9f9;">4</li>
37        <li style="background: blue;">5</li>
38        <li style="width:450px;background: yellow;">6</li>
39      </ul>
40    </div>
41    <script>
42      function accordion() {
43        var oBox = document.querySelector(".box");
44        var accordion = oBox.querySelector(".accordion");
45        var oList = accordion.getElementsByTagName("li");
46        var i = 0;
47        var timer = null;
48        //console.log(oList.length);
49        for (var i = 0; i < oList.length; i++) {
50          oList[i].index = i;
51          oList[i].onmouseover = function () {
52            var index = this.index;
53            if (timer) {
54              clearInterval(timer);
55            }
56            timer = setInterval(function () {
57              var iWidth = oBox.offsetWidth; //盒子的总宽度
58              //console.log(iWidth); 1050
59              for (var i = 0; i < oList.length; i++) {
60                if (index != oList[i].index) {
61                  //设定速度
62                  var speed = (100 - oList[i].offsetWidth) / 5;
63                  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
64                  oList[i].style.width = oList[i].offsetWidth + speed + "px";
65                  iWidth -= oList[i].offsetWidth;
66                }
67                oList[index].style.width = iWidth + "px";
68              }
69            }, 30);
70          };
71        }
72      }
73      accordion();
74    </script>
75  </body>
76</html>
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Document</title>
6    <style type="text/css">
7      * {
8        margin: 0;
9        padding: 0;
10        font-size: 12px;
11        list-style: none;
12      }
13
14      .menu {
15        margin: 50px auto;
16        width: 210px;
17        border: 1px solid #ccc;
18      }
19
20      .menu p {
21        height: 25px;
22        line-height: 25px;
23        background: #eee;
24        font-weight: bold;
25        border-bottom: 1px solid #ccc;
26        text-indent: 20px;
27        cursor: pointer;
28      }
29
30      .menu div ul {
31        display: none;
32      }
33
34      .menu li {
35        height: 24px;
36        line-height: 24px;
37        text-indent: 20px;
38      }
39    </style>
40    <script type="text/javascript">
41      window.onload = function () {
42        var menu = document.getElementById("menu");
43        var ps = menu.getElementsByTagName("p");
44        var uls = menu.getElementsByTagName("ul");
45        for (var i in ps) {
46          ps[i].id = i;
47          ps[i].onclick = function () {
48            var u = uls[this.id];
49            if (u.style.display == "block") {
50              u.style.display = "none";
51            } else {
52              u.style.display = "block";
53            }
54          };
55        }
56      };
57    </script>
58  </head>
59
60  <body>
61    <div class="menu" id="menu">
62      <div>
63        <p>Web前端</p>
64        <ul style="display:block">
65          <li>JavaScript</li>
66          <li>DIV+CSS</li>
67          <li>JQuary</li>
68        </ul>
69      </div>
70      <div>
71        <p>后台脚本</p>
72        <ul>
73          <li>PHP</li>
74          <li>ASP.net</li>
75          <li>JSP</li>
76        </ul>
77      </div>
78      <div>
79        <p>前端框架</p>
80        <ul>
81          <li>Extjs</li>
82          <li>Esspress</li>
83          <li>YUI</li>
84        </ul>
85      </div>
86    </div>
87  </body>
88</html>
目录