css 选择器
<!--
元素选择器
选择器分组
类选择器详解
ID 选择器详解
属性选择器详解
后代选择器
子元素选择器
相邻兄弟选择器
-->
<p>元素选择器</p>
<h1>h1</h1>
<h2>h2</h2>
<p class="class">class</p>
<div class="class">div====class</div>
<p class="p1">this is web page</p>
<p class="p2">this is web page</p>
<!-- p1 p2 用空格隔开-->
<p class="p1 p2">this is web page</p>
<div id="mydiv">mydiv</div>
<p title="">hello</p>
<p>PPPPPP<strong>strong<i>IIIIIII</i></strong></p>
<h1>PPPPPPPPPPPPPPPP<strong>SSSSSSSSSSSSSS<i>IIIIIIII</i></strong></h1>
</body>
/*元素选择器*/
p{
/* color: red;*/
}
/*元素选择器分组*/
h1,h2{
font-size: 19px;
/* color: blue;*/
}
/*通配符*/
*{
color: green;
}
/*类选择器*/
.class{
color: orange;
}
/*结合元素选择器*/
div.class{
font-size: 30px;
}
/*多类选择器*/
.p1{
font-size: 50px;
}
.p2{
color: yellow;
}
.p2.p1{
margin: 20px auto;
}
/*ID 选择器*/
/*
ID 选择器 只能在文档中使用一次，而类可以多次使用
ID 选择器不能结合使用
当使用js时候 ，需要用到id；
*/
#mydiv{
color: cyan;
}
/*属性选择器*/
/*后代选择器*/
p strong i{
font-size: 33px;
}
/*以一下等同*/
/*
h1 i{
color: blue;
}
*/
/*子元素选择器只能选择一级一级 区别于后代选择器*/
h1>strong>i{
color: blue;
}
/*相邻兄弟选择器 可选择紧接在后面的元素*/
li+li{
font-size: 55px;
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
