【Web前端开发基础】CSS选择器进阶

1 选择器的进阶

目标：能够理解复合选择器的规则，并使用复合选择器在HTML中选择元素

1.1 复合选择器

1. 后代选择器: 空格

   • 作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素，设置样式

   • 选择器语法：选择器1 选择器2 {属性名:属性值;}

     ul li {
         color: red;
     }
     

   • 结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

   • 注意点：

     • 后代包括：儿子、孙子、重孙子……
     • 后代选择器中，选择器与选择器之前通过空格隔开

2. 子代选择器: >

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

   • 选择器语法：选择器1>选择器2 {属性名:属性值;}

     p>strong {
         color: blue;
     }
     

   • 结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

   • 注意点：

     • 子代只包括：儿子
     • 子代选择器中，选择器与选择器之前通过>隔开

1.2 并集选择器

1. 并集选择器: ,

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

   • 选择器语法：选择器1, 选择器2 {属性名:属性值;}

     h1,
     p {
         color: blue;
     }
     

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

   • 注意点：

     • 并集选择器中的每组选择器之间通过 , 分隔
     • 并集选择器中的每组选择器可以是基础选择器或者复合选择器
     • 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

1.3 交集选择器

1. 交集选择器: 紧挨着

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

   • 选择器语法：选择器1选择器2 {属性名:属性值;}

     p.big {
         font-size: 20px;
     }
     

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

   • 注意点：

     • 交集选择器中可以同时写多个选择器，多种选择器，选择器之间紧挨着的，没有东西分隔
     • 如果交集选择器中有标签选择器，此时标签选择器必须写在第一个

1.4 hover伪类选择器

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

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

  a:hover {
      color:pink;
  }
  

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

1.5 emmet语法

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

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

  作用	示例	记忆	效果
  生成普通标签	p + Tab	标签名	<p></p>
  生成普通标签+类名	.nav + Tab	类选择器	<div class=“nav”></div>
  生成普通标签+id属性	#center + Tab	id选择器	<div id=“center”></div>
  生成指定标签+类名+id选择器	p.red#center	交集选择器	<p class=“red” id=“center”></p>
  生成子代	ul>li	子代选择器	<ul><li></li><ul>
  生成内部文本	ul>li{我是li的内容}	大括号	<ul><li>我是li的内容</li><ul>
  同时创建多个	ul>li*3	星号+个数	<ul><li><li><li></li></li></li><ul>

1.6 选择器进阶总结

• 选择器（selector）用于选择出一部分元素进行样式设置

  选择器	作用	格式	示例
  后代选择器	找后代	选择器之间通过空格分隔	.father . son { css }
  子代选择器	找儿子	选择器之间通过>分隔	.father > . son { css }
  并集选择器	找到多类元素	选择器之间通过,分隔	div , p , span { css }
  交集选择器	找到同时满足多个选择器的元素	选择器之间紧挨着	p.red { css }
  hover伪类选择器	选中鼠标悬停在元素上的状态	:hover	a:hover { css }