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{} 在...之后,添加内容
posted on 2019-07-01 21:11  lilyxiaoyy  阅读(218)  评论(0编辑  收藏  举报

返回
顶部