<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      div p {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>段落1在div中。</p>
      <p>段落2div中。</p>
    </div>
    <p>段落3不在div中。</p>
    <p>段落4不在div中。</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      div>p {
        background-color: #FF0000;
      }
    </style>
  </head>
  <body>
    <h1>网页的第一个标题</h1>
    <div>
      <h2>姓名：张三</h2>
      <p>性别：男</p>
    </div>
    <div>
      <span><p>联系电话：1234567890</p></span>
    </div>
    <p>张三是我的好朋友！！！</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      div+p {
        background-color: #FF0000;
      }
    </style>
  </head>
  <body>
    <h1>文章标题</h1>
    <div>
      <h2>div内部标题</h2>
      <p>div内部段落</p>
    </div>
    <p>div之后的第一个p元素</p>
    <p>div之后的第二个p元素</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      div~p {
        background-color: #FF0000;
      }
    </style>
  </head>
  <body>
    <h1>文章标题</h1>
    <div>
      <p>段落1在div中。</p>
      <p>段落2div中。</p>
    </div>
    <p>段落3不在div中。</p>
    <p>段落4不在div中。</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      a:link {color: blue;}
      a:visited {color: purple;}
      a:hover {color: red;}
      a:active {color: green;}
    </style>
  </head>
  <body>
    <p><b><a href="https://www.runoob.com" target="_blank">这是一个链接</a></b></p>
    <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
    <p><b>注意：</b> a:active 必须在 a:hover 之后。
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p:first-child {
        color: #0000FF;
      }
    </style>
  </head>
  <body>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p>i:first-child {
        color: #0000FF;
      }
    </style>
  </head>
  <body>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p:first-child i {
        color: #0000FF;
      }
    </style>
  </head>
  <body>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      q:lang(no) {
        quotes: "~" "~";
      }
    </style>
  </head>
  <body>
    <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
    <p>在这个例子中, :lang定义了q元素的值为lang =“no”</p>
    <p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      input:focus {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <form action="https://www.baidu.com">
      账号：<input type="text" name="user" /><br />
      密码：<input type="password" name="password" /><br />
      <input type="submit" name="..." value="登录" />
    </form>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p::first-line {
        color: #FF0000;
        font-size: small;
      }
      p::first-letter {
        color: #0000FF;
        font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      h1::before {
        content: url(img/images/tx.jpg);
      }
      h2::after {
        content: url(img/images/tx.jpg);
      }
    </style>
  </head>
  <body>
    <h1>图片插入到了标题之前</h1>
    <h2>图片插入到了标题之后</h2>
  </body>
</html>