CSS常用选择器
实例
<!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-red">我</li>
<li id="bg-blue">为</li>
<li class="bg-yellow">什</li>
<li id="bg-green">么</li>
<li>那</li>
<li>么</li>
<li>帅</li>
<br><br>
<li class="bg-red">还</li>
<li id="bg-blue">那</li>
<li class="bg-yellow">么</li>
<li id="bg-green">的</li>
<li>有</li>
<li>才</li>
<li>华</li>
</ul>
</body>
</html>
<!--下面是样式-->
ul{
/*border: 1px dashed red;*/
margin: 0 auto;
padding-left: 0;
}
ul li{
list-style: none;
width: 40px;
height: 40px;
background-color: antiquewhite;
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 40px;
margin-left: 20px;
box-shadow: 4px 4px 2px #888;
border: 2px solid plum;
}
/*id选择器*/
.bg-red{
border: 2px solid red;
}
/*类选择器*/
#bg-blue{
background-color: blue;
}
/*属性选择器*/
li[id="bg-green"]{
background-color: green;
}
/*群组选择器*/
#bg-blue,.bg-yellow{
border: 2px solid cyan;
}
/* 第2个小球相邻的是第3个小球,可以用li,也可以用* */
#bg-blue + * {
background-color: yellow;
}
/* 兄弟选择器 */
/* 第2个小球后面的所有同级兄弟元素全部选中 */
#bg-blue ~ * {
background-color: -yellow; /* 值前加-,令其失效 */
}
/* 伪类: 子元素选择器 */
ul :first-child {
background-color: coral; /* 第一个子元素 */
}
ul :last-child {
/* 因优先级问题,需要把前面的兄弟选择器注释掉 */
background-color: coral; /* 最后一个子元素 */
}
/*直接指定子元素,从1开始计数*/
ul :nth-child(6) {
background-color: coral; /* 第6个子元素 */
}
/*:nth-last-child(n): 倒数第n个*/
ul :nth-last-child(3) {
background-color: coral; /* 倒数第3个子元素,8号球 */
}
/* 伪类: 类型选择器 */
ul li:first-of-type {
background-color: darkorchid; /* 第一个li类型的元素背景为紫色 */
color: white;
}
ul li:last-of-type {
background-color: darkorchid; /* 最后一个li类型的元素 */
color: white;
}
ul li:nth-of-type(6) {
background-color: darkorchid; /* 选择第6个li类型的元素 */
color: white;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
演示伪类选择器中的子元素与类型选择器之间的区别与联系
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示伪类选择器中的子元素与类型选择器之间的区别与联系</title>
<link rel="stylesheet" href="static/css/style2.css">
</head>
<body>
<div>
<p>取经队伍</p>
<li>唐僧</li>
<li>孙悟空</li>
<p>猪八戒</p>
<li>沙僧</li>
<br><br><br>
<div>
<p>妖怪队伍</p>
<li>白骨精</li>
<li>狮子精</li>
<li>黑龙怪</li>
<li>白虎精</li>
</div>
</div>
</body>
</html>
<!--下面是样式-->
/*清除li标签样式*/
li{
list-style: none;
}
/*清楚p标签的margin*/
p{
margin-bottom: 0px;
margin-top: 0px;
}
/*设置P标签类型第一个字体为红色*/
div:first-of-type :nth-child(1){
color: red;
}
/*设置所有P标签类型第二个P标签字体为蓝色且加粗*/
p:nth-of-type(1) {
color: blue;
font-weight: bold;
}
/*直接指定子元素,从1开始计数*/
li:nth-child(3){ /* 第3个子元素 */
color: blueviolet;
}
/*:nth-last-child(n): 倒数第n个*/
li:nth-last-child(3){
color: brown; /* 倒数第3个子元素,8号球 */
}
/*:nth-last-child(n): 正数第n个*/
li:first-of-type{
color: chartreuse;
}
/*选择只有一个子元素且子元素为p*/
p:only-of-type {
color: pink;
font-weight: bold;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
表单选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<link rel="stylesheet" href="static/css/style3.css">
</head>
<body>
<form action="">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" 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>
<p>
<button>登录</button>
</p>
</form>
</body>
</html>
<!--下面是样式-->
/* 伪类: 表单控件 */
form :enabled {
/*当表单元素可用时,将背景设置成小麦色*/
background-color: wheat;
}
/* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
/*选择的过程是: 先获取到当前被选中的按钮, 再获取它的相邻子元素, 其实就是label标签,再将label的文本设置为红色*/
form :checked + label { /* 这里不用label , 用 '*' 号也可以 */
color: red;
}
/* 当在控件中输入无效值文本自动变成红色 */
/*例如邮箱文本框,如果输入的不是一个有效的邮箱格式字符串, 就会实时的用颜色提示用户的*/
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
/*控件获取到焦点时, 背景变成绿色*/
form :focus {
background-color: lightgreen;
}
/* 设置鼠标悬停时的样式 */
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
border-radius: 10px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例