演示CSS常用选择器
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用选择器</title>
<style>
/*标签选择器*/
ul {
border: 1px dashed green;
/*margin-top:0;
margin-bottom:0;*/
margin:0 auto;
padding-left:0;
}
/*层级/后代选择器: 选择 ul的后代子元素*/
ul li{
/*去除小圆点*/
list-style:none;
height:40px;
width:40px;
background-color:wheat;
display:inline-block;
/*内容居中*/
text-align:center;
/*行间的距离*/
line-height:40px;
/*用百分比控制圆的形状*/
border-radius:50%;
margin-left:5px;
/*添加阴影*/
box-shadow:2px 2px 1px #888;
}
/*id选择器*/
#world {
/*background-color: lightblue;*/
}
/*类选择器*/
.have{
/*background-color:lightgreen;*/
}
/*属性选择器*/
li[id]{
/*border:2px solid red;*/
}
/*群组选择器*/
#world, .have {
/*border:2px solid blue;*/
}
/*相邻选择器*/
#world+li{
/*background-color: yellow;*/
}
/*兄弟同级选择器*/
#world~*{
/*background-color:yellow;*/
}
/*伪类；子元素选择器(只能选择第一个或最后一个)*/
ul :first-child {
background-color: coral
}
ul :last-child {
background-color:coral;
}
ul :nth-child(6){
background-color:coral;
}
ul :nth-last-child(3) {
background-color:coral;
}
/*伪类:类型选择器*/
ul li:first-of-type {
background-color:darkorchid;
color:white;
}
ul li:last-of-type {
background-color:darkorchid;
color:white;
}
ul li:nth-of-type(6){
background-color:darkorchid;
color:white;
}
/*th-child():关注在于子元素的"位置"
:nth-of-type():关注点在于元素的"类型*/"
div li{
list-style:none;
}
div :nth-child(2)
background-color: green;
}
div:first-of-type :nth-child(3) {
/*background-color: lightblue;*/
}
div p:nth-of-type(2) {
background-color:lightyellow;
}
/*输入框的颜色*/
form :enabled {
background-color:wheat;
}
/*选中的标签字体变色*/
form :checked + label{
color: red;
}
/*当输入无效或非法的数据格式时会被激活*/
form :invalid {
color: red;
}
/*获取焦点时背景颜色变色*/
form :focus {
background-color:#888;
}
/*鼠标悬停样式*/
button:hover {
width: 56px;
height:28;
background-color: black;
color: white;
border: none;
}
</style>
</head>
<body>
<!-- 基本选择器 -->
<ul>
<li class="have">1</li>
<li id="world">2</li>
<li>3</li>
<li class="have">4</li>
<li>5</li>
<li class="have">6</li>
<li>7</li>
<li>8</li>
<li class="have">9</li>
<li>10</li>
</ul>
<div>
<p>张飞燕</p>
<li>胡霜</li>
<p>陈含静</p>
</div>
<div>
<p>刘志丹</p>
<li>蔡祖赐</li>
<p>吴观滨</p>
</div>
<hr>
<!-- 演示表单选择器 -->
<h3>用户登录</h3>
<form action="">
<p>
<label for="email">邮箱:</label>
<input type="email" name="" id="email">
</p>
<p>
<label for="password">密码:</label>
<input type="passeord" name="" id="password">
<p>
<input type="radio" id="week" name="save" value="7" checked>
<label for="week">保存一周</label>
<input type="radio" id="month" name="save" value="30">
y<label for="week">保存一月</label>
</p>
<p>
<button>登录</button>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例