css3兄弟选择器

兄弟选择器:

  1. 相邻兄弟选择器
    匹配的相邻的元素 - 当前元素的【后面的一个】元素,前提必须有相同的父元素
    语法:selector1+selector2
    2. 通用兄弟选择器
    匹配当前元素的【后面的所有兄弟】元素
    语法:selector1~selector2
    回顾:
  2. 元素选择器 元素名{}
  3. class 类选择器 .类名{}
  4. id选择器 #id名{}
  5. 通用选择器
  6. 选择器1,选择器2,… 群组选择器
  7. 选择器1>选择器2 父子选择器
  8. 选择器1 选择器2 后代选择器

<html>
<head>
    <title> 兄弟选择器 title>
    <meta charset="utf-8" />
    <style>
        .first~div{
      //.first+div
            color:blue;
        }
    style>
head>
<body>
    <p class="first">This is the top pp>
    <div id="d1">This is the first divdiv>
    <h1>This is the Header 1
        <div>h元素中的divdiv>
    h1>
    <p class="final">This is the bottom p 你好世界p>
    <p>
        This is the second p
    p>
    <h2>this is h2h2>
    <div class="div1">h2 后面的 divdiv>
body>
html>

你可能感兴趣的:(css3,css3)