前言

这篇文章的重点是CSS权威指南到手啦！开始精读之旅！

非重点是设置一下git的dl，使得我们能够更好的使用gitclone等。哦当然还包括yarn等，原理是差不多的。

解决方案

目前的方法还是需要自己的工具的，首先查看自己的本地端口，很简单放在你的工具上就会出现。

然后设置git 地址

git config --global http.https://github.com.proxy https://127.0.0.1:1080

这样的话只会对github中的仓库进行dl。不然码云的东西或者国内的仓库速度会很慢。

当然，这样的方式只能对于http方式有效，对于git方式是没用的。

关于yarn :

yarn config set proxy http://127.0.0.1:1080
yarn config set https-proxy http://127.0.0.1:1080

如果不想使用tyarn，这样还是不错的。

因为是第四版了，所以内容还是相当丰富的，而且也分成了上下篇，所以从选择器开始，到动画遮罩，准备认真的精读一下，当然一遍也不一定能够见成效，所以这个系列估计会一直更新下去，直到我离开这个行业。

首先是多个类的相关内容：

    <p>
      this is a graph
      <span class="qw er ty">123</span>
      godbye
    </p>

.qw.ty {
  color: aquamarine;
}

即使这样，选择器也可以选择到span。

而不同于类选择器，ID选择器是不可以串在一起使用的，而其实不管是类选择符还是ID选择符，我们选择的都是属性的值，只不过ID和类都可以作出一定的简化。自CSS2后，属性选择符开始使用起来。

属性选择器分为"简单属性选择符，精确属性选择符，部分匹配属性值选择符，起始值属性选择符"，前两个很好理解，后两个用的并不多（彷佛是废话）

关于>和+两种选择后代的方式，这里有个小例子

  <body>
    <p>
      this is a graph
      <div class="qw er ty">
        <p>123</p>
      </div>
      godbye
    </p>
  </body>

大家自己测试这四种情况就可以掌握了：

body > p {
  color: #12e;
}

body p {
  color: #12e;
}

body + p {
  color: #12e;
}

div p {
  color: #12e;
}

关于伪类和伪元素，东西虽然挺多的，但是感觉实际用起来也就那些。诸如常用的::before和::after在后面会更加详细的说明。

最后看一下层叠，既然成为层叠样式表，同一元素被不同规则修饰是很经常的一件事，那么冲突的规则则需要层叠的特指度来声明。

简单的来说，对于常用的选择符，ID的特指度是这样的：“0,1,0,0”，class的特指度是：“0,0,1,0”，而元素和伪元素的特指度是：“0,0,0,1”，简单的看几个计算出来的特指度:

0,0,1,0 > 0,0,0,1
0,0,1,0 > 0,0,0,8

需要注意的是ID选择符和属性选择符中使用ID属性的特指度是不同的：

#meadow {color: green;}
*[id="meadow"] {color: red}

前者的特指度是"0,1,0,0"，后者的特指度是"0,0,1,0"。

同时，行内样式的特指度是最高的，他占据的就是第一位的位置。这么说好像也不对，难道没有超脱"0,0,0,0"之外的吗？当然有，如果你觉得某个样式特别重要"!important"就可以发挥作用了。

关于声明权重，有五个方面需要注意：

而最后，如果:

h1 {color: blue;}
h1 {color: red;}

那么我们会取后者。

发布了346 篇原创文章 · 获赞 330 · 访问量 2万+

私信关注