实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <link rel="stylesheet" href="static\css\style11.css"> </head> <body> <ul> <li class="lei">1</li> <li id="idxzq">2</li> <li class="xd">3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
style页
显示盒子小圆球，用到了，marging，padding,border
/*标签选择器*/
ul{
border: 1px dashed red;
margin: 0 auto;
padding-left: 0 ;
}
/*层级选择器*/
ul li{
list-style: none;
width: 70px;
height: 70px;
background-color: green;
text-align: center;
text-align: ;
line-height: 50px;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
box-shadow: 10px 10px 5px #888888;
}
/*类选择器*/
.lei{
background-color: aqua;
}
/*id选择器*/
#idxzq{
background-color: red;
}
li[id="idxzq"]{
border:2px solid dodgerblue;
}
伪类选择器
<ul> :frist-child
{
background-color: red;
}
<ul> :last-child
{
background-color: red;
}
<ul> :nth-child(9)
{
background-color: red;
}
div:first-of-type :nth-child(3) {
background-color: darkcyan;
}鼠标点击，按钮发生变化
button:hover{width:56px;
height:28px;
background-color: blue;
color:white;
border-radius: 20px;
}
color: red;
display: block;
}
点击鼠标，文本框发生变色
form :focus{background-color: #888888;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2.
选择器的引用，都是用CLASS,和id吗？
比如老师你写的这选择器
在html页怎么引用，是用class还是id
/* 伪类: 类型选择器 */
ul li:first-of-type {
background-color: darkorchid; /* 第一个li类型的元素背景为紫色 */
color: white;
}
我测试出来，会用了