css复杂选择器及css字体样式、颜色属性详解
我要评论之前学习了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的focus-within选择器的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-05-11
这篇文章主要介绍了CSS选择器中的正则表达式使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-03-11
这篇文章主要介绍了巧用CSS属性值正则匹配选择器,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2020-03-11- 这篇文章主要介绍了css选择器四大类：基本、组合、属性、伪类的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-14
这篇文章主要介绍了详解如何使用CSS3中的结构伪类选择器和伪元素选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面2020-01-06- 这篇文章主要介绍了CSS3 新增选择器的实例,需要的朋友可以参考下2019-11-13
如果说 css 作为前端开发的基本功, 那么 "选择器" 就是基础中的基础，本文介绍了css3 伪类选择器快速复习，文中通过示例代码介绍的非常详细，对大家的学习或者工2019-09-10- 这篇文章主要介绍了CSS 样式的使用方式、选择器 的相关资料,需要的朋友可以参考下2019-08-12
CSS 选择器在实践中是非常常用的，无论是在写样式上或是在 JS 中选择 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作组继续为选择器标准添加了更丰富的选择器。需2018-12-24
这篇文章主要介绍了CSS 中的六个重要选择器(三秒就可以记住),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-27
最新评论