博客列表 >基本选择器的用法: 属性, 兄弟, 类型, 伪类7.4

基本选择器的用法: 属性, 兄弟, 类型, 伪类7.4

耿玉洁的博客
耿玉洁的博客原创
2019年07月08日 18:14:53809浏览

 选择器类型:

1.标签选择器  如 ul元素 

/*标签选择器*/
ul{
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    border: 1px solid red;
}
2.层级选择器 如 ul li  指的是UL的后代元素LI
ul li{
    list-style: none;
    width: 40px;
    height: 40px;
}
3.ID选择器 如#bg-bule
#bg-blue {
   /* 注意: id也可以给多个元素添加样式,但不要这样做 */
   background-color: lightblue;
}
4.类选择器 如 .bg-green
.bg-green {
   background-color: lightgreen;
}
5.属性选择器     指定li元素下 ID属性=bg-bule
li[id="bg-blue"] {
   border: 2px solid red;
}
6.组选择器    指定了 ID选择器#bg-blue 和 类选择器.bg-green
#bg-blue,.bg-green {
   border: 1px red solid;
}
7.相邻选择器  用+号 表示
#bg-blue + .bg-green {
   background-color: yellow;
}
8.兄弟选择器,被选择元素后面所有的元素
#bg-blue ~ * {
   background-color: blueviolet;
}
9.伪类:子元素选择器      子元素选择器的重点是 "child" 关键字上,关注的是子元素位置
ul :first-child {
   background-color: black;
}
可以简化
ul :nth-child(3) {
   background-color: black;
}
10.伪类:类型选择器    伪类 类型选择器关注点在 "type" 关键字上,重点是元素的类型
ul li:last-of-type{
   background-color: blue;
}
可以简化
ul li:nth-of-type(5) {
   background-color: yellow;

 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议