css

css选择器

1.id、class、名称
    p/ #id / .class / p.center -> class 为center的p元素/ * ->通用

2.组合选择器
    后代选择器(空格) div p ->div元素下的所有p元素
    子选择器 div > p -> div元素子元素的所有P元素 (区分后代选择器(空格))
    相邻兄弟选择器 div +p  -> div元素之后的p元素 (p元素生效一个,区分通用兄弟选择器)
    通用兄弟选择器 div ~ p -> div元素之后的所有p元素 (p元素生效全部)

3.伪类选择器
    什么是伪类?
        伪类用于定义元素的特殊状态。

        例如,它可以用于:

        设置鼠标悬停在元素上时的样式
        为已访问和未访问链接设置不同的样式
        设置元素获得焦点时的样式
        a:link {
            color: #FF0000;
            }
        p:first-child { 第一个p元素
            color: blue;
            }
        p i:first-child {选择器匹配所有 <p> 元素中的第一个 <i> 元素:
            color: blue;
            }
4.伪元素选择器
        什么是伪元素?
        CSS 伪元素用于设置元素指定部分的样式。

        例如,它可用于:

        设置元素的首字母、首行的样式
        在元素的内容之前或之后插入内容
        p::first-line { 所有 <p> 元素中的首行添加样式 ::first-line 伪元素只能应用于块级元素
            color: #ff0000;
            font-variant: small-caps;
            }
        h1::before { <h1> 元素的内容之前插入一幅图像
            content: url(smiley.gif);
            }
5.属性选择器
    设置带有特定属性或属性值的 HTML 元素的样式
    a[target] { 所有带有 target 属性的 <a> 元素
        background-color: yellow;
        }
    a[target="_blank"] { 
        background-color: yellow;
        }

6.边距
padding、margin、content、border

  

posted on 2022-07-26 14:20  HHMLXL  阅读(29)  评论(0)    收藏  举报

导航