选择器!important > id > class > 标签，和关联选择器


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
b{
font-size:25px;
}


#nurse{
/* 系统文件字体  C:/windows/Fonts/    */
font-family:华文彩云;
}




.girl2{
color:#ccc;
text-decoration:overline;
}

.girl{
/* 取消下划线 */
text-decoration:none;
}

#a{
color:red;
}

.b{
color:blue !important;
}

del{
color:green;
}


.father .jie{
color:purple;
}

.father > li{
font-size:30px;
}


.fen + li{
font-family:楷体;
}

.fen ~ li{
font-weight:bold;
}

</style>
</head>
<body>
<!--
选择器
1. 标签选择器
会获取页面所有的指定标签
2. ID 选择器
格式:  #ID名       id='xxx'
ID不能重复, 不能多个

3. class选择器   类选择器
格式:  .class名
class名可以重复, 可以多个
相同的对象,相同的属性,最近的一个样式起作用,前面都被覆盖掉 (就近原则)


注意点:
!important > id > class > 标签

4. 关联选择器
选择器1 选择器2 :  选择器1 后代
选择器1 > 选择器2 :  选择器1的下的儿子选择器2(不算孙子,以及更加后代)
兄弟元素1 + 兄弟元素2  (仅次于兄弟1的兄弟2)
所有的兄弟元素 用 ~ 连接  ( 找到兄弟之后的所有元素)
-->
<b>这年头,只有不伤手的立白, 哪有不分手的恋爱. 遇事看开点....</b>
<i id='nurse'>陪朋友去医院, 要抽血, 抽到一半的,护士打了个喷嚏,只见针头一下全扎进去了......</i>
<br />
<u class='girl girl2'>在火车站，看到一妹子后背拉链没拉好，俺上去帮她拉上去了，妹子回头就是一巴掌。好了，俺以为她不喜欢拉上去，又给她拉下来了，妹子回头又是两巴掌·····</u>
<del id='a'  class='b'>怀才就跟怀孕一样, 时间就了才能让人看得出来</del>

<ul class='father'>
<li>求证: 1元=1分</li>
<li class='jie'>解:</li>
<ol>
<li>1元 = 100分</li>
<li class='fen'>=10分 * 10分</li>
<li>=1角 * 1角</li>
<li>=0.1元 * 0.1元</li>
<li>=0.01元</li>
<li>=1分</li>
</ol>
<li>证明完毕. 数学老湿哭了....因为,毫无破绽!</li>
<li>oh no !! shit!!</li>
</ul>


</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容