CSS复杂选择器有哪些,其常见的属性如何用
Admin 2022-06-02 群英技术资�
之前学习了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字体样式和颜色的一些简单属性;
div{ font-size:30px; <!--字体大小(改变的是高度)--> font-weight:bold; <!--字体粗细(strong标签自带font-weight属性)--> font-style:italic; <!--em标签的css样式--> font-family:arial; <!--字体样式--> color:green; <!--纯英文单词式--> color:ff00ff; <!--颜色代码--> color:rgb(25,25,25); <!--颜色函数--> }
其中字体属性值可参考词典www.css88.com,颜色属性一般不会用纯英文单词式,因为它具有限制性(单词是什么,颜色就是什么,不会有什么乳白,象牙白之类的,它只有白色),颜色代码和颜色函数相对灵活,改变范围很大。颜色函数后面的值美工会提供给我们前端,rgb调色表可以在网上搜索�
今天就先介绍css的这两种代码,刚刚提供的那个网站对我们前端学习者帮助很多,大家可以直接点击进入,其他的以后会陆续写上去,写得不好,大家见谅�
总结
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
CSS SandBox能解决什么问题,相关知识有哪�
这篇文章主要介绍了详解flex和position兼容采坑笔记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
CSS圆形的进度条是怎样做的?进度条的效果大家应该比较常见,这一效果的好处就是可以比较明显的反映实现的进度的多少,比较常见的有条线进度条、圆形进度条等等,今天我们就主要来了解圆形进度条的实现�
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为歀这篇文章主要介绍了浅谈CSS浮动的特性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
rotate函数定义了一种将元素围绕一个定点旋转而不变形的转捀指定的角度定义了旋转的量度。若角度为正,则顺时针方向旋转,否则逆时针方向旋转。旋�180°也被称为点反射�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078