实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style>
/*标签选择器*/
/*所设置的内容属于ul设置*/
ul{
background-color: #00ff11;
/*ul盒子有上下margin: 16px*/
/*margin-top: 0;*/
/*margin-bottom: 0;*/
/*实际上可以简写:*/
margin: 0 auto;
/*padding-left: 有40PX;需要消除掉*/
padding-left: 0;
}
/*所设置的内容全部属于li里面的内容样式*/
ul li{
color: yellow;
/*设置列表内容前不需要列表前小圆点*/
list-style: none;
/*设置列表内容的宽度和高度*/
width:50px;
height:50px;
/*列表内容的背景颜色*/
background-color: brown;
/*设置内容水平居中*/
text-align: center;
/*垂直居中行高数值等于height的数值，这样垂直就刚好居中。*/
line-height: 50px;
/*设置内容背景为圆圈,设置为列表高度或宽度的一半，刚好为一个圆。如果直接设置为宽度的50%，怎样拉伸网页都为圆*/
/*border-radius: 25px;*/
border-radius: 50%;
/*设置显示样式为一行块级显示，且内容居中*/
display: inline-block;
/*显示方式为一行且内容靠左对齐*/
/*display: inline-flex;*/
/*增加内容在LI背景下的左边距，小球不至于太拥挤*/
margin-left: 10px;
/*盒子背景的阴影颜色，格式为： x轴 Y轴 Z轴 颜色，且Z轴不能为负数，其他的可以*/
box-shadow:-3px 3px 4px blueviolet;
}
/*ID选择器,ID灰色说明此ID未使用，没有选中任何数据*/
#tv{
color: red;
}
/*类选择器,类选择器灰色说明此类未使用，没有选中任何数据*/
.class{
background-color: #00ff11;
}
/*属性选择器*/
ol li[id="tv"]{
background-color: blue;
}
/*群组选择器,意思是各种选择器可以放在一起混用，各个选择器之间用 逗号 隔开,为并列关系*/
#tv, #zz, .kt, li[id="dn"] {
font-size: 20px;
}
/*相邻选择器,用+号表示,（使用UL标签内容）*/
#html + li{
background-color: fuchsia; /*选中 ID=html后的相邻LI背景为粉红色，LI可用*代替 */
}
/*兄弟选择器,用~号作为运算符*/
#css ~ li{
font-size: 12px; /*选择CSS后的所有兄弟字体大小为12PX， li也可用*代替 */
}
/*伪类选择器，不用在文本中调用的类选择器，直接用它可以直接选中任何元素*/
/* CSS 伪元素用于向某些选择器设置特殊效果。*/
/*伪类中的：子元素选择器（只能选择第一个或者最后一个）*/
ol :first-child{
border:2px solid orangered; /*选中ol列表中第一个元素文本边框为2PX 实线 红色*/
}
ol > li:last-child{
border:3px dotted yellow; /*最后一个元素边框为虚线*/
}
/*伪类中的：直接制定子元素选择器*/
ol > li:nth-child(3){
font-style: oblique;
color: fuchsia; /*选择OL>LI下第三个元素字体为斜体，颜色为粉红*/
}
ol > li:nth-last-child(1){
color: #00ff11; /*选择倒数第一个元素字体颜色为绿色*/
}
/*伪类中的：type类型选择器*/
/*div>p:first-of-type{*/
/* background-color: orangered;*/
/*}*/
/*div>p:nth-of-type(2){*/
/* background-color: aqua;*/
/*}*/
/*第一个DIV标签里第二组元素的类型*/
/*div>p:first-of-type :nth-child(1){*/
/* color: blue;*/
/*}*/
/*第一个DIV里面第一个P标签里第一个元素的样式,之间有空格*/
/*div>p:first-of-type :nth-of-type(1){*/
/* background-color: fuchsia;*/
/* font-size: 30px;*/
/* color:#fffb21;*/
/*}*/
p:only-of-type{
border-color: #00ff11;
}
div p:nth-of-type(2) :nth-of-type(1){
color: crimson;
}
/*form 下 p 下边的 label背景为红色*/
form > p:first-of-type :first-child,p:nth-of-type(2) :first-child,
p:nth-of-type(3) :first-child,p:nth-of-type(4) :first-child
/* 简写：但是提交按钮也被选中 form >p:nth-of-type(1n+1) :first-child*/
{
background-color: fuchsia;
color: blue;
border: 2px solid darksalmon;
}
/* 伪类: 表单控件 */
/*所有输入框的颜色*/
form :enabled{
background-color: gold;
}
/*选中的标签字体会变成红色，边框1PX SOLID 颜色！*/
form :checked + label{
color: red;
border:1px solid darkturquoise;
}
/* 当在控件中输入无效值文本自动变成红色 */
/*例如邮箱文本框,如果输入的不是一个有效的邮箱格式字符串, 就会实时的用颜色提示用户的*/
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
/*控件获取到焦点时, 背景变成绿色*/
form :focus {
background-color: lime;
}
/* 设置鼠标悬停时的样式 */
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<ul>
<li>PHP</li>
<li id="html">HTML</li>
<li id="css">CSS</li>
<li>Java</li>
<li>c++</li>
</ul>
<ol>
<li id="tv">电视</li>
<li id="zz">桌子</li>
<li class="kt">空调</li>
<li id="dn">电脑</li>
</ol>
<hr color="green">
<h4>第一组</h4>
<div><p>暗黑<b>破坏神</b></p>
<p>DNF</p>
<i>魔兽</i>
</div>
<h4>第二组</h4>
<div>
<p>MUD</p>
<i>飞机</i>
<p>英雄</p>
</div>
<h4>第三组</h4>
<div>
<i>PHP中文网</i>
</div>
<hr>
<form>
<p> <label for="text">账号：</label>
<input type="text" name="text" id="text"></p>
<p> <label for="password">密码：</label>
<input type="password" name="password" id="password"></p>
<p><label for="email">邮箱：</label>
<input type="email" name="email" id="email"></p>
<p><label for="love">性别：</label>
<input type="radio" name="love" id="boy"><label for="boy">男生</label>
<input type="radio" name="love" id="girl"><label for="girl">女生</label>
<input type="radio" name="love" id="love" checked><label for="love">保密</label></p>
<p><button>提交</button></p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例