一.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{/*标签选择器*/

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>

<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>

<divclass="class2">

</div>

div#id2 .class2div{

width:200px;

height:300px;background: yellow;

}

2.子选择器

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

CSS样式1；

CSS样式2；

.....；

}

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

例如：

<div>

<divid="id4">

</div>

div>#id4>p{

width: 200px;

height: 300px;background: yellow;

}

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

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

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

<div1>

<div2>

<div3>

</div3>

</div2>

</div1>

3.相邻兄弟选择器

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

兄弟选择器的写法：相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

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

CSS样式1；

CSS样式2；

.....}

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

例如：

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

</div>

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

1.a标签

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

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

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

target属性值：

1）_blank 在空白页打开

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

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

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

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

bb</a>

2，锚点（页面位置跳转地址）

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

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

例如：

<p>fdsdf</p>

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

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.如果同时设置宽高，那么图片就会拉伸或压缩。

秒客网

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

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

1.id选择器

2.类选择器（class选择器）

3.标签选择器

4.群组选择器

5.通配符选择器

二.相关层次的选择器

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

2.子选择器

3.相邻兄弟选择器

三.伪类选择器

1.什么叫伪类？

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

1.a标签

2，锚点（页面位置跳转地址）

3.a标签的伪类

五.img标签

相关文章