li:has(a)와 li a 의 차이점

1. li:has(a)

    - 모든 li중에 a 엘리먼트를 가지고 있는 li 엘리먼트를 선택한다.

2. li a

    - li 엘리먼트에 포함된 모든 a 엘리먼트를 선택한다.

예)

<li><a href="http://jquery.com">jQuery supports</a>
    <ul>
      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
</li>

1. li:has(a) 의경우

    - <li><a href="http://jquery.com">jQuery supports</a>

      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>

이렇게 4개의 li 엘리먼트가 선택되어진다.

2. li a 의 경우

    - <a href="http://jquery.com">jQuery supports</a>

       <a href="css1">CSS1</a>

       <a href="css2">CSS2</a>
      <a href="css3">CSS3</a>

이렇게 4개의 a 엘리먼트가 선택되어진다.