第十七天（乱了）

CSS

2.2、层次选择器

1.后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 儿子

body p{
    background: red;
}

2.子选择器 一代，儿子

body>p{
    background: green;
}

3.相邻兄弟选择器:只有一个，相邻（向下）

.active + p{
    background: red;
}

4.通用选择器:当前选中元素的向下的所有兄弟元素

.active~p{
    background: red;
}

2.3、结构伪类选择器

伪类：条件 （带：号的）

/*
ul的第一个子元素
​
ul的最后一个子元素
 */
ul li:first-child{
    background: #8658bb;
}
​
ul li:last-child{
    background: #21bb3e;
}
​
​
/*选中p1  :定位到父元素，选中当前的第一个元素（body父元素）
选中当前p元素的父级元素，选中父级元素的第一个
*/
p:nth-child(1){
    background: red;
}
/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(2){
    background: yellow;
}

2.4、属性选择器

• 把id和class相结合

属性名， 属性名=属性值（正则）

• = 绝对等于

• *= 包含这个元素

• ^=以这个开头

• $=以这个结尾

存在id属性的元素 a[]{}

a[id]{ background: yellow; }

id等于first的元素

a[id=first]{
    background: yellow;
}

class中有links的元素

a[class="links"]{

background: yellow;

}

选中href中的以http开头的元素

a[href^=http]{

background: yellow;

}