从头开始复习css之选择器篇(上)

---

最近感觉自己的事儿非常的多，包括自己在开始创业啥的 有点耽误自己的学习了。但是看着如今经济的大环境下面，实在是没有更多可以懈怠的时间。但是最近情绪特别浮躁，只好借着四月的风，重新体验感受一波年轻了。

一、 基础选择器

关于基础选择器这一块呢？我还是就简单的提一下吧。重点的讲一下后面的子选择器和兄弟选择器，前面的感觉没必要多提，其他的直接上代码了

1.1、 id选择器

在css中用#开头来申明，在html标签内用id关键字来声明

// html

id选择器
//css
#klivitam {
    width: 200px;
    height: 200px;
    background-color: red;
}

1.2、 类选择器

在css中就.开头来声明，在html标签内用class关键字来声明

  // html
  
  class选择器
  // css
  .block {
    width: 200px;
    height: 200px;
    background-color: green;
   }

1.3、 元素选择器

在css直接用html标签名来声明。

  // html
  
  

    
后代选择器
  
  // css
  li {
    list-style: none;
  }

1.4、 分组选择器

在css中，多种类/元素/id选择器用逗号分隔汇成一组

  // html
  h1
  h2
  h3
  //css
  h1,h2,h3 {
    color: pink;	
  }

1.5、 后代选择器

css中父选择器和自选择器用>或者（空格）隔开

// html

  
后代选择器

// 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

  
1
  
我是你的兄弟不
  
2
  
3

// css
.brother-select-01 li + p{
  font-size: 24px;
  color: green;
}

此时的效果是：

但是如果后面第一个元素不是p的时候，也就是将html结构改装成现在这样

  
1
  
2
  
  
我是你的兄弟不
  
3

此时的效果就会变成这样哦：

或者增加多个

	

		
1
		
我是你的兄弟不
		
我是你的兄弟不
		
我是你的兄弟不
		
2
		
3
	

值得注意的就是：+是对应的是被选择元素后第一个元素，如果不满足这两个条件都不会生效的，如果存在多个也只是会生效第一个而已，这里是不是突然对之前的一些代码有了心得灵感呢

如果想全部生效怎么办呢？

1.6.2、 ~：紧跟着被选后所有兄弟选择器

前面提到兄弟选择器+可能会存在很多弊端，那么是不是~可以来避免呢？
来看下面一段代码：

  
1
  
我是你的兄弟不
  
2
  
3

 .brother-select-02 p ~ li{
  font-size: 24px;
  color: green;
}

效果如下：

这里我们发现凡是在p后面的li元素都生效了，这里有一个问题，是不是如果中间穿插一个其他的元素，是不是还会生效呢？代码如下：

	

		
1
		
我是你的兄弟不
		
2
		
我是你的兄弟不
		
3
	

效果如下：

这说明 ~ 会选择其后所有的被指定的元素

二、 属性选择器

关于属性选择器这一块，之前一直没搞懂，觉得这玩意儿好难呀。但是一旦真的入门之后就觉得这简直都不是事儿。主要是属性选择器后面用一个[]包裹住一个特殊的内容

2.1、 普通属性选择器

来看下面一段代码：

//html
	
		
div1
		
div2
		
div3
		
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
		
div1
		
div2
		
div3
		
div4
		
//css
		p {
			border: 1px solid black;
			width: 100px;
			height: 100px;
		}
		p[name~="div"]{
			background-color: red;
		}

效果如下：

这里我们发现：~=的用法只是用于严格指定字段开头的属性。其他的一概不论

2.4、 子串开头选择器

这个用^=关键字符来声明，来看下面一段代码：

//html
	
		
div
		
div1
		
div2
		
div3
		
div4
		
div5
		
//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
		
div1
		
div2
		
div3
		
div4
		
div5
		
dvi
		
// css
		p {
			border: 1px solid black;
			width: 100px;
			height: 100px;
		}
		p[name*="div"]{
			background-color: red;
		}

这里我们发现：所有包含该指定字符的属性都起了作用。

说在最后

好了，我会在接下来的两三个小时里面将选择器写完，请大家期待哦。
最近一直有人在网上问我：说好的文章呢？很抱歉，由于第一次玩服务器，想玩的东西还有点多，就前些天整了docker和gitlab，结果把服务器搞炸了，最后才看到最低支持的配置是4g/4核。经过我再三的计算，我决定还是不去升级服务器配置了，就在自己的mac上面简单的搭建一下就好了。现在还是想在本地玩玩

关于服务器的配置的心得呢？我暂时不知道要不要开放出来，因为完全不知道怎么写，基本都是自己找到问题，发现问题就解决问题了。但是我一般在写东西的时候，一般都会重现一下问题，这就很麻烦了，这得去玩坏再玩好 orz

最后最后提到一句，欢迎大家点赞，关注我的个人博客，我会源源不断的输出高质量文章的。