逆战班—css常用选择器

一、基本选择符：
1.通配符：选择页面中所有的标签。
作用：清除内填充和外边距。
css中语法：✳{padding：0；margin：0}
2.标签选择符：所有的html标签，都能当作类型选择来用。
特点：选择页面中所有的当前元素。
作用：统一某个标签样式方式的时候，清除某个标签样式的时候。
3.id选择符：给标签添加一个id。id=“名称”
css中id语法：#名称{css样式}
特点：id是惟一性的，在同一个页面中，只能出现一次。
作用：id名称用作网页外围结构的搭建。
4.class选择符：给标签添加class名称。class=“名称”。
css中class语法：.名称{css样式}。
特点：一个标签可以拥有多个class名称，class可以重复使用。
作用：更适合定义一类样式。
5.父子选择器：找到符合要求的标签，会匹配所有的后代标签。
css中语法：父元素选择器 子元素选择符{css样式}。例：ul li{css样式}
6.群组选择器：可以将多种选择器结合到一起使用，用来统一设定样式。
css中语法：选择符1，选择符2，选择符3{css样式}。例：h1,h2,#abc,.m{ }.
代码和效果图如下：

二、属性选择器：
1: 选择符[属性名] 只要带有当前属性名就会被选中。
2: 选择符[属性名=“属性值”] 不仅制定属性名，有指定属性值
3: 选择符[属性名~=“属性值”] 属性值为一个词列表，只要包含当前词就会被选中
4: 选择符[属性名^=“属性值”] 属性值必须是当前指定的属性值开头的
5：选择符[属性名$=“属性值”] 属性值必须是当前指定的属性值结尾的
6: 选择符[属性名*=“属性值”] 属性值中只要包含了指定的字符就会被选中
7: 选择符[属性名|=“属性值”] 属性值仅是当前指定的属性值，或者是以属性值- 开头 （ left-up ）
代码和效果图如下：

三、伪类选择器：
如果子集标签类型一致（类名一致）的情况下：采用的是 child
1 : 选择符:first-child{ }
2 : 选择符:last-child{ }
3 : 选择符:nth-child(val){}
val :
可以是某个数值 表示第几个
2n 或者 even 偶数
2n + 1 或者 odd 奇数
4 : 选择符:nth-last-child(){} 倒数第几个
5 : 选择符:only-child{} 当前子集只有一个元素的时候才会被选择。
如果子集合标签类型不一致（类名不一致）的情况下：采用的是 of-type
of-type 先确定类型，把不同类型的先剔除。剩下同类的进行第几个选择。
1 : 选择符:first-of-type{ }
2 : 选择符:last-of-type{ }
3 : 选择符:nth-of-type(val){}
val :
可以是某个数值 表示第几个
2n 或者 even 偶数
2n + 1 或者 odd 奇数
4 : 选择符:nth-last-of-type(){} 倒数第几个
5 : 选择符:only-of-type{} 当前子集只有一个元素的时候才会被选择
代码和效果图如下：

四、层级选择器（包含选择器）：
父元素>子元素{}
说明：只能选择父元素的最近的一层子元素。
兄弟元素 + 兄弟元素{}
说明：通过当前的元素 选择符 离她最近的 下面的兄弟元素
兄弟元素 ~ 兄弟元素{}
说明：通过当前的元素 选择符 下面的所有的兄弟元素