CSS复合选择器——CSS学习笔记（7）

7复合选择器

• 对基础选择器进行组合

7.1后代选择器（重要）

• 可以选择父元素里面的任意子元素
• 例：将ol中的li标签改为粉色

  ol li {
      color: pink;
  }
  

• 注意：第二个元素只要是第一个元素的后代元素即可，即孙子元素也可以。
• 例：将ol标签中的li标签中的a标签改为红色
  • 方法一：

  ol li a {
    color: red;
  }
  

  • 方法二：

  ol a {
    color: red;
  }
  

• 注意：元素可以是任意的基础选择器
• 例：将引用了nav类的ul标签中的li标签中的a标签改为黄色

  .nav li a {
    color: yellow;
  }
  

7.2子选择器（重要）

• 只能选择某元素的最近一级子元素
• 语法：元素1（父元素） > 元素 2（亲儿子元素）{}
• 例：将

  <div class="hot">
    <a href="#">椅子</a>
    <ul>
        <li><a href="#">桌子</a><li>
    </ul>
  </div>
  

  中的文字“椅子”改为红色：

  .hot>a {
    color: red;
  }
  

7.3并集选择器

• 可以选择多组标签
• 例：将

  <div>テレビ</div>
  <p>ラジオ</p>
  

  中的“テレビ”“ラジオ”同时改为红色：

  div,
  p {
    color: red;
  }
  

• 元素可以是任意选择器
• 例：

  div,
  p,
  .pig li {
    color: red;
  }
  

7.4伪类选择器

• 向某些选择器添加特殊的效果，以:开头

7.4.1 链接伪类选择器

• a:link
  • 选择所有未被访问的链接
  • 例：将未访问过的链接选出并设置为黑色、无下划线

  a:link {
    color: #333;
    text-decoration: none;
  }
  

• a:visited
  • 选择所有已被访问的链接
  • 例：访问过后该链接就会变成橙色

  a:visited {
    color: orange;
  }
  

• a:hover
  • 选择鼠标指针位于其上的链接
  • 例：光标指针悬停在链接上时就会变为天蓝色

  a:hover {
    color: skyblue;
  }
  

• a:active
  • 选择活动链接（鼠标按下未弹起的链接）
  • 例：鼠标按下链接且未弹起时链接变为绿色

  a:active {
    color: green;
  }
  

• 注意：css声明要按照LVHA的顺序进行书写（即按前面四个例子的顺序），否则可能会失效
• 注意：要给链接单独指定样式。即如果指定了body标签的样式，即使a标签在body内，body的样式也无法作用于a标签。
• 一般开发中的用法：

  a {
    color: gray;
    text-decoration: none;
  }
  a:hover {
    color: #369;
    text-decoration: underline;
  }
  

7.4.2:focus伪类选择器

• 用于选取获得焦点的表单元素
• 例：当input元素获得光标时的背景颜色变为黄色，文字变成红色（若输入完成光标离开时，变回原本的样子）

  input:focus {
    background-color: yellow;
    color: red;
  }