zoukankan      html  css  js  c++  java
  • css的选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS的选择器 </title>
        <style>
            p:first-letter{color:red;}
            p:before{content:"我是段落前的内容 "; color: green;}
            p:after{content: '我是段落后的内容 ';color: blue;}
        </style>
    </head>
    <body>
    <p><strong>我是段落内容 </strong></p>
    
    <dl>
        <dt><strong>CSS的选择器</strong></dt>
        <dd>
            <dl>
                <dt><strong>基本选择器</strong></dt>
                <dd>标签选择器 div{}</dd>
                <dd>id选择器 .box{}</dd>
                <dd>类选择器 #box{}</dd>
    
                <dt><strong>高级选择器</strong></dt>
                <dd>后代选择器 div p{} 选中的是子子孙孙</dd>
                <dd>子代选择器 div>p{} 选中的是儿子</dd>
                <dd>组合选择器(并集选择器) body,div,p,ul,ol,dl,form,table,span,label,img{padding:0; margin:0;}</dd>
                <dd>交集选择器 第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active</dd>
                <dd>属性选择器 input[type=text] label[for="username"]</dd>
                <dd>通配符选择器 *{padding:0; margin:0;}</dd>
                <dd>
                    <dl>
                        <dt>reset.css</dt>
                        <dd>body,div,p,ul,ol,dl,form,table,span,label,img{padding:0; margin:0;}</dd>
                        <dd>a{text-decoration:none;}</dd>
                        <dd>input{border:0; outline:0;}</dd>
                    </dl>
                </dd>
                <dd>
                    <dl>
                        <dt>伪类选择器(爱恨准则)</dt>
                        <dd>a:link 没有被访问a标签的样式</dd>
                        <dd>a:visited 访问过后的a标签样式</dd>
                        <dd>a:hove 鼠标悬停时a标签的样式</dd>
                        <dd>a:active 鼠标按住时a标签的样式</dd>
                    </dl>
                </dd>
                <dd>
                    <dl>
                        <dt>伪元素选择器</dt>
                        <dd>p:first-letter{} 设置第一个首字母样式</dd>
                        <dd>p:before{} 在...之前,添加内容</dd>
                        <dd>p:after{} 在...之后,添加内容</dd>
                    </dl>
                </dd>
            </dl>
        </dd>
    </dl>
    </body>
    </html>

    我是段落内容 

    CSS的选择器
    基本选择器
    标签选择器 div{}
    id选择器 .box{}
    类选择器 #box{}
    高级选择器
    后代选择器 div p{} 选中的是子子孙孙
    子代选择器 div>p{} 选中的是儿子
    组合选择器(并集选择器) body,div,p,ul,ol,dl,form,table,span,label,img{padding:0; margin:0;}
    交集选择器 第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active
    属性选择器 input[type=text] label[for="username"]
    通配符选择器 *{padding:0; margin:0;}
    reset.css
    body,div,p,ul,ol,dl,form,table,span,label,img{padding:0; margin:0;}
    a{text-decoration:none;}
    input{border:0; outline:0;}
    伪类选择器(爱恨准则 LoVe HAte)
    a:link 没有被访问a标签的样式
    a:visited 访问过后的a标签样式
    a:hove 鼠标悬停时a标签的样式
    a:active 鼠标按住时a标签的样式
    伪元素选择器
    p:first-letter{} 设置第一个首字母样式
    p:before{} 在...之前,添加内容
    p:after{} 在...之后,添加内容
  • 相关阅读:
    绘图类
    画笔类
    创建模态,非模态对话框
    菜单类
    [WPF]程序随系统自启动
    [WPF]xml序列化以及反序列化数据
    [WPF]项目整合Metro和MaterialDesignInXamlToolkit UI框架
    [WPF]鼠标移动到Button颜色改变效果设置
    [Leetcode] 寻找数组的中心索引
    [Leetcode]在排序数组中查找元素的第一个和最后一个位置
  • 原文地址:https://www.cnblogs.com/lilyxiaoyy/p/11116752.html
Copyright © 2011-2022 走看看