开心小窝

伪类选择器

伪类是添加选择器的关键词，是指定选中元素的特殊样式

例如hover-悬停 active-激活 focus-获取焦点 visited-访问过

注意：伪类定义 元素名::伪类名(单冒号)

a:hover{
    color:red;
}

伪元素选择器

伪元素是一个额外的选择器末的关键词

选中每个p元素的第一行字体设置为20px；字体颜色为红色；

注意：伪元素定义 元素名:伪元素(双冒号) w3c的规则

p::first-line{
    color:red;
    font-size:20px;
}

/**在p元素最后添加一个内容(多数用于清除浮动)**/
p::after{
    content:'我是最后的';
}
/**在p元素开始添加一个内容**/
p::before{
    content:'我是开头的';
    color:red;
}

后代选择器

后代组合器：通常用单个空格表示组合两个选择器，如后面的选择器选择的元素是上一个选择器选择的元素的子代，则它们被选中。

利用后代组合器的选择器称为后代选择器

div p{
    background-color:red;
}

子代选择器

当使用 >(大于号) 符匹配时 父元素下面的第一个子元素被选择。

span{
    color:black;
}
div > span{
    color:red;
}

第一层 第二层

最外面

相邻兄弟选择器

用 +(加号)连接两个选择器,且后面的那个元素紧跟前一个，并且两个选择器都属于同一个父元素。

p + span{
    color:red;
}

我们共同属于div

我是span标签

通用兄弟选择器

用 ~ 连接两个选择器,例如：A~B,只需A与B同级即可

p ~ span{
    color:red;
}

我们共同属于div

我是标签 我是span标签