css选择器

CSS选择器

---

1.简单选择器

①.元素选择器，直接选择如：html body div h1 h2 table p等标签元素；

/*设置p标签字体颜色*/
<style>
    p{
        color:red;
    }
</style>

②.类选择器，选择元素的类属性；

<style>
.class{
    width:30px;
}
/*多个类复合应用*/
.class.center{
    background-color:red;
}
</style>

③.id选择器，选择元素的id属性，css商业代码中使用较少了，一般只剩下两个作用：配合表单或锚点使用；

<style>
#id{
    color:red;
}
</style>

2.上下文选择器

①.后代选择器，选择父元素下所有的同名元素；

/*会选择.container父元素下包含的所有的div元素*/
<style>
.container div{color:red}
</style>

②.父子选择器，用 > 符号规定只选择父元素的子元素；

<stytle>
.container > div{
    color:red;
}
</stytle>

③.同级相邻选择器，选择同级相邻的元素；

<style>
.item.center + .item{
    background-color:coral;
}
</style>

④.同级所有选择器，选择定位元素后的所有下文

<style>
.item.center ~ .item{
    background-color:yellow;
}
</style>

3.结构伪类选择器

①.不分组

:first-child :选择父类下的第一个子元素；

:last-child :选择父类下最后一个子元素；

:nth-child(n) :选择指定子元素，n为指定某个子元素；

:nth-child(2n或even) :选择为偶数的子元素；

:nth-child(2n-1或odd) :选择为奇数的子元素；

:nth-child(n + 4) :选择第4个和后面剩下的所有子元素；

:nth-last-child(-n + 3) :选择最后3个子元素；

:nth-last-child(2) :选择倒数第二个子元素；

②.分组

:last-of-type :选择最后一个；

:nth-of-type() : 指定分组中的一个元素；

:nth-of-type(-n + 3) :指定分组中的前三个；

:nth-last-of-type(-n + 2) :指定分组中最后两个；

4.伪类与伪元素

①.伪类

:target :必须配合ID，实现锚点操作；

:focus :当获取输入焦点时给与样式；

②.伪元素

::selection :只允许设置选中的文本的字体颜色和背景色；

<style>
input::selection{
    color:white;
    background:red;
}
</style>

::not() :用于不满足条件的元素；

<style>
.list > :not(:nth-of-type(3)){
    color:red;
}
</style>

::berore :在元素前添加内容；

:after :在元素后添加内容；

---

总结：

通过css选择器，可以快速的给目标元素添加样式，非常方便。