深入学习css常用选择器
实例
/*标签选择器*/
ul{
border:1px dashed red;
margin-top:0;
margin-bottom:0;
padding-left:0;
overflow: hidden;
padding: 10px;
}
/*层级选择器*/
ul li{
list-style: none;
width:40px;
height: 40px;
border-radius: 50%;
line-height: 40px;
text-align: center;
float: left;
margin-left: 10px;
}
/*id选择器*/
#bg-blue{
background-color: -lightblue;
}
/*类选择器*/
.bg-green{
background-color: lightgreen;
}
/*属性选择器*/
ul li[id="bg-blue"]{
background-color: blue; /*id选择器优先级较高，需把前面的注释掉*/
color: white;
}
/*群组选择器*/
.bg-green, #bg-bule{
background-color: blueviolet;
}
/*相邻选择器*/
.bg-green + *{
background-color: chartreuse;
}
/*兄弟选择器*/
#bg-blue ~ *{
color: peru;
}
/*伪类：子元素选择器*/
ul :first-child{
color: blue; /*选择第一个子元素*/
}
ul :last-child{
background-color: coral; /*选择最后一个子元素*/
}
ul :nth-child(9){
background-color: brown; /*选择第9个子元素*/
}
ul :nth-last-child(3){
background-color: cyan; /*选择倒数第3个子元素*/
}
/*伪类：类型选择器*/
ul li:first-of-type{
background-color: deeppink; /*选择第一个li类型的元素*/
}
ul li:last-of-type{
background-color: gray; /*选择最后一个li类型的元素*/
}
ul li:nth-of-type(6){
background-color:yellowgreen ; /*选择第6个li类型的元素*/
}
/*选中每个div中的第2个子元素*/
div :nth-child(2){
background-color: springgreen;
}
/*只选中神奇与一*/
div:first-of-type :nth-child(3){
background-color: -tan;
}
/*可以简化*/
p:nth-of-type(2){
background-color: violet;
}
/*选择只有一个子元素且为p*/
p:only-of-type{
background-color: skyblue;
}
/*伪类：表单控件*/
form :enabled{
background-color: wheat;
}
/* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
form :checked + *{
color: red;
}
/*当在控件中输入无效值文本会自动变成红色*/
form :invalid{
color: red;
}
/*设置控件获取到焦点时的样式*/
form :focus{
background-color: lightgreen;
}
/*设置鼠标悬停时的样式*/
button:hover{
width: 56px;
height: 20px;
background-color: black;
color: white;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html> <head> <meta charset="uft-8"> <title>CSS常用选择器</title> <link rel="stylesheet" href="static/css/style01.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 type="button">登录</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
以上代码涉及以下知识点：
了解标签选择器、层级选择器、属性选择器等优先级要比伪类选择器高
伪类的子元素选择器着重在元素的位置，而伪类的类型选择器这重在元素的类型