1)交集选择器(对同时拥有选择器中的内容进行选择)
如:<style> div.box { } </style>
就是对同时拥有div和box的内容进行选择。
2)并集选择器(只要含有就对其选中【可以有多个但必须用英文的逗号隔开】
如:<style>div,.box { }</style>
就是对拥有div与box的内容进行选中。
3)相邻兄弟选择器(用于完成选择与某标签相邻的某标签)
如:<style>div + p { }</style>
就是对与div相邻的并且在div后的p标签。{注:改标签只会选中在其之后且相邻的标签}
4)通用的兄弟选择器(用于完成选择某标签的全部的某兄弟标签)
如:<style>div + p { }</style>
就是选中div的所有兄弟标签p。{注意:仍然只会选择其后的所有指定的兄弟标签}
5)伪类选择器(伪类选择器是以:开头的选择器。伪类选择器需要配合其它选择器一起使用。)
用此类选择器需要设置一个class后命名的.xxx
平时我在使用时用的是div.box并按tab键快捷建一个<div class="box"></div>
1>:hover (表示鼠标移到元素上时会自动触发的效果。)
如: .box {
width: 100px;
height: 100px;
border: 1px solid #000000;
}
.box:hover {
cursor: pointer; /*鼠标指针*/
background-color: red;
}
就是当鼠标移到div上时,背景颜色变为红色,同时鼠标指针变为小手形状
2>first-child
在平时练习中我用来联系该选择器的方式为ul>li*n,n为你想要创建多少的个li标签并且可以用
list-style: none; 去掉li前面的小圆点
如:first-child用于选择第一个子节点
last-child用于选择最后一个字节点
nth-child用于选择第n个节点(n>=0)
3>beforeAndafter
目前我用该标签来对<div.box>的边角进行添加红线尖
代码如下:
.box {
width: 100px;
height: 100px;
border: 1px solid #000000; 表示四个边都有,它们的顺序是上、右、下、左
position: relative; 相对定位
}
.box:before {
content: "";
width: 10px;
height: 10px;
border-top: 1px solid red; 上边线
border-left: 1px solid red; 左边线
position: absolute; 绝对定义
left: -1px;
top: -1px;
}
.box:after {
content: "";
width: 10px;
height: 10px;
border-right: 1px solid red; 右边线
border-bottom: 1px solid red; /*下边线
position: absolute; 绝对定义
right: -1px;
bottom: -1px;
}
红色部分是用于调整红色尖的位置(注意:在.box中一定要加一个position且.box一定要设置relative,在样式设计中一定要设置position:和absolute)