元素选择器：
选择所有指定类型的元素
p{
color: aqua;
} //元素选择器
div{
font-size: 20px;
}//选中所有的div
所有元素继承同样式：
html {
}
class(类)选择器：
匹配具有特定类的元素
.level2{
width: 100px;
height: 100px;
background-color: blue;
}
ID选择器：
具有指定ID、类型的元素
#id属性值{}
#w{
color: blue;
}
通配符选择器:
匹配所有的元素（可用来清除间距）
* {
color: blue;
}
包含选择器:
针对列表，匹配子代（子代选择器需与class类型名连用）
.a>li{
background-color: aqua;
}
<ul class="a">
<li>words</li>
<li>words</li>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
</ul>
属性选择器：
匹配具有特定属性的元素
div[id] 匹配具有id的<div>元素
input[type="password"] 匹配type值等于password的input
input[type^="te"] 匹配type值以"te"字符开头的input
input[type$="l"] 匹配type值以"l"字符结尾的input
input[type*="e"] 匹配type值含有"e"字符的input
伪类选择器：
:first-child 第一个子元素
:last-child 最后一个子元素
a:hover{
font-size: 20px;
cursor: cell;
}
a:visited{
color:blue;
}
a:link{
color:chartreuse;
}
a:active{
font: size 60px;
}
结构伪类选择器：
:nth-child() 选中第n个元素
<style>
ul li:first-child{
background-color: red;
}
ul li:last-child{
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
伪元素选择器：
ul li::before{
content: "~";
}
display:block; 转换为块元素
display:none; 隐藏元素属性
如要对行内元素设置宽、高，则需要转换为行内块元素
span {
width: 200px;
height: 200px;
display: inline-block;
background-color: blue;
}
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
