css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性。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;}

css继承样式怎么控制?用选择器的更多相关文章

  1. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  2. css文本样式及控制文本的大小写

    常用文本样式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. web前端篇:CSS使用,样式表特征,选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  4. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  5. Day5 CSS基本样式和C3选择器

    Day5 CSS基本样式和C3选择器 一.背景属性 1.背景颜色            background-color:transparent(默认值,透明); 颜色的取值:            ...

  6. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  7. 用JS控制CSS基本样式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...

  8. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  9. HTML&CSS基础-样式的继承

    HTML&CSS基础-样式的继承 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...

随机推荐

  1. 【转】在xcode5中修改整个项目名

    本文转载自:http://www.cnblogs.com/tbfirstone/p/3601541.html 总会遇到几个项目,在做到一半的时候被要求改项目名,网上找了下相关的资料,大多数是xcode ...

  2. Android实现电话录音功能

    需求分析 电话录音是在通话的时候进行录音,所以需要使用一个服务来完成功能. 需要监听电话的状态,分为三种状态:  空闲状态 TelephonyManager.CALL_STATE_IDLE 响铃状态 ...

  3. mysql性能调整三板斧

    大意是,用2/8原则,多快好省的解决大部分事情.所以三板斧,仅限整体调整,不牵扯具体细节. 1.innodb 使用innodb引擎 2.innodb_buffer_pool 调整和innodb有关的参 ...

  4. distri.lua线程间通信的设计

    首先简单介绍下distri.lua中的线程设计方案. distri.lua提供一个API函数fork用于创建新的C线程,这个C线程运行独立的lua虚拟机,为了在各线程之间通信 每个线程都会创建一个ch ...

  5. 【laravel5.6】 laravel 执行 php artisan route:cache 报错 Unable to prepare route [/] for serialization. Uses Closure.

    laravel 在部署的时候.需要优化路由加载,执行命令 php artisan route:cache 报错了.如下 这个异常的错误信息,提示的已经非常明确了:大概意思就是说在闭包里边,是不能够进行 ...

  6. cmus 命令行播放器使用

    安装 sudo eopkg it cmus 启动 cmus 设置输出 :set output_plugin=pulse 导入本地音乐 :add /home/your_username/Music 查看 ...

  7. zgrep用法

    http://manpages.ubuntu.com/manpages/trusty/man1/zgrep.1.html NAME Zgrep - search compressed files fo ...

  8. 使用ELK收集分析MySQL慢查询日志

    参考文档:https://www.cnblogs.com/bixiaoyu/p/9638505.html MySQL开启慢查询不详述 MySQL5.7慢查询日志格式如下 /usr/local/mysq ...

  9. H. GSS and Simple Math Problem 高精度乘法模板

    链接:https://www.nowcoder.com/acm/contest/104/G来源:牛客网 题目描述 Given n positive integers , your task is to ...

  10. listview控件专题

    listview控件加CheckBox 窗口load: listViewLayersName.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderS ...