CSS｜选择器总结

元素选择器

element { style properties }

例子：

span {
  background-color: skyblue;
}

ID选择器

#id_value { style properties }

例子：

#identified {
  background-color: skyblue;
}

ID不可以重复 只可以使用一次

class选择器

与id类似，但是***class可以重复***

.class_name { style properties }

例子：

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

通配选择器

选择所有元素

* { style properties }

复合选择器

交集选择器

作用：同时符合多个条件的元素

语法：选择器1选择器2选择器3{ }

注意：

​ 如果有元素选择器，元素必须写在前面

eg：

div.red{

}
...
<div class="red">hell</div>

.a.b.c
<div class="a b c">hell</div>

并集选择器（选择器分组）

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器3{ }

.red,h1,spen,div,#green{

}

关系选择器

父元素 - 直接包含（一层）

子元素 - 直接被包含（一层）

祖先元素 - 直接或间接包含（多层）

后代元素 - 直接或间接被包含（多层）

兄弟元素 - 拥有相同父元素是兄弟元素

子元素选择器

语法： 父元素 > 子元素

selector1 > selector2 { style properties }

div.box > span{

}

div.box > span > p{

}

后代选择器

语法：祖先 后代

selector1 selector2 {
  /* property declarations */
}

div span{

}

兄弟选择器

语法：前一个 + 下一个(选择紧挨着的下一个，如果中间隔着其他的元素则不起作用)

p + span{
	
}

语法： 兄 ～ 弟（选择下面所有兄弟元素，不会选择前面的）

p ～ span{
	
}

属性选择器

[属性名] 选择包含有指定属性的元素

[属性名=属性值] 选择含有指定属性和属性名的元素

[属性名^=属性值] 选择属性值以指定值开头的元素

[属性名$=属性值] 选择属性值以指定值结尾的元素

[属性名*=属性值] 选择属性值中含有某值的元素

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

伪类选择器

伪类 ：不存在的类，特殊的类，用来描述一个元素的特殊状态

例子：
第一个子元素、被点击的元素、鼠标移入的元素

伪类一般情况下都是用 : 开头
:first-child 第一个子元素

​ :last-child 最后一个子元素

​ :nth-child() 选择第n个子元素

特殊值：

n - 选择0到正无穷的所有元素

2n - 选择偶数位的元素

2n+1 - 选择奇数位的元素

odd - 选择奇数位的元素

以上所有伪类都是根据所有的子元素排序，包括其中的div,span等等也算进去

ul > li:first-child{ 
//在ul的所有子元素中，选中为li的第一个子元素

}

ul > li:last-child{
//在ul的所有子元素中，选中为li的最后一个子元素

}
ul > li:nth-child(n){

}

以下伪类是根据其前面的元素排序

:first-of-type 在所有为xx的子元素中，选中为xx的第一个子元素

:last-of-type 在所有为xx的子元素中，选中为xx的第一个子元素

:nth-of-type（ ）

:not( ) 将符合条件的元素从选择器中去除（除了为xxx的子元素，其他都设置此样式）

ul > li:not(:nth-child(3)){//除了第三个为li的子元素，其他都设置此样式

}

获取焦点

:focus 获取焦点，常用于input表单中。

input:focus {
  color: red;
}

原理：是给input标签添加一个outline。如果想自定义outline可以使用

outline:none;

或者直接覆盖。

超链接的伪类选择器

:link 用来表示没有访问过的链接（正常的链接，即访问没访问过都属于正常链接）

a:link{
	color:red;
	font-side:50px; /* 此设置会让访问或没访问过的链接同时变大 */
}

:visited 用来表示访问过的链接

注意： 由于隐私的原因，visited只可以修改颜色

a:visited{
	color:red;
}

:hover 用来表示鼠标移入的状态（除了超链接，其他也可以用）

a:hover{
	color:green;
	font-side:50px;
}

:active 用来表示鼠标点击（除了超链接，其他也可以用）

a:active{
	color:blue;
}

伪元素选择器

伪元素 - 表示页面中一些特殊的并不真实存在的元素（特殊位置）

伪元素使用 :: 开头

​ ::first-letter 表示第一个字母

​ ::first-line 表示第一行

​ ::selection 表示选中的内容（鼠标选中）

​ ::before 元素的开始

​ ::after 元素的结束

​ ::marker 选中一个list item的marker box，后者通常含有一个项目符号或者数字。例如选择

• 等

  注意：before 和 after必须结合content属性来使用

  eg：

  P::first-letter{
  	font-side:100px;
  }
  
  P::first-line{
  	background-color:yellow;
  }
  
  P::selection{
  	background-color:green;
  }
  

  P::before{
  	content:'hello';
  	color:red;
  }
  P::after{
  	content:'byebye';
  	color:green;
  }
  ...
  <p>事例</p>