html+css选择器大盘点

前端学习html和css时，不可避免要用到许多选择器，现在我来做一个大盘点

1：基本选择器

（a）：元素选择器：

p {
    font-size: 12px;
}

（b）：ID选择器：

#p {
   color：pink;
}

（c）：类选择器：

.nav {
    background-color: skyblue;
}

（d）：通配符选择器：

* {
    margin: 0;
    padding: 0;
}

2：高级选择器

（a）：后代选择器：

ul li {
    text-decoration: none;
}

（b）：子代选择器：

div>span {
    text-align: center;
}

（c）：并集选择器：

.box1,
.box2 {
    width: 100px;
}

3：伪类选择器

（a）：链接伪类选择器：

a:hover {
    color: #ff8500;
}

（b）：过滤选择器：

(1):子元素过滤：

div:nth-child(n) {
    height: 30px;
}

(2):特定位置子元素过滤：

div:nth-last-child() {
    color: yellowgreen;
}

（3）：子类型元素过滤器：

div:nth-of-type() {
    font-size: 20px;
}

4：伪元素选择器

（a）：before/after伪元素：

div::before {
    content: '';
}

• 作者：刘港辉
• 本文源自：《普歌-赤道团队：html+css选择器大盘点》
• 本文版权归作者所有，欢迎转载。
• 如果有不足，欢迎雅正留言