CSS基础选择器及进阶使用

1. 基础选择器

1.1标签选择器

通过标签名字，找到页面中所有这类标签，设置样式

1.2类选择器

使用方法:在标签内通过类名进行分组，以便进行相同样式操作

如：此处类名为one1

<p class="one1"></p>

样式结构：

.类名{属性名：属性值}

1.3id选择器

使用方法:通过id属性值，找到页面中带有这个id属性值的标签，并设置样式

如：此处id名为two

<p id="two"></p>

样式结构：

#id名{属性名：属性值}

1.4通配符选择器

使用方法:找到页面内所有标签，设置样式

<p class="one1"></p>

样式结构：

*{属性名：属性值}

2. 进阶使用

2.1复合选择器

2.1.1 后代选择器:空格实现

作用：根据标签嵌套关系，选则父元素后代中满足条件的元素

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

2.1.2子代选择器

作用：根据标签的嵌套关系，选择父元素子代中满足条件的元素

语法：选择器1 >选择器2 { css}

2.2并集选择器

作用：同时选择多组标签，设置相同的样式

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

结果：找到选择器1和选择器2选中的标签，设置样式

注意点：1.并集选择器中的每组选择器之间通过,分隔

2.并集选择器中的每组选择器可以是基础选择器或者复合选择器

3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性

2.3交集选择器

作用：选中页面中同时满足多个选择器的标签

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

结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点：1.交集选择器中的选择器之间是紧挨着的，没有东西分隔

2.交集选择器中如果有标签选择器，标签选择器必须写在最前面

2.4hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器:hover{ css}

注意点：1.伪类选择器选中的元素的某种状态

2.5Emmet语法

作用：通过简写语法，快速生成代码

语法：•类似于刚刚学习的选择器的写法