css继承样式怎么控制?用选择器
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继承样式怎么控制?用选择器的更多相关文章
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- css文本样式及控制文本的大小写
常用文本样式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- web前端篇:CSS使用,样式表特征,选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
- Day5 CSS基本样式和C3选择器
Day5 CSS基本样式和C3选择器 一.背景属性 1.背景颜色 background-color:transparent(默认值,透明); 颜色的取值: ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- 用JS控制CSS基本样式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...
- 【css学习整理】css基础(样式,语法,选择器)
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...
- HTML&CSS基础-样式的继承
HTML&CSS基础-样式的继承 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...
随机推荐
- How to get all Errors from ASP.Net MVC modelState?
foreach (ModelState modelState in ViewData.ModelState.Values) { foreach (ModelError error in modelSt ...
- Git 修改远端仓库地址
方法有三种:1.修改命令git remote set-url origin [url] 例如:git remote set-url origin gitlab@gitlab.chumob.com:ph ...
- Android手机用KSWEB搭建Web服务器成功安装WordPress
之前部落分享的几个免费Web服务器软件都是用来安装在本地电脑上,搭建Apache.PhpMyAdmin.MySQL等网站运行环境,然后我们就可以在电脑上测试运行Wordpress.Discuz! 论坛 ...
- officewebapps 服务器部署问题
officewebapps 服务器部署问题 部署文档 http://technet.microsoft.com/zh-cn/library/jj219455 New-OfficeWebAppsFarm ...
- 关于linux Centos 7一个网卡配置多个IP的方法
有时我们在工作中,会遇到一个网卡配置多个ip的情况,尤其是在linux服务器方面的应用教多 于是笔者将其配置过程整理如下,希望能帮到遇到同样问题的朋友,这里以vmware虚拟机下的Centos 7为例 ...
- angular ng-repeat中DOM的重新渲染机制(项目中遇到问题)
昨天在项目中遇到一个问题:文本框中输入值只要变化就要请求接口获取数据赋值给couponData,这样性能不好.所以和服务器端沟通改成了服务器端一次性返回所有数据,这样前端只要获取一次数据然后保存在对象 ...
- 170829、mybatis使用oracle和mybatis中批量更新
一.mybatis执行批量更新batch update 的方法(mysql数据库) 1.数据库连接必须配置:&allowMultiQueries=true(切记一定要加上这个属性,否则会有问题 ...
- 使用介质设备安装 AIX 以通过 HMC 安装分区
使用介质设备安装 AIX 以通过 HMC 安装分区 原文:https://www.ibm.com/support/knowledgecenter/zh/ssw_aix_72/com.ibm.aix.h ...
- easyui tree 更改图标
easyui tree 更改图标 ,onLoadSuccess: function (node, data) { $('#tt .tree-icon').css("background&qu ...
- easyui datagrid 去掉外边框及行与行之间的横线标题字体
这是以前写的一个项目中写的东西,为了让datagrid样式好看,所有做的这个处理: 今天同事又问到于是记录下来 $('#id').datagrid({ width: '99%', height: 15 ...