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