zoukankan      html  css  js  c++  java
  • css继承样式怎么控制?用选择器

      css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性。css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。

    css样式继承性

      哪些css样式属性是可以继承的?

    azimuth, border-collapse, border-spacing,caption-side, color, cursor, direction, elevation,empty-cells, font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height, list-style-image, list-style-position,list-style-type, list-style, orphans, pitch-range,pitch, quotes, richness, speak-header, speaknumeral,speak-punctuation, speak, speechrate,stress, text-align, text-indent, texttransform,visibility, voice-family, volume, whitespace,widows, word-spacing

      其中可以继承的文本属性为font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height

      可以继承的列表相关属性为list-style-image, list-style-position,list-style-type, list-style

      相关阅读(w3school中的专业术语)

      CSS 派生选择器:通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

    li strong {
        font-style: italic;
        font-weight: normal;
      }

      在上面的例子中,只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id,代码更加简洁。

      后代选择器(descendant selector)又称为包含选择器。后代选择器可以选择作为某元素后代的元素。假设有一个文档,其中有一个边栏(sidebar),还有一个主区(maincontent)。边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表。不能把所有链接都设置为蓝色,因为这样一来边栏中的蓝色链接都无法看到。

    div.sidebar {background:blue;}
    div.sidebar a:link {color:white;}
    div.maincontent {background:white;}
    div.maincontent a:link {color:blue;}

      有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。

    <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>
        </ol>
      </li>
      <li>List item 2</li>
    </ul>

      子元素选择器(Child selectors),与后代选择器相比,只能选择作为某元素子元素的元素。如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

    h1 > strong {color:red;}

      这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:

    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>

      CSS 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

    h1 + p {margin-top:50px;}
  • 相关阅读:
    jquery序列化form表单使用ajax提交后处理返回的json数据
    log4net VS2012 日志layout自定义,error日志和info日志分别记录到不同文件中
    Bootstrap 填坑1 栅格浮动问题
    C# MVC Transaction 事务
    C# MVC 用户登录状态判断
    SQL中MAX()和MIN()函数的使用
    简单表的 分页存储过程 (不支持多表连接)
    SQL Server 生成数据库代码,包含数据
    js 将数值显示为金额
    Jquery.Validate 扩展方法
  • 原文地址:https://www.cnblogs.com/ytkah/p/5706350.html
Copyright © 2011-2022 走看看