搜索

首页 >web前端 >css教程 >CSS的后代选择器基础使用示例详解

CSS的后代选择器基础使用示例详解

高洛峰
高洛峰原创
2017-03-07 14:43:392099浏览

基础

来看一个后代选择器的最简单写法，strong标签属于p标签的后代，i标签属于strong标签后代：
HTML代码：

<p>
    my name is <strong>li<i>daze</i></strong>, hahah.   
</p>

CSS代码：

p strong {   
    font-size: 30px;   
}   
p i {   
    font-size: 40px;   
}

1、在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。
2、选择器之间的空格是一种结合符。
3、后代选择器，后代的层次间隔可以是无限的，注意与子元素选择器的区别。

示例1

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}     
</style>
</head>

<body>
<ul>
  <li>List item 1     
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3     
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

执行效果：
CSS的后代选择器基础使用示例详解

示例2

<html>
<head>
<style type="text/css">
p.sidebar {width:100px;height:100px;background:blue;}     
p.maincontent {width:100px;height:100px;background:yellow;}     

p.sidebar a:link {color:white;}     
p.maincontent a:link {color:red;}     
</style>
</head>
<body>
<p class=&#39;sidebar&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>

<p class=&#39;maincontent&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>
</body>
</html>

执行效果
CSS的后代选择器基础使用示例详解

一点说明：


XML/HTML Code复制内容到剪贴板

  1. a:link {color: #FF0000}         /* 未访问的链接 */     

  2. a:visited {color: #00FF00}  /* 已访问的链接 */     

  3. a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */     

  4. a:active {color: #0000FF}   /* 选定的链接 */    


更多CSS的后代选择器基础使用示例详解相关文章请关注PHP中文网！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：CSS的子元素选择器用法详细介绍下一篇：css实现三角的简单实例详解

相关文章

查看更多