从头开始复习css之选择器篇(上)
最近感觉自己的事儿非常的多，包括自己在开始创业啥的 有点耽误自己的学习了。但是看着如今经济的大环境下面，实在是没有更多可以懈怠的时间。但是最近情绪特别浮躁，只好借着四月的风，重新体验感受一波年轻了。
选择器
一、 基础选择器
关于基础选择器这一块呢？我还是就简单的提一下吧。重点的讲一下后面的子选择器和兄弟选择器，前面的感觉没必要多提，其他的直接上代码了
1.1、 id选择器
在css中用#开头来申明，在html标签内用id关键字来声明
// html
<!-- id选择器 -->
<div id="klivitam">id选择器</div>
//css
#klivitam {
width: 200px;
height: 200px;
background-color: red;
}
1.2、 类选择器
在css中就.开头来声明，在html标签内用class关键字来声明
// html
<!-- class选择器 -->
<div class="block">class选择器</div>
// css
.block {
width: 200px;
height: 200px;
background-color: green;
}
1.3、 元素选择器
在css直接用html标签名来声明。
// html
<!-- 元素选择器 -->
<ul class="child-select">
<li>后代选择器</li>
</ul>
// css
li {
list-style: none;
}
1.4、 分组选择器
在css中，多种类/元素/id选择器用逗号分隔汇成一组
// html
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
//css
h1,h2,h3 {
color: pink;
}
1.5、 后代选择器
css中父选择器和自选择器用>或者（空格）隔开
// html
<ul class="child-select">
<li>后代选择器</li>
</ul>
// css
.child-select>li {
width: 200px;
height: 200px;
background-color: yellow
}
// 和上面的效果是一样的
.child-select li {
width: 200px;
height: 200px;
background-color: yellow
}
1.6、 兄弟选择器
关于兄弟选择器这里，我还是想来讲一下的，这里还是有点东西的。这是我在做项目的时候可能会用到的小技巧，哈哈 来炫耀一波好吧
1.6.1、 +：紧跟被选后第一个兄弟选择器
来看这样一段代码：
// html
<ul class="brother-select-01">
<li>1</li>
<p>我是你的兄弟不</p>
<li>2</li>
<li>3</li>
</ul>
// css
.brother-select-01 li + p{
font-size: 24px;
color: green;
}
此时的效果是：
效果
但是如果后面第一个元素不是
p的时候，也就是将html结构改装成现在这样
<ul class="brother-select-01">
<li>1</li>
<li>2</li>
<span></span>
<p>我是你的兄弟不</p>
<li>3</li>
</ul>
此时的效果就会变成这样哦：
效果
或者增加多个
<ul class="brother-select-01">
<li>1</li>
<p>我是你的兄弟不</p>
<p>我是你的兄弟不</p>
<p>我是你的兄弟不</p>
<li>2</li>
<li>3</li>
</ul>
效果
值得注意的就是：+是对应的是被选择元素后第一个元素，如果不满足这两个条件都不会生效的，如果存在多个也只是会生效第一个而已，这里是不是突然对之前的一些代码有了心得灵感呢
如果想全部生效怎么办呢？
1.6.2、 ~：紧跟着被选后所有兄弟选择器
前面提到兄弟选择器+可能会存在很多弊端，那么是不是~可以来避免呢？
来看下面一段代码：
<ul class="brother-select-02">
<li>1</li>
<p>我是你的兄弟不</p>
<li>2</li>
<li>3</li>
</ul>
.brother-select-02 p ~ li{
font-size: 24px;
color: green;
}
效果如下：
效果
这里我们发现凡是在
p后面的li元素都生效了，这里有一个问题，是不是如果中间穿插一个其他的元素，是不是还会生效呢？代码如下：
<ul class="brother-select-02">
<li>1</li>
<p>我是你的兄弟不</p>
<li>2</li>
<p>我是你的兄弟不</p>
<li>3</li>
</ul>
效果如下：
效果
这说明 ~ 会选择其后所有的被指定的元素
二、 属性选择器
关于属性选择器这一块，之前一直没搞懂，觉得这玩意儿好难呀。但是一旦真的入门之后就觉得这简直都不是事儿。主要是属性选择器后面用一个[]包裹住一个特殊的内容
2.1、 普通属性选择器
来看下面一段代码：
//html
<div>
<p name="div1">div1</p>
<p name="div2">div2</p>
<p name="div3">div3</p>
<p>div</p>
</div>
// css
p {
border: 1px solid black;
width: 100px;
height: 100px;
}
p[name]{
background-color: red;
}
效果如下：
效果
2.2、 指定属性选择器
指定属性选择器就比较简单了，我们就简单的修改一下上面的css代码：
p {
border: 1px solid black;
width: 100px;
height: 100px;
}
p[name="div1"]{
background-color: red;
}
此时的效果如下：
效果
2.3、 严格部分值属性选择器
部分属性选择器是用~=来实现的
//html
<div>
<p name="div">div</p>
<p name="div 1">div1</p>
<p name="div_2">div2</p>
<p name="div-3">div3</p>
<p name=4div>div4</p>
</div>
//css
p {
border: 1px solid black;
width: 100px;
height: 100px;
}
p[name~="div"]{
background-color: red;
}
效果如下：
效果
这里我们发现：
~=的用法只是用于严格指定字段开头的属性。其他的一概不论
2.4、 子串开头选择器
这个用^=关键字符来声明，来看下面一段代码：
//html
<div>
<p name="div">div</p>
<p name="div 1">div1</p>
<p name="div_2">div2</p>
<p name="div-3">div3</p>
<p name=4div>div4</p>
<p name=5div5>div5</p>
</div>
//css
p {
border: 1px solid black;
width: 100px;
height: 100px;
}
p[name^="div"]{
background-color: red;
}
效果如下：
效果
这里我们发现：
^=会识别以指定字符开头的属性。如果不是以该属性开头的不会识别。
2.5、 子串结尾选择器
这个用$=关键字符来声明，这里我就简单的修改一下上面的css代码：
p[name$="div"]{
background-color: red;
}
效果如下：
效果
这里会发现：
$=识别所有以指定字符为结尾的属性名
2.6、 部分包含选择器
这个用*=关键字符来声明，代码如下：
//html
<div>
<p name="div">div</p>
<p name="div 1">div1</p>
<p name="div_2">div2</p>
<p name="div-3">div3</p>
<p name=4div>div4</p>
<p name=5div5>div5</p>
<p name="dvi">dvi</p>
</div>
// css
p {
border: 1px solid black;
width: 100px;
height: 100px;
}
p[name*="div"]{
background-color: red;
}
效果
这里我们发现：所有包含该指定字符的属性都起了作用。
说在最后
好了，我会在接下来的两三个小时里面将选择器写完，请大家期待哦。
最近一直有人在网上问我：说好的文章呢？很抱歉，由于第一次玩服务器，想玩的东西还有点多，就前些天整了docker和gitlab，结果把服务器搞炸了，最后才看到最低支持的配置是4g/4核。经过我再三的计算，我决定还是不去升级服务器配置了，就在自己的mac上面简单的搭建一下就好了。现在还是想在本地玩玩
关于服务器的配置的心得呢？我暂时不知道要不要开放出来，因为完全不知道怎么写，基本都是自己找到问题，发现问题就解决问题了。但是我一般在写东西的时候，一般都会重现一下问题，这就很麻烦了，这得去玩坏再玩好 orz
