时间:2021-05-08
之前学习了css的一些基础选择器,然而今天要介绍css的复杂选择器,复杂选择器一共有三种
1.父子(派生)选择器
<div class="wrapper"> <strong class="box"> <em>234</em> </strong></div><em>123</em>此时要使234有颜色,需要用到父子选择器,虽说用之前的标签选择器可以让它有颜色,但是123也会有颜色,所以用到为父子关系的父子选择器,这样就可以精确的让234变色而不使123变色,使用的方法就是父级标签+空格+子级标签,例如
div strong em{ backgroud-color:red;}这样234所在位置背景颜色为红,但是123所在位置不满足父子关系,所以123所在背景不会变红;(当然不一定只能用标签选择器连接,也可以用class选择器等,只取决于是否满足父子关系,与连接选择器无关)
2.直接子元素选择器
<div> <em>123</em> <strong> <em>456</em> </strong></div>表示直接一级关系的子元素,例如这里的123是div下面直接的一个em里面,所以称这个em是div的直接子元素,通过这种方式修饰,只会让123变色,而456不会变色,使用的方法是
div > em {background-color:red;}通过 “>” 连接,这表示对div的直接子元素em里面的内容进行修饰。
3.并列选择器
<div> 1 </div><div class="demo"> 2 </div><p class="demo"> 3 </p>这个时候要想2变色而其他的不变色,用标签选择器、属性选择器是办不到的(当然可以用加id选择器),所以这个时候就需要并列选择器,就是通过两个并列的元素来找到修饰对象,从而进行修饰。使用方法如下:
div.demo{ background-color:red;}并列选择器(多个选择条件选中一个对象)具有它的独特性(与其他元素不一样),方法是两个或两个以上的选择方法不加空格连接在一起。
]
使用复杂选择器需要考虑权重问题,同一排的标签,权重值可以直接相加
接下来是css字体样式和颜色的一些简单属性;
其中字体属性值可参考词典www.css88.com,颜色属性一般不会用纯英文单词式,因为它具有限制性(单词是什么,颜色就是什么,不会有什么乳白,象牙白之类的,它只有白色),颜色代码和颜色函数相对灵活,改变范围很大。颜色函数后面的值美工会提供给我们前端,rgb调色表可以在网上搜索。
今天就先介绍css的这两种代码,刚刚提供的那个网站对我们前端学习者帮助很多,大家可以直接点击进入,其他的以后会陆续写上去,写得不好,大家见谅!
总结
以上所述是小编给大家介绍的css复杂选择器及css字体样式、颜色属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
第3讲CSS何为CSSCSS的几种设置方式样式规则选择器样式规则的注释与有效范围样式属性详解什么是CSS和CSS的设置方式作者:Loncer更多学习资源尽在:w
什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器、属性选择器、组合选择器与伪类选择器四个大类!css基本
CSS选择器如下: 1.标签名选择器div{color:Red;}/即页面中的各个标签名的css样式 2.类选择器.divClass{color:Red
CSS:内联样式表标签内直接加style=””嵌入式样式表定义在标签外部样式表选择器:HTML选择器:接在html标签后加css如:p{color:red}cl
复制代码代码如下:[selector]{[property]:[value];[]}[选择器]{[属性]:[值];[]}编写CSS样式时,我习惯遵守这些规则:c