实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手抄: CSS中常用的三种单位案例</title>
</head>
<style>
/*标签选择器*/
ul {
/*padding: 0; 多余的*/
margin: 0;
width: 500px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after { /*子块撑开父块*/
content: ''; /*在子元素尾部添加空内容元素 */
display: block; /* 并设置为块级显示 */
clear: both; /* 清除二边的浮动 */
}
ul li {
list-style: none; /* 去掉默认列表项样式 */
float: left; /* 左浮动 */
height: 40px; /*设置高度*/
width: 40px; /* 设置宽度 */
line-height: 40px ; /* 文本垂直居中 */
text-align: center; /* 文本水平居中 */
border-radius: 50%; /*设置边框圆角*/
box-shadow: 2px 2px 2px #888; /*设置阴影*/
background:skyblue; /*设置背景色天蓝 */
margin-right: 5px; /*每个球之间的有外边距*/
}
/* id选择器 */
#item1 {
background-color: coral;
}
/* 类选择器 */
.item2 {
background-color: gold;
}
/* 属性选择器:属性名 */
ul li[class]{
background-color: blueviolet;
}
/* 属性选择器:属性值 */
ul li[class="item2"]{
background-color: grey;
}
/* 属性选择器:以制定的属性值开头*/
ul li[class^="cat"]{
background-color: brown;
}
/* 属性选择器:以制定属性值结束 */
ul li[class$="pig"]{
background-color:red;
}
/* 属性选择器:属性值中包含置顶子串 */
ul li[class*="t"]{
/* 如果选择t的话,, li2 和li3 就会变称绿色,*/
/* 如果选择te li1 没有变色,是因为id的优先级大于标签属性选择器,如果把id改成class就有效果*/
background-color: green;
}
/* 后代选择器 */
body ul li{
border: 1px solid black;
/* 定义实线为1像素,颜色为黑色.*/
}
/* 子选择器 */
ul > li[class$="pig"] {
background-color: greenyellow;
}
/* 相邻选择器 */
ul li[class$="pig"] ~ * {
/* 选择当前元素之后的所有同级元素 不含当前 */
background-color: blcak;
color: white;
}
/* 相邻兄弟选择器 */
ul li[class$="pig"] + li{
background-color: pink;
color: black;
}
</style>
<body>
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="cat dog pig">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中常用的选择器</title>
</head>
<style>
ul {
margin: 0;
line-height: 20px ; /* 文本垂直居中 */
width: 420px;
border: 1px solid #666;
text-align: left;
padding: 10px 30px;
}
/*伪类选择器:链接*/
a {
padding: 0;
margin: 0;
list-style: none;
font-size:17px;
}
/* 访问前 */
a:link{
color: darkslateblue;
}
/* 访问后 */
a:visited{
color: darkorange;
}
/* 获取焦点时 */
a:focus {
color: blue;
}
/* 鼠标悬停时 */
a:hover{
color: skyblue;
}
/* 鼠标点击时 */
a:active{
color: red;
}
.topli_4 a {
font-size: 18px;
color: black;
}
h3{
margin: 0;
}
</style>
<body>
<p>
<h3>国内新闻每日排行</h3>
<ul>
<li class="topli"><a href="#">耒阳处置聚众冲击国家机关案 湖南省领导作出批示</a></li>
<li class="topli"><a href="#">加媒：中国各地正改变靠户籍控制外来人涌入制度</a></li>
<li class="topli"><a href="#">他因3400元犯“受贿罪” 中央政法委为何判无罪？</a></li>
<li class="topli_4"><a href="#">严重冲击台又一“邦交”?国民党卖这个饭店遭驳回</a></li>
<li class="topli"><a href="#">岛国论坛“对抗中国”算盘还没打响 澳自己先栽了</a></li>
<li class="topli"><a href="#">美媒:中国用了不到20年时间成为科学知识超级大国</a></li>
</ul>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例