<div class="my-element">
  <p>这是一段文字</p>
  <p>
    <a href="https://www.webhek.com">
      我的博客网站
    </a>
  </p>

  <label for="wut_email">
    你的邮件地址:
  </label>
  <input type="email" id="wut_email" />
</div>

/*
  A normal (though ugly) focus
  pseudo-class.  Any element that 
  can receive focus within the 
  .my-element parent will receive
  a yellow background.
*/
.my-element *:focus {
  background: yellow !important;
  color: #000;
}

/*
  The :focus-within pseudo-class
  will NOT style the elements within
  the .my-element selector, like the
  normal :focus above, but will 
  style the .my-element container
  when its focusable children 
  receive focus.
*/
.my-element:focus-within {
  outline: 3px solid #333;
}

.my-element {
  border: 1px solid #777;
  max-width: 500px;
  margin: auto;
  background-color: #fefefe;
  padding: 20px;
  
  p {
    margin: 0 0 1em;
  }
  
  input[type="email"] {
    margin-top: .5em;
    font-size: inherit;
    border: 1px solid #555;
    width: 100%;
  }
}



body {
  background: #ccc;
  font-family: arial;
line-height:2;
}