CSS选择器整理

CSS选择器整理

1. 基本选择器
   标签选择器
   含义：根据指定的标签名，在当前文件中找到所有该名称的标签，设置属性
   格式：
   标签名 {
   样式名:样式值
   }
   注意：
   1. 标签选择器选中的是当前文件中所有的标签, 而不能单独选中某一个标签
   2. 标签选择器无论标签藏得多深都能选中
   3. 只要是HTML中的标签就可以作为标签选择器
   类选择器
   含义: 根据指定的类名找到对应的标签, 设置属性
   格式:
   .类名{
   属性:值;
   }
   注意:
   1. 在同一个文件中的class可以重复
   2. 使用class选择器时要在class前面加上.
   3. 类名的命名规范和id名称的命名规范一样
   4. 在HTML中每个标签可以同时绑定多个类名
   格式:

<div class="类名1 类名2 ..."></div>

错误的写法:

<p class="para1" class="para2"></p>

id选择器
含义：根据指定的id找到对应的标签，设置属性
格式：
#id {
样式名:样式值
}
注意：
1. 在同一个文件中的id不可以重复
2. 使用id选择器时要在id前面加上#
3. id有一定的规范
id的名称只能由字母/数字/下划线
a-z 0-9 _
id名称不能以数字开头
id名称不能是HTML标签的名称

逗号选择器
含义: 同时给多个选择器选中的标签设置属性
格式:
选择器1,选择器2{
样式名:样式值
}
注意:
1. 逗号选择器使用,来连接
2. 选择器可以使用 标签名称、id、class

组合选择器
含义: 给同时具备多个选择器的标签设置属性
格式:
选择器1选择器2{
样式名:样式值;
}
注意:
1. 选择器和选择器之间没有任何的连接符号
2. 选择器可以使用 标签名称、id、class

普遍选择器
含义: 给当前文件所有的标签设置属性
格式:
* {
样式名:样式值;
}

2. 层次选择器
   子代选择器
   含义: 找到指定标签中所有的直接子元素, 设置属性
   格式:
   标签名称1>标签名称2{
   样式名:样式值;
   }
   先找到所有名称叫做"标签名称1"的元素, 然后在这个标签中查找所有第一代子元素名称叫做"标签名称2"的元素
   注意:
   1. 子元素选择器只会查找第一代子元素, 不会查找被嵌套的元素
   2. 子元素选择器之间需要用 > 连接

   后代选择器
   含义: 找到指定标签的所有的后代元素, 设置属性
   格式:
   标签名称1 标签名称2{
   样式名:样式值;
   }
   先找到所有名称叫做"标签名称1"的元素, 然后再在这个元素下面去查找所有名称叫做"标签名称2"的元素, 然后在设置属性
   注意:
   1. 后代选择器必须用空格隔开
   2. 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代

   兄弟选择器
   1. 相邻兄弟选择器
   含义: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
   格式:
   选择器1+选择器2{
   属性:值;
   }
   注意:
   1.相邻兄弟选择器必须通过+连接
   2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
   2. 通用兄弟选择器
   含义: 给指定选择器后面的选择器选中的所有标签设置属性
   格式:
   选择器1~选择器2{
   属性:值;
   }
   注意:
   1.通用兄弟选择器必须用~连接
   2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

   3. 属性选择器
      含义: 根据指定的属性名称找到对应的标签, 然后设置属性
      格式:
      [attribute]
      找到所有具有该属性名的标签, 设置属性
      [attribute=value]
      找到所有属性值为value的标签, 设置属性
      [attribute^=value]
      找到所有以value开头的标签, 无论有没有被-隔开
      [attribute$=value]
      找到所有以value结尾的标签
      [attribute~=value]
      找到拥有独立value的标签, value不可以和其他属性连接
      [attribute*=value]
      只要包含value就可以找到
      最常见的应用场景, 用于区分input

input[type=password] {
			}
			<input type="text">
			<input type="password">
			<input>

4. 伪类选择器
   在选择器的后面使用: 用于添加特殊的效果
   1. 与子元素相关
   :first-child 选中同级别中的第一个标签
   :last-child 选中同级别中的最后一个标签
   :nth-child(n) 选中同级别中的第n个标签
   first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。
   nth-of-type
   eg：

p:nth-of-type (2)
{
			color:red;
	}

数字 number
字符
odd 奇数
even 偶数

<p>段落一</p>
			<p>段落二</p>
			<p>段落三</p>
			<ul>
				<li>
					<p>段落四</p>
					<p>段落五</p>
				</li>
			</ul>

2. 与状态相关
   :link 未访问的链接 未被点击
   :hover 鼠标悬浮时的元素 悬停
   :active 激活链接 按下
   :visited 已访问的链接 已点击过
   :focus 聚焦时
   设置顺序
   link > visited > hover > active

   5. 伪元素选择器
      在选择器的后面使用:: 用于添加元素
      ::frist-letter
      ::seclection 文字被选中了
      ::after
      content:text/url() 【将行内元素改变成块级元素】
      ::before

6. 选择器优先级【级联】
   1. !important
   优先级最高，但不推荐
   2. 特性值
   内联style属性 ：1000
   id：100
   类名选择器、伪类选择器、属性选择器 ：10
   标签选择器、伪元素选择器：1
   3. 代码顺序
   如果样式具有相同的特性值，则看代码顺序，样式离元素近的优先级更高（就近原则）