#选择器

选择器：帮助你精准的选中想要的元素

##简单选择器

1. ID选择器
• 选中的是对应id值的元素#……

• Lorem ipsum dolor sit amet.

2. 元素选择器
• .red ；.big-center

.red{
	color:red;
	}
.big-center{
	font-size: 2em;
	text-align: center
	}
p class="big-center red" Lorem ipsum dolor sit amet.
				

• Lorem ipsum dolor sit amet.

3. 类选择器
• class=""

		
p class="red" Lorem ipsum dolor sit amet./p

	

• Lorem ipsum dolor sit amet.

4. 通配符选择器
• *，选中所有元素
• 所有代码都有效
5. 属性选择器
• 根据属性名和属性值选择元素
  [href]
• 或[href="https://电专.love"]{color:red;}
• 电专.love
更多内容请看mdn
6. 伪类选择器
• 选中某些元素的某种状态
• 按顺序写：（爱恨法则：love、hate）
1. link: 超链接未访问时的状态
2. visited: 超链接访问过后的状态
3. hover：鼠标悬停的状态：:hover{}
4. active: 激活状态，鼠标按下状态
7. 伪元素选择器
• 生成并选择某个元素内部的第一个子元素或最后一个子元素

style
spans::before{content: "《"; color: red;}
spans::after{content: "》"; color: red;}
style			

• 三国演义

##选择器的组合

1. 并且 — .
• p.red.big.center ⇒ tab
• 用组合p.red{text-indent: 2em; line-height: 2}

• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure dolore veritatis autem. Veritatis in fuga accusamus. Accusantium vitae enim dolore veritatis, totam voluptatibus aliquam minima, pariatur molestias, ipsum consequatur delectus sequi, magnam rem amet. Corporis possimus a ducimus, ipsum quam enim voluptas recusandae. Atque consequuntur nostrum, architecto rem quasi recusandae autem et sint. Similique minus molestias veniam dolores et rerum, architecto iure veritatis. Totam doloribus consequatur, est accusantium sed ratione eaque ut distinctio? Eius minus eum magni nesciunt, fugiat explicabo!

2. 后代元素 — 空格
• 两个选择器中加空格
• 选中class后代的li：.red li{}
• div class="abc",p class"bcd"
• 选中：.abc .bcd{}
3. 子元素 — >
• div class="abc",p class"bcd"
• 选中：.abc>.bcd{}
• 只能选择下面的一个子元素
• div>ul>li{color: red}
  • Lorem.
  • Animi.
  • Voluptatum.
4. 相邻兄弟元素 — +
• • Lorem.
  • Consequuntur.
  • Expedita.
  • Minima!
  • Voluptatem.
  • Quidem.
  • Et.
  • Quaerat.
  • Iste?
  • Sunt.
• .special{color: red;}
  .special+li{color: 008c8c;}
5. 后面出现的所有兄弟元素 — ~

##选择器的并列

• 多个选择器，用逗号分隔
• 语法糖：方便写代码，方便记忆
• .special~li, p{}