选择器

91 阅读1分钟
<!--属性选择器-->
[href]{
    属性:值;
}
<!--所有带href属性的元素被选中-->       
<!--伪类选择器-->
    超链接伪类
    :link  <!--鼠标单击前-->
    :visited<!--鼠标单击后-->
    :hover <!--鼠标悬浮时-->
    :action<!--鼠标单击时-->
        :focus<!--可以用在<input>标签上 向拥有键盘输入焦点的元素添加样式-->
        :first-child <!--所有相邻元素中的第一个-->
        :last-child <!--所有相邻元素中的最后一个-->
        :nth-child(3) <!--具体选择第三个元素 -->
        伪元素选择器
        使用(::)/(:)都可以
        ::before	匹配出现在原有元素的实际内容之前的一个可样式化元素。
        ::after	匹配出现在原有元素的实际内容之后的一个可样式化元素。
        ::selection 文档中被选择的那部分 使用鼠标或其他选择设备选中的部分

        后代元素(父级在前,子代在后)
        .father .child{
            属性:值;
         }
         直接子元素   父 > 子   
         p>span {
             属性:值;
         }
        相邻兄弟  + :拥有同一个父元素的相邻元素
        h1 + p <!--代表 h1后面的第一个p元素的样式 -->
        h1+p{
            
            属性:值;
        }
        所有兄弟元素~ 
        p~span <!--p标签后的所有span-->
        p~span{
            属性:值;
        }
        选择器的并列
        元素.类名<!--类名为...的所有元素-->
        类名1,类名2{

        }<!--类名1,类名2都生效-->
        元素1,元素2{
        }<!--元素1,元素2都生效-->