CSS 挑选器浅谈

日期:2021-03-12 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

A 标识HTML 挑选器

拷贝编码
编码以下:

body{
padding:0px; margin:0px; background-color:#ffdee0;
}


B 种别CLASS 挑选器


拷贝编码
编码以下:

<style type="text/css">
.hongkong{
color:blue;
}
.hunang{
color:red;
}
</style>
......
<p class="hongkong">刘德华</p>
<p class="hongkong">张学友</p>
<p class="hunang">何炅</p>
<p class="hunang">汪涵</p>


C 专用ID 挑选器

拷贝编码
编码以下:

<style type="text/css">
#wanghan{
color:blue;
}
</style>
......
<p>刘德华</p>
<p>张学友</p>
<p>何炅</p>
<p id="wanghan">汪涵</p>


D 挑选器组成挑选


拷贝编码
编码以下:

<style type="text/css">
/* 仅有<h1>标识中class值:"hongkong"的改为蓝色 */
h1.hongkong{
color:blue;
}
/* 仅有<h1>标识中id值:"hunang"的改为鲜红色 */
h1#hunang{
color:red;
}
</style>
......
<p class="hongkong">刘德华</p>
<h1 class="hongkong">张学友</h1>
<p class="hongkong">何炅</p>
<h1 id="hunang">汪涵</h1>


E 挑选器团体申明 (挑选器之间应用逗号)

拷贝编码
编码以下:

<style type="text/css">
p,h1,.hongkong,#hongkong,h1.hongkong{
color:red;
}
</style>
......
<p class="hongkong">刘德华</p>
<h1 id="hongkong">张学友</h1>


F 挑选器的嵌套循环 (挑选器之间应用空格)


拷贝编码
编码以下:

<style type="text/css">
/* 只设定<div>下的<span>下的<p>标识为鲜红色 */
div#myid span .hongkong{
color:red;
}
</style>
......
<div id="myid">
<span><p class="hongkong">刘德华</p></span>
<p class="hongkong">郭富城</p>
</div>
<p class="hongkong">张学友</p>


G 子挑选器:用来挑选1个父元素立即的子元素,不包含子元素的子元素。(挑选器之间应用超过号)


拷贝编码
编码以下:

<style type="text/css">
/* 应用“子挑选器”示例 */
.div1>p{
color:red;
}
/* 不应用“子挑选器”示例 */
.div2 p{
color:blue;
}
</style>
......

应用“子挑选器”示例<hr/>
<div class="div1">
<p>aaaaa</p>
<span><p>bbbbb</p></span>
</div>
<!------------------------------------>
不应用“子挑选器”示例<hr/>
<div class="div2">
<p>aaaaa</p>
<span><p>bbbbb</p></span>
</div>
留意:

1、子挑选器的设定在IE 6 下应用失效(因此自己不强烈推荐常常应用);

2、假如嵌套循环的父子标识是同1种标识,子挑选器的设定也将应用失效。如:<p><p>父子标识是同1种标识</p><p>;



H 特性挑选器:对于HTML 标识中的特性开展挑选的。


拷贝编码
编码以下:

<style type="text/css">
/* 将有title特性的<p>设定为鲜红色 */
p[title]{
color:red;
}
/* 将title特性值为“t2”的<p>设定为蓝色 */
p[title=t2]{
color:blue;
}
</style>
......
<p>无title特性的段落标识</p>
<p title="t1">将有title特性的p标识设定为鲜红色</p>
<p title="t2">将title特性值为"t2"的p标识设定为蓝色</p>

留意:

1、特性挑选器的设定在IE 6 下应用失效(在IE 7 下应用合理);

2、特性挑选器 CSS3 规范也有许多十分好用的特点,但IE 7 仍然不适用;