css复杂选择器及css字体样式、颜色属性详解

所属分类: 网页制作 / CSS 阅读数: 1739
收藏 0 赞 0 分享

之前学习了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的这两种代码,刚刚提供的那个网站对我们前端学习者帮助很多,大家可以直接点击进入,其他的以后会陆续写上去,写得不好,大家见谅!

以上所述是小编给大家介绍的css复杂选择器及css字体样式、颜色属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

更多精彩内容其他人还在看

简单总结CSS3中视窗单位Viewport的常见用法

这篇文章主要介绍了CSS3中视窗单位Viewport的常见用法,包括视窗的高度宽度及垂直居中等基本设定方法,需要的朋友可以参考下
收藏 0 赞 0 分享

实例讲解如何使用CSS保持页面内容宽高比

这篇文章主要介绍了如何使用CSS保持页面内容宽高比的方法,作者举了伪元素和vw单元等不同方法下的例子,需要的朋友可以参考下
收藏 0 赞 0 分享

谈谈你对css中position五个属性的理解

position有五个属性: static | relative | absolute | fixed | inherit,也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解,感兴趣的朋友跟着本
收藏 0 赞 0 分享

分享CSS代码写法优化方案

众所周知,SEO优化很重要的一点就是布局,而DIV+CSS布局优于TABLE,接下来为大家简单介绍一下CSS代码写法优化,对css代码优化相关知识感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

CSS3 flex布局之快速实现BorderLayout布局

所谓的布局管理器分为好多种,最常见的有流式布局管理器(FlowLayout)、边界布局管理器(BorderLayout)和表格布局管理器(GridLayout)。本文给大家介绍CSS3 flex布局之快速实现BorderLayout布局,感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

CSS基础教程十九之CSS图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接。今天就来做几个简单的实例展示现在流行的DIV+CSS布局的方便好用之处
收藏 0 赞 0 分享

使用CSS3的appearance属性改变元素的外观的方法

大家都知道每个浏览器对HTML元素渲染都不一样,比如说button,在chrome和ff中,渲染出来的效果都是不尽相同的。这样一来就有了今天这个思路,利用浏览器的对元素的默认渲染风格,我们可以使用appearance属性对任何元素的渲染风格改变
收藏 0 赞 0 分享

CSS毛玻璃效果如何实现

毛玻璃其实就是磨砂玻璃,能够模糊的看清背后的风景,让人感觉有种朦胧美,让界面看上去有些层次感,对毛玻璃感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

使用CSS实现中间镂空的图片遮罩效果

这篇文章主要介绍了使用CSS实现中间镂空的图片遮罩效果的方法,文中同时附带介绍了一个用CSS3实现的镂空一个圆形的代码示例,需要的朋友可以参考下
收藏 0 赞 0 分享

小议Data URI scheme及其在CSS中的相关使用

这篇文章主要介绍了Data URI scheme及其在CSS中的相关使用,文中主要针对其在图片显示方面的应用,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多