基本选择器

标签选择器

直接使用 标签 做选择器

p{

font-size: 40px;

color: red;

}

类选择器

类选择器===> 为标签设置一个名字

在标签中添加一个 class=“mingzi”

语法：

.mingzi{

属性：属性值

}

注意：

1.同一个标签类名 class 可以创建多个名字，中间用空格隔开；不同标签可以使用同一个类型

2.类选择器前面必须加上 点（.）

ID选择器

id选择器 ===》身份证号

在标签中添加 id 属性:id="mingzi"

#mingzi{

属性：属性值；

}

注意：

1.id选择器前面必须加上 # 号；

2.虽然不同的标签可以使用同一个id名，但是不推荐使用；

3.属性：属性值 后面必须加上分号。

三种基本选择器的优先级

ID选择器>类选择器>标签选择器

注：代码是自上而下解析

如果同一个标签遇到相同的样式设置，则下面的样式会覆盖上面的。

高级选择器

层次选择器

后代选择器

E F（空格隔开）

选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

E F{ background: red; }

子代选择器

E>F（>号隔开）

选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

E>F{ background: pink; }

注意：

1：子代就是包含的所有符合条件的标签；

2：后期使用子代选择器尽量不要用类或id ，使用标签指向

相邻兄弟选择器

E+F（+隔开）

选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

E+F { background: green; }

注意：

紧位于其后的标签，中间不能隔其他的标签

通用兄弟选择器

E~F（~隔开）

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

E~F{ background: yellow; }

注意：

后面的所有元素都可

属性选择器

A 标签（元素） B 属性

1：标签[属性]

2：标签[属性="属性值"]

3：标签[属性^="属性值"] // 选中开头符合条件的

4：标签[属性$="属性值"] // 选中结尾符合条件的

5：标签[属性*="属性值"] // 选中所有符合条件的

伪类选择器

名字：伪类{

属性值

}

：link{ } ===>点击之前的效果 ，只用于a标签

：visited{ } ===>点击之后的效果 ，只用于a标签

：hover{ } ===》鼠标移入时的效果

：active{ } ===>鼠标按下

如果超链接在点击的时候，没有出现想要的效果是什么原因，怎么改？

1：hover 是不是放在 link 和visited 之后

2：如果用在一个标签上，我们些的顺序应该是 l ===> v ===> h === >a

结构伪类选择器

E：父元素 F：父元素的下的子元素（根据场景自由切换）

1.父元素下的第一个孩子：

E F:first-child{ background: red;}

注：如果在同一模块中，符合条件的都会受影响。

2.父元素下的最后一个孩子：

E F:last-child{ background: green;}

3.父元素下的第几个孩子（n)

E F：nth-child(n){ background: green;}

n可以是偶数（even），奇数（odd），指定数。

4.父元素下某个类型的第一个孩子：

E F：first-of-type{ background: red;}

注：和1的区别在于1是根据位置查找符合元素，找不到则没有样式，4是根据元素类型查找。

5.父元素下某个类型的最后一个孩子：

E F：last-of-type{ background: red;}

6.父元素下某个类型的第几个孩子：

E F：nth-of-type(n){ background: red;}