3-21作业
代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>基础选择器</title>
<style type="text/css">
body {
width:1000px;
margin:0 auto; padding:0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
ul {
padding: 0;
margin: 0;
width: 480px;
border: 1px dashed #666;
padding: 10px 5px;
}
li {
background:#33cc66;
list-style:none;
line-height:2em;
padding: 5;
}
#n1 {
background:#ff6666;
}
.na {
background:#ff9900;
}
ul li { /* ul 下 li标签样式 */
color:#fff;
}
ul * { /* ul下所有标签样式 */
/* color:#fff; */
}
ul > li { /*等价于: ul > * {} */
background-color: #ff6699;}
#na2 + li { /* #na2后面第一个li标签 */
background-color: #cc0000;
}
#na2 ~ li { /* #na2后面所有的li标签 */
/* background-color: #cc6666; */
}
/* 下面是属性选择器 */
*[id] { /* 所有包含id属性的 */
background:#ff9933;
}
li[class="d"] { /* 指定class="d"的 */
background:#ff3333;
}
li[class ^= "aaa"] { /* 以aaa开头的 */
background:#009966;
}
li[class ~= "ab"]{ /* 包含ab字母 */
background:#993333;
}
li[class $= "b"]{ /* 以b结尾的 */
background:#cc0033;
}
li[class *= "f"]{ /* 所有包含f的 */
background:#000;
}
/* 下面是伪类选择器 */
ul li:first-child { /* ul下第一个li标签 得关闭前面基础属性选择器*/
background:#ccff00;
}
ul li:last-child { /* ul下最后一个li标签 */
background-color: #cc0000;
}
p:only-of-type { /* 唯一的p元素 */
color:red;
}
</style>
</head>
<body>
<div>
<div class="left" align="center">
<ul>
<h3>第一首</h3>
<li>少壮不努力，只能开夏利。</li>
<li id="n1">吃的苦中苦，才能开路虎。</li>
<li class="na">吃得苦中苦，才能开路虎。</li>
<li id="na2">挨得炮中炮，才能开捷豹。</li>
<li>学会让人骑，才能开奥迪。</li>
<li class="f">让骑还会叫，你能开霸道。</li>
<li >只要放得开，雷克萨斯随便开。</li>
<p>—————这是一首经典的打油诗</p><!-- 只有在 ul * { color:#fff} 时，ul下所有文字（这里）才能显示白色 --></ul>
</div>
<div class="right" align="center">
<ul>
<h3>第二首</h3>
<li class="ab aa">独坐书房手做妻</li>
<li id="naa">此事羞于外人提</li>
<li>桌前电脑东瀛女</li>
<li class="aaabb">纸巾床前堆成排</li>
<li class="d">一上一下渐入戏</li>
<li class="abb aa">忽快忽慢眼迷离</li>
<li class="f">点点滴滴飞入地</li>
<li class="naabb ab">子子孙孙化作泥</li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码
