h5学习之7(html中的高级选择器的种类和用法,a标签和img标签)

时间:2021-02-15 23:14:03

一.html中的高级选择器的种类和用法

1.id选择器

语法:#id名称{样式1;样式2;}

书写的位置:head标签中的style

<div id="qq">id选择器 </div>

#qq{/*id选择器*/

width:100px;height:30px;

color: burlywood;background: chartreuse;

    }

2.类选择器(class选择器)

语法:类名{样式1;样式2;}

写的位置:head标签中的style

<div class="ww">class选择器</div>

.ww{/*class选择器*/

width:200px;height:30px;

color: yellow;background: red;

text-align:center;

     }

3.标签选择器

语法:标签名{样式1;样式2;}

书写的位置:head标签中的style

<p>233</p>

p{/*标签选择器*/

width:100px;height:100px;

background: yellow;

     }


优先级

内嵌样式 > id选择器 > 类选择器 > 标签选择器

4.群组选择器

意义:就是同时对多个选择器进行相同的操作

注意:对于群组选择器,两个选择器之间必须用","(英文逗号)隔开,不然群组选择器无法生效

写法:selector1,selector2,...{

CSS样式1;

CSS样式2;

.....;

}

selector1,selector2,...指的是标签选择器或者类选择器 或者ID选择器

书写位置:head标签中的style

<div class="class1">class选择器</div>

<div id="div1">id选择器</div>

<p id="id3">id3</p>

<p>p标签</p>

<span class="class2">class2</span>

.class1,#div1,p,span{/*群组选择器*/

width: 200px;height: 30px;

color: yellow;background: red;

text-align: center;

     }

5.通配符选择器

语法:*表示所有意思  适用所有的html标签

*{CSS样式1;

  CSS样式2;

   .....;

}

二.相关层次的选择器

1.后代选择器,又称包含选择器

选择的是作为某个元素后代的元素

写法:选择器之间以空隔键隔开

语法:父...父选择器 父父选择器 父级选择器 子选择器{

CSS样式1;

CSS样式2;

.....;

}

作用:一级一级去寻找直到找到子选择器,然后对子级进行样式控制。一般标签的嵌套使用的比较多

实质:就是从最外层一层一层去找,直到找到你想要的那个标签,             

<div>

   <div id="id2">

<divclass="class2">

   <div>13343444</div>

   <p>121322345</p>

</div>

   </div>

</div>

div#id2.class2div{

width:200px;

height:300px;background: yellow;

}

2.子选择器

语法:父...父选择器>父父选择器>父级选择器>子选择器{

CSS样式1;

CSS样式2;

.....;

}

作用:从最外面层一层一层去找,直到找到想要的子元素为止,然后对该元素进行控制。

例如:

<div>

   <divid="id4">

      <p>456</p>

   </div>

</div>

div>#id4>p{

width: 200px;

height: 300px;background: yellow;

}

注意:子选择器与后代选择器的区别

子选择器一定找到的是直接子级,这里不包括子元素中的标签元素,只能控制div2的子级中div3和p2

后代选择器找的是子级,并且子级里面的所有元素都属于该元素的后代。可以控制该子级的所有后代,而后代选择器可以控制的是div2的所有后代div3,p1,p2

<div1>

   <div2>

      <div3>

         <p1></p1>

      </div3>

   <p2></p2>

   </div2>

</div1>

3.相邻兄弟选择器

可选择紧接在另一元素后的元素,且两者有相同的父级元素

兄弟选择器的写法:相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。

语法:兄弟1选择器+兄弟2选择器+兄弟...选择器{

CSS样式1;

CSS样式2;

.....}

注意:兄弟选择器一定选择的时与兄弟离得最近的下一个元素。它控制的元素也只有一个

例如:

<p>1</p>

<div></div>

<p>2</p>

div+p{  }

