css选择器

css基本选择器

/*标签选择器*/
h1{
    background: bisque;
    border-radius: 15px;
}
p{
    font-size: 25px;
}
/*类选择器*/
.class1{
    color: green;
}
.class2{
    color: blue;
}
/*id选择器*/
#idselect{
    color: red;
}

css层次选择器

/*后代选择器，选择标签内含的算有p元素*/
ul p{
    background: greenyellow;
}
ol p{
    background: darkorange;
}
/*子选择器，选择标签包含的第一层次的p元素*/
body>p{
    background: deeppink;
}
/*弟弟选择器，选择该元素同级下的第一个p元素，可以使用id定位一个元素，或类选择器定位某类元素*/
#p1+p{
    background: darkorchid;
}
/*通用选择器（弟弟们选择器），选择同级下的所有p元素*/
.select~p{
    border-radius: 20px;
}

css结构伪类选择器

/*每个元素中的第一个p元素*/
p:first-child{
    background: yellow;
}
/*每个元素中的最后一个p元素*/
p:last-child{
    background: dodgerblue;
}
/*每个元素的所有子元素中位置为2并且是p的元素*/
p:nth-child(2){
    background: dodgerblue;
}
/*每个元素的p子元素中，序号为2的*/
p:nth-of-type(2){
    background: red;
}

css属性选择器

/*选择带有id属性的元素*/
a[id]{
    background: yellow;
}

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

/*class属性中包含item的元素*/
a[class*="item"]{
    background: deeppink;
}

/*选中href中以http开头的元素*/
a[href^=http]{
    background: blueviolet;
}

/*选中href中以pdf结尾的元素*/
a[href$=pdf]{
    background: gray;
}