提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
今天学了一些更高级的CSS知识。
一、Target Selectors
除了针对特定类的选择器,还有很多其他复杂的选择器。
- Direct Child
直接的父子关系。下例即为一个p标签为div的子节点,且中间没有别的父子关系插入。
<style>
div > p{
background: #ddd;
}
</style>
- Direct After
紧挨着选择器。即为两个节点是兄弟节点,对于加号后节点的样式。下例即为对p。
<style>
div + p{
background: #333;
color: #fff;
}
</style>
- 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
想要找到某个特定的孩子节点。
- First-child
<style>
li:first-child{/*针对li元素的第一个孩子节点*/
background: red;
}
</style>
- Last-child
<style>
li:last-child{/*针对li元素的最后一个孩子节点*/
background: red;
}
</style>
- Position 3
<style>
li:nth-child(3){{/*针对li元素的第三个孩子节点*/
background: purple;
}
</style>
- Every 3
<style>
li:nth-child(3n){/*针对li元素的所有3n(n>=1)个孩子节点*/
background: orange;
}
</style>
- Every 3 after 7
<style>
li:nth-child(3n+7){/*针对li元素的所有3n+7(n>=0)个孩子节点,*/
background: yellow;
}
</style>
- Every odd
<style>
li:nth-child(odd){/*针对li元素的所有奇数个孩子节点,*/
background: #ccc;
}
</style>
- 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 入门知识