这个控制的时P2,二不是P1,虽然p1,P1与div离得都很近,但是p2是div的下一个,所以控制的是p2

三.伪类选择器

1.什么叫伪类?

伪类就是根据一定的特征对元素进行分类,而不是根据类容,名称,属性。

1)语法:link{

具体的样式;

}

适用:只有a标签有这个伪类,定义了超链接未被点级的元素

用法:

div a:link{

width:600px/*改变背景的大小*/

height:500px;

background: black;/*改变背景的颜色*/

}

2)选择器:visited{

具体样式;

}

适用:只有a标签有这个伪类,定义了超链接且被点级的元素

用法:

div a:visited{

width:600px/*改变背景的大小*/

height:500px;

background: black;/*改变背景的颜色*/

}

3)选择器:hover{

具体样式;

}

适用:只有所有标签有这个伪类,定义了鼠标悬浮在该元素时要呈现的状态。

用法:

div a:hover{

width:600px/*改变背景的大小*/

height:500px;

background: black;/*改变背景的颜色*/

}

4)选择器:active{

具体样式

}

适用:只有a标签有这个伪类,定义了鼠标点击该元素时要呈现的状态。

用法:

div a:active{

width:600px/*改变背景的大小*/

height:500px;

background: black;/*改变背景的颜色*/

}

<div>3

<a href="">4</a>

</div>

四.a标签的用法和它的伪类用法

1.a标签

<a>标签定义超链接,用于从一张页面链接到另一张页面

<a>标签最重要的属性是href属性,它指示链接的目标,也可以说是要链接的页面的地址

<a href="http://www.baidu.com"target="_blank">jjj</a>

语法:<a href="链接跳转地址"target="浏览器打开方式"name="锚点:用于页面不同位置的跳转,仅限当前文件"></a>

target属性值:

1)_blank 在空白页打开

<a href="http://www.baidu.com"target="_blank">百度</a>

2)_self(默认值)  在相同窗口打开跳转的地址

<a href="http://www.baidu.com"target="_self">dd</a>

3)_parent  在父框集中打开该链接

<a href="http://www.baidu.com"target="_parent">bb</a>

4)_top 在整个窗口中打开链接地址

<a href="http://www.baidu.com"target="_top">

<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>

bb</a>

2,锚点(页面位置跳转地址)

1)创建一个跳转点(锚点) 使用a标签的name属性或者id来指定锚点

<a name="jump"></a>  <a id="jump"></a>

2)a标签的herf的属性来指定跳转到的锚点

<a href="#jump"></a>

例如:

<p>fdsdf</p>

<a id="jump"></a>  <!--最终跳转的地方-->

<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>

<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>

<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>

<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>

<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"/>

<a href="#jump">回到顶部</a>

3.a标签的伪类

1) 链接点击按下未跳转前呈现的状态

a:link{color: red;}

2)被访问过后,呈现的颜色

a:visited{color: yellow;}

3)鼠标悬浮时呈现的状态

a:hover{color: chocolate;}

4)鼠标按下时呈现的状态

a:active{color: magenta;}

遵循的顺序:link-visited-hover-active

伪类选择器我们不需要在设置元素的class属性,因为系统默认已经设置了class,而类选择器在使用之前是需要给元素添加一个class属性的

五.img标签

写法:<imgsrc="图片的路径" alt="当图片不能正常显示时才会提示这句话" title="图片标题"/>

<imgsrc="http://img5.imgtn.bdimg.com/it/u=185038912,2074212025&fm=21&gp=0.jpg"

 alt="当图片不能正常显示时,我才显示" title="图片"/>

注意:

1.路径可以是本地图片地址,也可以是网络图片地址

2.alt属性一定要写

3.图片如果不设置宽高,那么显示的图片宽高会和原始图片大小保持一致

4.如果只设置宽高中的一个,那么另外一个就会等比例进行缩放

5.如果同时设置宽高,那么图片就会拉伸或压缩。