收藏
批改状态：未批改
老师批语：
CSS常用的一些伪类选择器如下:
/*伪类;子元素选择器*/
/*选择ul下的第一个儿子*/
ul :first-child
/*倒序第一个儿子*/
ul :last-child
/*定位儿子选择*/
ul :nth-child(5)
/*定位倒叙选择儿子*/
ul :nth-last-child(2)
/*伪类:类型选择器*/
ul li:first-of-type
具体使用方法请查看源码以及注释!!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
ul{
list-style: none;
margin: 0;
padding: 0;
border: 1px solid red;
}
li{
/*width: 40px;*/
/*height: 40px;*/
/*border: 1px solid black;*/
/*display: inline-block;*/
/*border-radius: 50%;*/
/*text-align: center;*/
/*line-height: 40px;*/
}
/*伪类;子元素选择器*/
/*选择ul下的第一个儿子*/
ul :first-child{
background-color: aqua;
}
/*倒序第一个儿子*/
ul :last-child{
background-color: aqua;
}
/*定位儿子选择*/
ul :nth-child(5){
background-color: aqua;
}
/*定位倒叙选择儿子*/
ul :nth-last-child(2){
background-color: blue;
}
/*伪类:类型选择器*/
ul li:first-of-type{
background-color: red;
color: yellow;
}
ul li:last-of-type{
color: greenyellow;
}
ul li:nth-of-type(6){
background-color: greenyellow;
}
/*演示如下*/
/*:nth-of-type() 关注点在子元素的类型*/
/*:nth-child() 关注点在子元素的位置 前面必须加空格才有效果*/
div :nth-child(2){
/*background-color: red;*/
}
/*选择第一个div 下的第三个子元素*/
/*first-of-type后面跟上:nth-child得加空格*/
div:first-of-type :nth-child(3){
background-color: greenyellow;
}
div p:nth-of-type(3){
background-color: green;
}
form :enabled{
background-color: wheat;
}
/*下面用*代替label也可以因为相邻元素只有一个*/
form :checked +label{
color: red;
}
/*当输入无效非法的数据格式会被激活*/
form :invalid{
color: red;
}
/*获取焦点;当鼠标点击输入框时会变成你想设置的颜色*/
form :focus{
background-color: greenyellow;
}
button:hover{
width: 80px;
height: 40px;
background-color: black;
color: red;
border: none;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li id="bg-blue">导航</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<hr>
<div>
<p>html超文本标记语言</p>
<li>css层叠样式表</li>
<p>php中文网</p>
<p>php中文网</p>
<p>php中文网</p>
</div>
<hr>
<div>
<p>JavaScript一种直译式脚本语言</p>
<li>php服务器开源脚本语言</li>
<p>php中文网</p>
<p>php中文网</p>
</div>
<hr>
<div>
<form action="">
<p>
<label for="email">邮箱:</label>
<input type="email" name="" id="email" >
<!--<input type="email" name="" id="email" disabled>-->
<!--disabled禁用输入框-->
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="" id="password">
</p>
<p></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>
<p>
<button>登录</button>
</p>
</form>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
