收藏
批改状态：未批改
老师批语：
3.21课后作业-选择器的用法！
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 这里引用的是外部样式，样式内容写在css.css文件中，当前引用的外部样式表资源位置在当前文件夹的CSS文件 -->
<link rel="stylesheet" type="text/css" href="css.css">
<title>3.21CSS-选择器</title>
<!-- 这里的样式为：内部样式！ -->
<style type="text/css">
h3{color:red;}
.d1{width:400px;line-height:1.5em;background-color:cyan;border:1px solid red;text-align:center;}
li{list-style:none;width:300px;}
.demo1{color:green;}
#test{background-color:brown;}
/* 选择所有属性为ID的元素。 */
*[id]{background-color:yellow;}
/* 选中class="demo1"的元素 */
li[class="demo1"]{background-color:red;}
/* 选中class属性中值包含demo2的元素 */
li[class ~="demo2"]{background-color:blue;}
/* 择中ID属性中值以k开头的元素 */
li[id ^="k"]{font-size:24px;}
/* 选中class属性中值以p结尾的元素 */
li[class $="p"]{color:#666;}
/* 选中class属性中值包含“oj"的元素 */
li[class *="oj"]{font-size:30px;background-color:brown;}
</style>
</head>
<body>
<h3>今天学习了CSS</h3>
<p>元素类型可分为：块元素，行内元素，行内块元素，替换元素和非替换元素!</p>
<div class="d1">DIV就是一个块元素，独占整行</div>
<span>span,a属于行内元素，当前行占满后才会换行！</span>
<div>IMG标签是一个比较有趣的元素，命名规律像行内元素，其实却是一个块元素，对于这类元素，我们叫做：行内块元素！</div>
<ul><li>上面的这些元素中，又可以分为：替换和非替换元素，</li>
<li>1.替换元素：可以通过其属性值来设置。例：IMG 和 link 可以通过其 src 和 href的值来改变!</li>
<li>2.非替换元素：就是用户本身提供的内容或文档内容。例：h5 p标签等</li>
</ul>
<hr>
<div>
<ul>
<li style="color:cyan;">列表演示1</li>
<li class="demo1">列表演示2</li>
<li class="cococp">列表演示3</li>
<li class="demo1 demo2">列表演示4</li>
<li id="test1">列表演示5</li>
<li class="demo1">列表演示6</li>
<li id="kb">列表演示7</li>
<li class="oojjoo">列表演示8</li>
<li class="ooojo">列表演示9</li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
