html层次选择器例题,jQuery选择器之层级选择器

子选择器与后代选择器

div下的第一个p元素

div下的第一个p元素

div下的article下的p元素

div下的article下的p元素

//子选择器

//$('div > p') 选择所有div元素里面的子元素P

?.css("border", "1px groove red");

//后代选择器

//$('div p') 选择所有div元素里面的p元素

?.css("border", "1px groove red");

相邻兄弟选择器与一般兄弟选择器

兄弟节点div, +~选择器不能向前选择

选择器span元素

span后第一个兄弟节点div

兄弟节点div

子元素div

兄弟节点span,不可选

兄弟节点div

//相邻兄弟选择器

//选取prev后面的第一个的div兄弟节点

?.css("border", "3px groove blue");

//一般相邻选择器

//选取prev后面的所有的div兄弟节点

?.css("border", "3px groove blue");

.left,

.right {

width: 300px;

height: 120px;

}

.left div,

.right div {

width: 100px;

height: 90px;

padding: 5px;

margin: 5px;

float: left;

background: #bbffaa;

border: 1px solid #ccc;

}

.bottom {

width: 800px;

}

.bottom div,

.bottom span {

display: block;

width: 80px;

height: 80px;

margin: 5px;

background: #bbffaa;

float: left;

font-size: 14px;

}

.bottom .small {

width : 60px;

height : 25px;

font-size : 12px;

background : #fab;

}