一、选择器
有很多写法，一下是经常使用的
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS常用选择器</title> <link rel="stylesheet" href="static/css/style1.css"> </head> <body> <!-- 演示基本选择器 --> <ul> <li class="bg-green">1</li> <li id="bg-blue">2</li> <li class="bg-green">3</li> <li class="bg-green">4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 --> <div> <p>猪哥</p> <li>朱老师</li> <p>西门大官人</p> </div> <div> <p>欧阳克</p> <li>金莲妹妹</li> </div> <!-- 演示表单选择器 --> <form action=""> <label for="email">邮箱:</label> <input type="email"> <label for="password">密码:</label> <input type="password"> <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label> <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label> <button>登录</button> </form> </body> </html>
标签选择器：
实例
ul {
border: 1px dashed red;
margin: 0 auto;
padding-left: 0;
}层级选择器：
实例
/* 层级（后代）选择器: 选择 ul 的后代元素*/
ul li {
list-style:none;
width: 40px;
height: 40px;
background-color:wheat;
text-align: center;
line-height: 40px;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
box-shadow: 2px 2px 1px #888;
}实例
/* id选择器 */
#bg-blue {
background-color: lightblue;
}类选择器：
实例
.bg-green {
background-color: lightgreen;
}实例
li[id="bg-blue"] {
border: 2px solid red;
}群组选择器：
实例
#bg-blue, .bg-green {
border: 2px solid blue;
}实例
#bg-blue + * {
background-color: yellow;
}兄弟选择器：
实例
/* 第2个小球后面的所有同级兄弟元素全部选中 */
#bg-blue ~ * {
background-color: yellow; /* -yellow 值前加-,令其失效 */
}