前端学习笔记 - CSS - 2.选择器

一. 复合选择器：

1. 交集选择器：

   选择器1 选择器2 选择器3{}

    p h1 div{}

2. 选择器分组（并集）：

   选择器1,选择器2,选择器3,选择器4{}

    p,h1,div,sapn{}

二. 关系选择器：

1. 子元素选择器：
   父元素 > 子元素{}

    div>span{}

2. 后代元素选择器：
   祖先 后代{}

    div span{}

3. 兄弟元素选择器：
   下一个兄弟

    兄 + 弟{}

4. 后面所有的兄弟选择器：
   不会选中前面的兄弟

    兄 ~ 弟{}

三. 属性选择器：

1. 指定属性为title：

    p[title]{}

2. 指定属性值为abc：

    p[title=[abc]{}

3. 属性值以abc开头：

    p[title^=[abc]{}

4. 属性值以abc结尾：

    p[title$=[abc]{}

5. 属性值包含abc：

    p[title*=[abc]{}

四. 伪类选择器：

       :first-child  	 第一个元素
	   :last-child    	 最后一个元素
	   :nth-child(n) 	 选中第n个元素
	   :nth-child(2n) 	 2n   或 even 偶数为的元素
	   :nth-child(2n+1)  2n+1 或 odd  奇数位的元素

       :first-of-type   第一个元素
	   :last-of-type    最后一个元素
	   :nth-of-type(n)  选中第n个元素
	   :not()   否定选择器
	   :not(:nth-child(3))    除了第3个

五. 选择器优先级（权重）：

项目	Value	Value
内联样式	1,0,0,0	style=“width:500px”;
id选择器	0,1,0,0	#id
类和伪类选择器	0,0,1,0	.class
元素选择器	0,0,0,1	div
通配选择器	0,0,0,0	*
继承的样式	没有优先级

• 计算优先级时，需要将所有的选择器的优先级相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算）
• 选择器累加不会超过最大的数量级
• 相同优先级：优先使用后面的样式
• !important：在属性后面添加 !important, 则此时样式会获取到最高度的优先级，甚至高于内联样式