CSS选择器

选择器

1.通用选择器,交集选择器，开集选择器

选中全部，浏览器默认会有8px的margin，会造成一些错误

*{
	margin:0;
	padding:0;
}

但不推荐这样使用，因为很消耗性能，更常用的做法是使用开集选择器，用到什么元素就加上什么元素

div,a,p,imput,span{
margin:0;
padding:0;
}

同时符合两个条件的选择器是并集选择器,既是div，又为one类

div.one{
	color:red
}

2.元素、类、id选择器

简单略

3.属性选择器，后代选择器

div有属性title

[tltle]{
	color:red;
}
//选中某个
[title=div]{
	color:blue;
}

不实用，用类选择器更好

所有后代： A类下的子类B的子类C前景色设置red

  .A .B .C{
  	color:red;
  }

直接子代：A类下的span前景色设置为red

.A > span {
	color:red;
}

4.兄弟选择器

相邻兄弟 使用+号 在小程序中有重要用途

.one + .two{
	color:red;
}

多个兄弟

.one ~ .div{
	color:red;
}

5.伪类

格式如： :hover
看起来像一个类，但并不是类。用于监听元素状态，常见状态有悬停、点击等。

• 动态伪类： :link 未选择、:hover 悬停、:visited 访问过、:active 点下未松手、:focus tab键聚焦
• 目标伪类： :target
• 语言伪类： :lang() 常见在HTML中设置，也可以单独在标签中
• 元素状态伪类： :enabled、:disabled、:checked
• 结构伪类： :nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type().、:root、:only-child、:only-of-type、:empty
• 否定伪类:: :not 用于取反

动态伪类在顺序必须是： link->visited->focus->hover->active

6.伪元素

html中有些元素是没有也不好实现的，如文本首行，则可以使用伪元素，::first-line、::first-letter
::before 在元素之前插入内容
::after 在元素之后插入内容

.box::before{
	content:'123';//文字
	color:'red';
	font-size:'32px';
}
.box::after{
	content:url('baidu.svg');//图片
}

其中content内容不能省略，可以将内容置空content = " "。