<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
b, i{
color:red;
}
b:hover{
color:green;
}
.btn1:focus{
width:200px;
}
.father > li:first-child{
color:blue;
}
.father > li:last-child{
font-style:italic;
}
.father > li:nth-child(2n){
border:5px solid pink;
}
.father > li:nth-last-child(2){
list-style:none;
}
.father>li:nth-of-type(3){
text-decoration:underline;
}
.father:before{
content:'我肚子饿了';
}
.father:after{
content:'今早没吃饭';
}
</style>
</head>
<body>
<!--
选择器
7.1 标签
7.2 ID #ID名
7.3 class .class名 重复, 多个 多个class名之间用 空格隔开
7.4 关联
选择器1: s1
选择器2: s2
s1 s2 匹配s1所有的后代元素s2
s1>s2 匹配s1下的所有儿子s2
s1+s2 匹配仅此于s1后的兄弟元素s2
s1~s2 匹配s1后所有兄弟元素s2
7.5 组合选择器
s1, s2{
css属性
}
多个选择器之间用 逗号 隔开, 给不同的选择器赋予相同的属性
7.6 伪类选择器
s1:hover{ css属性 } 只能对本身或者是后代元素起作用
s1:hover s2 鼠标滑倒s1上 s2起作用
s1:focus{} 获取到焦点自动触发css属性
7.7 伪元素选择器
s1:first-child s1下的第一个元素
s1:last-child s1下的最后一个元素
s1:nth-child(N) 2n偶数 2n+1奇数 odd奇数 even偶数
s1:nth-last-child(N)
s1:nth-of-type(N)
s1:before
s1:after
s1:only-child
s1:not()
s1:empty
注意点:
相同的对象, 相同的属性, 最后一个起作用
优先级:
!important > Id > Class > 标签
-->
<b> 熊二： “大哥！你看，那货早上去抢劫银行被抓了！我们还是晚上去吧？”</b>
<i> 熊大：“你个傻B！你不知道干坏事的早晚都会被抓吗！听哥的，咱们中午去！！！”</i>
<u> </u>
<br />
<input type="text" class='btn1' />
<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>
伪元素选择器关联组合选择器
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
