day66-CSS伪类选择器和伪元素选择器 

1. 伪类选择器：hover 和 focus 比较常用。
    1.1 hover：把鼠标移动到内容迈腾2020款TSI DSG舒适型的时候，字体变成了红色。
        html: 
            <body>
                    <p>迈腾2020款TSI DSG舒适型</p>
            </body>
        css:   p:hover{color:red}   注意p和hover中间用冒号：分开。p代表所有p标签。

    1.2 focus：点击文本输入框，背景颜色变成黄色。
        html: 
            <body>
                    <input type="text">
            </body>
        css:   input:focus{outline=0;background-color: yellow}   outline指外框， 注意p和hover中间用冒号：分开。

    1.3 active: 点击文本输入框，背景闪现黄色。如果鼠标左键按住输入框内部不放，背景一直都是黄色，放开之后黄色消失。
        html: 
            <body>
                    <input type="text">
            </body>
        css:   input:active{background-color: yellow}   
        
        同样适合用于文字：点击文字，闪现黄色，按住不放是黄色，放开之后黄色消失。
        html: 
            <body>
                    <p>迈腾2020款TSI DSG舒适型</p>
            </body>
        css:   p:active{color:yellow}

    1.4 link：浏览器刚打开的时候，没访问过的链接，把baidu的字体颜色设置为绿色，接下来如果访问这个链接之后，baidu的字体颜色会恢复到原来的紫色。注意id不能是纯数字。
        html: 
            <body>
                    <a id="d1" href="http://www.baidu.com">baidu</a>
            </body>
        css:   #d1:link{color:green}

    1.5 visited: 浏览器刚打开的时候，没访问过的链接，baidu的字体颜色默认是蓝色，接下来如果访问这个链接之后，baidu的字体颜色会变成红色。
        html: 
            <body>
                    <a id="d1" href="http://www.baidu.com">baidu</a>
            </body>
        css:   #d1:visited{color:red}

2. 伪元素选择器
    2.1 first-letter ：常用的给首字母设置特殊样式
        html: 
            <body>
                    <p>迈腾2020款TSI DSG舒适型</p>
            </body>
        css:   p:first-letter{font-size:38px;color:red} 首字母38像素，红色。

    2.2 before ：在每个<p>标签的内容之前插入*
        html: 
            <body>
                    <p>迈腾2020款TSI DSG舒适型</p>
                <p>迈腾2020款TSI DSG舒适型</p>
            </body>
        css:   p:before{content:'*';color:red}

    
    2.3 after ：在每个<p>标签的内容后面插入[?]
        html: 
            <body>
                    <p>迈腾2020款TSI DSG舒适型</p>
                <p>迈腾2020款TSI DSG舒适型</p>
            </body>
        css:   p:after{content:"[?]";color:red}

 

posted @ 2020-02-25 10:32  梁劲雄  阅读(155)  评论(0)    收藏  举报