1、

    1. <style>
    2.         /* E + F */
    3.         /* 下一个满足条件的兄弟元素节点 */
    4.       div + p{
    5.           background-color: red;
    6.       }
    7.     </style>
    8. </head>
    9. <body>
    10.    <div>div</div>
    11.    <p class="demo">1</p> 
    12.     //p为红色
    13.    <p>2</p>
    14.    <p>3</p>
    15. </body>

    2、

     <style>
        /* E ~ F */
        /* 下一堆满足条件的兄弟元素节点 */
      div ~ p{
          background-color: green;
      }
    </style>
</head>
<body>
   <div>div</div>
   <p class="demo">1</p>
   <p>2</p>
   <p>3</p>
   <ul>
       <li>
           <p>4</p>
       </li>
   </ul>
</body>

    3、

     <style>
       div[data='a']{
           /* div[data]也可这么写 */
           background-color: green;
       }
    </style>
</head>
<body>
   <div class="demo" data="a">data</div>
   <div></div>
</body>

    4、

     <style>
      div[data~='a'] {
          /* ~:选择data里面单独存在a，或者a的左右用空格分开，没有别的字符 */
        background-color: red;
      }
    </style>
</head>
<body>
   <div data="a">1</div>
   <div data="b">2</div>
   <div data="a b">3</div>
   <div data="aa b c">4</div>
</body>

    5、

     <style>
      div[class|='a'] {
          /*|:选择以a开头，或者以a-开头的元素 */
        background-color: red;
      }
    </style>
</head>
<body>
   <div class="a">1</div>
   <div class="a-test">2</div>
   <div class="b-test">3</div>
</body>

    6、

      <style>
      div[class^='a'] {
          /*^:选择以a开头的元素(只要是a都选择)，12都红 */
        background-color: red;
      }
    </style>
</head>
<body>
   <div class="a">1</div>
   <div class="a-test">2</div>
   <div class="b-test">3</div>
</body>

    7、

     <style>
      div[class$='a'] {
          /*$:选择以a结尾的元素 */
        background-color: red;
      }
    </style>
</head>
<body>
   <div class="a">1</div>
   <div class="a-test">2</div>
   <div class="b-test">3</div>
</body>

    8、

    <style>
      div[class*='st'] {
          /* *:选择只要有st的元素都选择 */
        background-color: red;
      }
    </style>
</head>
<body>
   <div class="a">1</div>
   <div class="a-test">2</div>
   <div class="b-test">3</div>
</body>

    9、

    <style>
     input{
         border: 1px solid black;
     }
     input::placeholder{
         /* input::-webkit-placeholder :要兼容可以这样写*/
         color: green;
     }
    </style>
</head>
<body>
  <input type="text" placeholder="请输入用户名">
</body>

    10、

     <style>
    div:nth-of-type(1)::selection{
        /* 改变鼠标选中后的样式 */
        color: #fff;
        background-color: #fcc;
        text-shadow: 3px 5px black;
        /* text-shadow:文字有阴影 */
    }
    div:nth-of-type(2)::selection{
        color: yellow;
        background-color: green;
    }
    </style>
</head>
<body>
 <div>成哥很帅</div>
 <div>邓哥也很帅</div>
</body>