css选择器类型总结

为什么前端工程师必须要懂css选择器类型

css选择器的使用，在公司实际的项目中是非常常见的，可以说是必不可少的。比如id选择器，类选择器。
如果我一个页面有10个p标签，那我要是想选择第4个p标签变成红色，该怎么办呢？
学习css选择器类型，可以让我们更加灵活的给html元素添加css

那就让我们开始css选择器类型的学习吧

1. 基础选择器总结

选择器	作用	使用情况	用法
类选择器	可以选出1个或者多个标签	强烈推荐	.nav { color: red; }
标签选择器	可以选出所有相同的标签，比如p	推荐	p { color：red;}
id选择器	一次只能选择器1个标签	不推荐	#nav {color: red;}
通配符选择器	选择所有的标签	不推荐	* {color: red;}

2. 复合选择器总结

选择器	作用	隔开符号及用法
后代选择器	所有的子孙后代	符号是空格 .nav a
子代选择器	选择最近一级元素 只选亲儿子	符号是**>** .nav>p
交集选择器	选择两个标签交集的部分，既是 又是	没有符号 p.one
并集选择器	用于集体声明	符号是逗号 .nav, .header

3. 伪类选择器

/* 书写顺序：lvha */
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 选中时的链接 */

4. 伪元素选择器
   

before 和 after 创建的元素属于行内元素
元素在 Dom 中查找不到，所以称为伪元素

   div::after,
   div::before {
     content: '要显示的文字';
   }

5. 属性选择器
   

代码演示
button[disabled] {
  cursor: default
}
input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

6. 结构伪类选择器
   

代码演示
  div :first-child {
    background-color: lightblue;
  }
  div span:nth-child(2) {/* div下的第二个元素，元素必须为span */
    background-color: lightpink;
  }
  div span:nth-of-type(2) {/* div下的第二个span元素，不是第二个元素 */
    background-color: lightseagreen;
  }
  div span:nth-of-type(3) {
    background-color: #fff;
  }

代码演示
/* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }
  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

总结

好了，css选择器就分享到这里了，希望我分享的技术，能在实际的开发中帮到您