收藏
批改状态：合格
老师批语：这两天的作业已检查！
完成的不错！继续保持哦！！
学了才知道css选择器原来还有那么多没用上，以前接触属性选择器较少
学到属性选择器豁然开朗，使用JQ的时候将大大有用，收获满满啊！
贴上代码，两种案列写一块了，手抄版只写了基本选择器，效果截图吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0321基本选择器和属性选择器</title>
<style type="text/css">
*{margin:0;padding:0}/*所有标签格式清零*/
h1{width:500px;text-align: center}/*类型选择器*/
#basic,#att{float:left;margin:15px;width:500px;}/*id选择符，多个选择*/
.basic-selecter,.att-selecter{width:100%;height:200px;border:1px dotted #000;}/*类选择器，多个选择*/
ul,.att-selecter div{padding-top:35px}/*包含选择符、类型选择符*/
ul >li{list-style: none;width:25%;text-align: center;float:left;margin:20px auto;}/*子选择符*/
div p{width:25%;text-align: center;float:left;margin:20px auto;}
#item2{color:red;}/*id选择符*/
.ligroup{background: yellow}/*类选择符*/
#item1+li{background: green}/*相邻选择符*/
#item2~li{color: lightgreen}/*兄弟选择符*/
p[class="716"]{background: skyblue}
p[class^="s"]{color:red;}
p[class$="7"]{font-weight: bold;}
p[class~=s201]{background: green}
p[class*="8"]{font-size: 20px}
</style>
</head>
<body>
<div id="basic">
<h1>基本选择器</h1>
<div class="basic-selecter">
<ul>
<li id="item1">列表1</li>
<li class="ligroup">列表2</li>
<li class="ligroup">列表3</li>
<li id="item2">列表4</li>
<li class="ligroup">列表5</li>
<li class="ligroup">列表6</li>
<li id="item3">列表7</li>
<li class="ligroup">列表8</li>
</ul>
</div>
</div>
<div id="att">
<h1>属性选择器</h1>
<div class="att-selecter">
<div>
<p class="p119">列表1</p>
<p class="s201">列表2</p>
<p class="p347 s201">列表3</p>
<p class="p467">列表4</p>
<p class="s586">列表5</p>
<p class="s642">列表6</p>
<p class="716">列表7</p>
<p class="p827">列表8</p>
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄贴图
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
