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的这两种代码，刚刚提供的那个网站对咱们前端学习者帮助不少，你们能够直接点击进入，其余的之后会陆续写上去，写得很差，你们见谅！