前端第七天 More CSS Concepts

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

今天学了一些更高级的CSS知识。

---

一、Target Selectors

除了针对特定类的选择器，还有很多其他复杂的选择器。

1. Direct Child
   直接的父子关系。下例即为一个p标签为div的子节点，且中间没有别的父子关系插入。

<style>
	div > p{
     background: #ddd;
   }
</style>

2. Direct After
   紧挨着选择器。即为两个节点是兄弟节点，对于加号后节点的样式。下例即为对p。

<style>
	div + p{
     background: #333;
     color: #fff;
   }
</style>

3. By attribute
   对于一些元素，可以对其是否有某些属性和属性的值来设定样式。
   如下例，分别对有target属性的a元素和type属性为特定值的input元素进行样式的设定。

<style>
	a[target]{
     background: red;
     color: white;
   }
   /* Specific attribute values */
   input[type='text'],
   input[type='email']{
     width: 100%;
     margin-bottom: 5px;
   }
</style>

二、nth child

想要找到某个特定的孩子节点。

1. First-child

<style>
	li:first-child{/*针对li元素的第一个孩子节点*/
     background: red;
   }
</style>

2. Last-child

<style>
	li:last-child{/*针对li元素的最后一个孩子节点*/
     background: red;
   }
</style>

3. Position 3

<style>
	li:nth-child(3){{/*针对li元素的第三个孩子节点*/
     background: purple;
   }
</style>

4. Every 3

<style>
	li:nth-child(3n){/*针对li元素的所有3n(n>=1)个孩子节点*/
     background: orange;
   }
</style>

5. Every 3 after 7

<style>
	li:nth-child(3n+7){/*针对li元素的所有3n+7(n>=0)个孩子节点,*/
     background: yellow;
   }
</style>

6. Every odd

<style>
	li:nth-child(odd){/*针对li元素的所有奇数个孩子节点,*/
     background: #ccc;
   }
</style>

7. Every even

<style>
	li:nth-child(even){/*针对li元素的所有偶数个孩子节点,*/
     background: #ccc;
   }
</style>

三、before & after

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

<style>
q::before {
 content: "«";
 color: blue;
}
q::after {
 content: "»";
 color: red;
}
</style>
<q>一些引用</q>, 他说, <q>比没有好。</q>

效果：

四、box shadows

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。默认第四象限的x、y为正。所有属性为： x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色

<style>
  .box{
   box-shadow: 10px 5px 5px red;
  }
</style>

效果：

五、text shadows

给字体加阴影，语法有：
offset-x | offset-y | blur-radius | color
color | offset-x | offset-y | blur-radius
offset-x | offset-y | color
color | offset-x | offset-y
offset-x | offset-y
方向同第四象限为正。

六、variables

CSS 变量可以有全局或局部作用域。变量名称必须以两个破折号（–）开头，且区分大小写。使用变量为 var(name, value)，其中value可选
例子：

<style>
  :root{
   --max-width: 1100px;
   --primary-color: steelblue;
   --secondary-color: skyblue;
   --light-color:#f4f4f4;
   --box-1-width: 1;
   --box-2-width: 2;
 }
 body{
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.4;
   background: var(--light-color);/*此处应用了变量*/
 }
</style>

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。# 学习目标：

提示：这里可以添加学习目标
例如：一周掌握 Java 入门知识

---