CSS选择器

Posted on 2017-07-19 15:20  君莫笑~  阅读(146)  评论(0)    收藏  举报

一、后代选择器

1、后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

2、简单列子　　　　

<style type="text/css">
h1 em {color:red;}
</style>

<body>
  <h1>我<em>是</em> 后代选择器</h1>
  <p>我<em>不是</em>后代选择器</p>
</body>
    后代选择器会把作为 h1 元素后代的 em 元素的文本(是)变为红色。其他 em 文本（不是）（如段落或块引用中的 em）则不会被这个规则选中
    补充：  em元素：强调文本，通常以斜体显示。此元素是内嵌元素，需要关闭标签。

3、有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限   
   将样式写为 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。即I am 1-3,I am 1-3-1,I am 1-3-2的字体颜色将变为红色。
<style type="text/css">
   ul em {color:red;}
</style>
</head>

<body>
<ul>
  <li>I am 1
    <ol>
      <li>I am 1-1</li>
      <li>I am 1-2</li>
      <li><em>I am 1-3
        <ol>
          <li>I am 1-3-1</li>
          <li>I am 1-3-2</em></li>
          <li>I am 1-3-3</li>
        </ol>
      </li>
      <li>I am 1-4</li>
    </ol>
  </li>
  <li>I am 2</li>
  <li>I am 3</li>
</ul>
</body>


二、子元素选择器

1、与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。


2、简单列子




<style type="text/css">


　h1 > strong {color:red;}  


</style>

<body>


　　　　<h1>我是一个<strong>健康</strong> <strong>快乐</strong>的男生。</h1>
　　　　<h1>我是一个<em>喜欢滑板<strong>篮球</strong></em>的男生。</h1>


</body>




　　　　子元素选择器会把第一个 h1 下面的两个 strong 元素（健康，快乐）变为红色，但是第二个 h1 中的 strong （喜欢滑板，篮球）不受影响　　　　　　

　　　　补充：strong以粗体显示文本。此元素是内嵌元素，需要关闭标签。




三、相邻兄弟选择器
1、相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
2简单列子
　　　　　




<style type="text/css">
　　h1 + p {color:red;}　　　　　　这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
 </style> 

<body> 　　　　


　　<h1>我是男生1</h1> 　　　　


　　<p>我是男生2</p>

　　<p>我是男生3</p> 　　　　


</body>
　






3、另一种情况（我是男生2和我是男生3字体颜色将变为红色）






<style type="text/css">
    p + p {color:red;}
</style>
</head>

<body>

    <div>
        <p>我是男生1</p>
        <p>我是男生2</p>
        <p>我是男生3</p>
    </div>

</body>