前端网页设计day02

目录

• 元素之间的关系
• 元素选择器
• 伪类选择器
• 伪元素
• 属性选择器

元素之间的关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫兄弟元素

<div>
    <span>我是div标签中的span元素</span>
    <p>
        <span>我是p标签中的span元素</span>
    </p>
</div>
<span>我是body标签中的span元素</span>

元素选择器

后代元素选择器：选中指定元素中的指定后代。语法：祖先元素 后代元素{}

后代元素可以有多个

<style>
    div span{color:red;}
    #d1 span{color:blue;}
</style>

子元素选择器：选中指定父元素的指定子元素。语法：父元素>子元素{}

IE6以下的浏览器不适用子元素选择器

<style>
    div > span{background-color:pink;}
</style>

伪类选择器

伪类专门用来表示元素的一种特殊状态，比如：访问过的超链接、普通的超链接、获取焦点的文本框。当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。

：link表示一个普通的链接（没有访问过的链接）

为没有访问过的超链接设置一个颜色为粉色。

<style>
    a:link{color:pink;}
</style>

：visited表示访问过的链接

为访问过的链接设置一个颜色为红色。（浏览器是通过历史记录来判断一个链接是否访问过）由于涉及到用户的隐私，所以使用visited伪类只能设置字体颜色。

<style>
    a:visited{color:red;}
</style>

：hover表示鼠标移入的状态

<style>
    a:hover{color:blue;}
</style>

：active表示链接正在被点击的状态

<style>
    a:active{color:black;}
</style>

：hover和：active也可以为其他元素设置，但IE6中不支持

：focus表示文本框获取焦点以后，修改背景颜色为黄色

<style>
    input:focus{
        background-color:yellow;
    }
</style>
<input type='text'></input>

：：selection伪类可以为p标签中选中的内容使用样式（在火狐浏览器中要采用第二种方式编写）

<style>
    p::selection{
        background-color:orange;
    }
    p::-moz-selection{
        background-color:orange;
    }
</style>

伪元素

：first-letter为第一个字符设置一个特殊的样式

<style>
    p:first-letter{
        color:blue;
        font-size:40px;
    }
</style>
<p>文字内容</p>

：first-line为第一行字符设置一个特殊的样式

<style>
    p:first-line{
        color:green;
        font-size:60px;
    }
</style>
<p>文字内容</p>

：before表示元素最前面的部分，一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容。

<style>
    p:before{
        content:"我会出现在文字最前边";
        color:red;
    }
</style>
<p>文字内容</p>

：after表示元素最后面的部分

<style>
    p:after{
        content:"我会出现在文字最后边";
        color:orange;
    }
</style>
<p>文字内容</p>

：before和：after中的内容在网页中无法被选中

属性选择器

title属性，这个属性可以给任何标签指定。当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示

<p title="我是title中的文字">我是一个段落</p>

属性选择器：可以根据元素中的属性或属性值来选取指定元素。语法：[属性名],选取含有指定属性的元素;[属性名="属性值"]，选取含有指定属性值的元素；[属性名^="属性值"]，选取属性值以指定内容开头的元素；[属性名$="属性值"]，选取属性值以指定内容结尾的元素；[属性名*="属性值"]，选取属性值以包含指定内容的元素；

<style>
    p[title]{background-color:yellow;}
</style>
<p title="abc">文字内容</p>
<p title="bcd">文字内容</p>
<p >文字内容</p>

为title属性值是hello的元素设置一个背景颜色为黄色

<style>
    p[title="hello"]{background-color:yellow;}
</style>
<p title="hello">文字内容</p>
<p title="bcd">文字内容</p>
<p >文字内容</p>

为title属性值以ab开头的元素设置背景颜色为黄色

<style>
    p[title^="ab"]{background-color:yellow;}
</style>
<p title="hello">文字内容</p>
<p title="abcd">文字内容</p>
<p >文字内容</p>

为title属性值以d结尾的元素设置背景颜色为黄色

<style>
    p[title$="d"]{background-color:yellow;}
</style>
<p title="hello">文字内容</p>
<p title="abcd">文字内容</p>
<p >文字内容</p>

为title属性值包含e的元素设置背景颜色为黄色

<style>
    p[title*="d"]{background-color:yellow;}
</style>
<p title="hello">文字内容</p>
<p title="abcde">文字内容</p>
<p >文字内容</p>