演示CSS中的常用选择器，体会伪类选择器的作用，以及nth-child()和nth-of-type()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示CSS中的常用选择器</title>

<style>
/*标签选择器*/
p{
background-color: yellow;
}
/*class类选择器*/
.bg-gray{
background-color: gray;
}
/*id选择器*/
#username{
background-color: aqua;
}
/*优先级：style>id选择器>class类选择器>标签选择器*/

/*层级选择器/后代选择器*/
p label{
background-color: chocolate;
}
/*群组选择器*/
#username,#password{
color: red;
}
/*属性选择器*/
li[id="show1"]{
color: blue;
}
/*相邻选择器:这里用li或者*都行*/
#show1+li{
color: red;
}
/*兄弟选择器:这里用li或者*都行*/
.show2~*{
color: green;
}
/*伪类：子类选择器*/
ul :nth-child(6){
color: blueviolet;
}
/*伪类：类型选择器*/
ul :nth-of-type(4){
color: yellow;
}

/*以下是表单样式*/
/*不知道是哪里问题，表单效果出不来:因为把checked放在了单行文本框里而不是单选或复选按钮*/
/*:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）*/

form :checked+*{
color: blue;
}

/*鼠标悬停*/
button:hover{
width: 60px;
height: 30px;
background-color: black;
color: white;
border: none;
}

</style>
</head>
<body>
<h1>用户登录界面</h1>
<form action="">
<p>
<label for="username">用户：</label>
<input type="text" class="bg-gray" id="username" style="background-color: pink" checked>
</p>

<p>
<label for="password">密码：</label>
<input type="password" class="bg-gray" id="password">
</p>

<p>
<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>
</p>

<ul>
<li id="show1">演示CSS中的常用选择器</li>
<li>1</li>
<li class="show2">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

<button>登录</button>
</form>
</body>
</html>

相关文章