<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1,.box2{
width: 200px;
height: 100px;
background-color: #ff0789;
transition: 2s;
}
.box1:hover+.box2{
background-color: greenyellow;
}
.box2:active{
background-color: aqua;
}
ul li{
background-color: #ff0789;
}
ul :nth-child(odd){
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--
后代选择器 .box1 .box2 选择.box1的后代元素.box2
子代选择器 .box1>.box2 选择.box1的子代元素.box2
并列选择器 .box1,.box2 选择.box1和.box2
相邻兄弟选择器 .box1+.box2 选择.box1的相邻兄弟.box2
普通兄弟选择器 .box1~.box2 选择.box1的普通兄弟.box2
动态伪类选择器
a:link 选择未被访问过的a标签
a:visited 选择已被访问过的a标签
:hover 选择鼠标经过时的元素
:active 选择鼠标点击时的元素
这两个元素可以给最初设置颜色(原始颜色)的地方给一个transition: 2s;渐变一下子
而且只能检测到数值到数值的变换,不能检测单词到单词
css3新增选择器
ul li:nth-child(值) 从上到下选择第几个子元素
简答写法 ul :nth-child
2 可以取任意整数
odd/even odd奇数even整数
3n+1 选择符合表达式的元素 n的取值[0,无穷大)
:nth-last-child(值) 从下到上选择第几个子元素 取值一样
:nth-of-type(值) 从上到下选择每一类标签的第几个子元素
:nth-last-of-type(值)
:empty 选择没有(子元素/文本)的元素
:not(选择器) 取反选择器 ul :not(.on)选择ul子代class名不为on的标签
:first-child 选择第一个子级元素
:last-child 选择最后一个子级元素
[属性名] 属性选择器
[class] 选择有class的标签
[class='box'] 选择有class并且值为box的标签
[class*='box'] 选择有class并且值中含有box的标签
[class^='box'] 选择有class并且值中含有以box开头的标签
[class$='box'] 选择有class并且值中含有以box结束的标签
伪元素选择器
:first-letter 选择元素的第一个文字
:first-line 选择元素的第一行文字
:before 在元素内容前插入内容
:later 在元素内容后面插入内容
before和after必须要用content激活
::selection 选择被用户选择的元素
伪元素 相当于一个假的元素 元素选择器
伪类 相当于一个假的类名 类(class)选择器 真假选择器的权重是一样的
推荐代码顺序
1布局定位属性 content/display/position(对应方位值)/float/overflow/list-style
2自身属性 width/height/padding/margin/background/border
3文字属性 color/font/text-decoration/vertical-align
4其他/css3新增属性 cursor/border-radius/box-shadow/text-shadow
-->
</body>
</html>
Python3Turtle