之前学习了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能解决什么问题，相关知识有哪��

  CSS SandBox能解决什么问题，相关知识有哪��

• flex和position使用常见的兼容性问题怎么解决

  这篇文章主要介绍了详解flex和position兼容采坑笔记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS圆形的进度条是怎样做的��

  CSS圆形的进度条是怎样做的？进度条的效果大家应该比较常见，这一效果的好处就是可以比较明显的反映实现的进度的多少，比较常见的有条线进度条、圆形进度条等等，今天我们就主要来了解圆形进度条的实现��

• CSS浮动具备哪些特性，浮动应用有哪些要注意��

  浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为歀��这篇文章主要介绍了浅谈CSS浮动的特性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• CSS的rotate函数的作用和用法是什��

  rotate函数定义了一种将元素围绕一个定点旋转而不变形的转捀��指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋��180°也被称为点反射��