Web前端基础CSS初识学习笔记（7) 善用选择器之超详细大合集

标签选择器

类选择器

示例（sublime环境）

	
	
	


	
"orange ">鸣人
	
"bule ">佐助
	
卡卡西

多类名选择器

多类名选择器示例（sublime环境）

	
	
	


	
"font20 pink ">亚瑟
	
"font20">刘备
	
"font14 pink ">安其拉
	
"font14">貂蝉

ID选择器

ID选择器和类选择器的区别

通配符选择器

链接伪类选择器

示例（sublime环境）

	
	
	


	/*伪类选择器其中的链接伪类选择器 主要针对于a*/
	
 
		"#">秒杀 
		"#">闪购 
	

结构伪类选择器（CSS3）

目标伪类选择器

	
	
	


	

		
第一个孩子
		
第二个孩子
		
第三个孩子
		
第四个孩子
		
第五个孩子
		
第六个孩子
		
第七个孩子
	

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精确的目标元素标签。

交集选择器

并集选择器

后代选择器

选择出所有的后代

子元素选择器

只选择出亲儿子

属性选择器

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: green;
        }

伪元素选择器

1.E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 文本第一行；
3. E::selection 可改变选中文本的样式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

“:” 与 “::” 区别在于区分伪类和伪元素