H5-23 关系选择器

关系选择器分为：后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器

1、后低选择器

　　定义：选择所有被E元素包含的F元素，中间用空格隔开

　　语法：

             E F {}

 

　　　　<ul>

  　　　　  <li>1</li>

   　　　　 <li>2</li>

   　　　　 <li>3</li>

　　　　</ul>

　　　　

 　　<ol>

            　　<li>4</li>

            　　<li>5</li>

            　　<li>6</li>

        </ol>

 

 

 ul li{

            color: red;

        }

 

2、子代选择器

定义：选择所有作为E元素的直接元素F，对更深一层的元素不起作用，用>表示

语法：

E>F{}

 

    <div>

     <p>222</p>

    </div>

    <ul>

        <li>1</li>

    </ul>

 

 div>p{

            color: red;

        }

3、 相邻兄弟选择器

定义：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素只能向下选择

语法：

E+F{}

 

    <p>4</p>

    <h3>1</h3>

    <p>2</p>

    <p>3</p>

 

h3+p{

            color: red;

        }

 

4、通用兄弟选择器

定义：选择E元素之和的所有兄弟元素F，作用于多个元素，用

~隔开，只能向下选择

语法：

E~F{}

 

    <p>5</p>

    <h3>1</h3>

    <p>2</p>

    <p>3</p>

    <p>4</p>

 

 h3~p{

            color: red;

        }