HTML 2—选择器

 常用选择器（demo.html）

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>常用选择器</title>
    <style type="text/css">
        /*为页面中的所有的p元素，设置一个字体颜色为红色*/
        /*
            元素选择器：
                作用:通过元素选择器可以选则页面中的所有指定元素
                语法:
                    标签名{

                    }

                p{
                    color: red;
                }

                h1{
                    color: red;
                }

            id选择器：
                通过元素的id属性值选中唯一的一个元素
                语法:
                    #id属性值{

                    }

            类选择器：
                通过元素的class属性值选中一组元素
                语法:
                .class属性值{

                }
        */
        #p1 {
            font-size: 20px;
        }

        .p2 {
            color: blue;
        }

        .hello {
            font-size: 50px;
        }

        /*
            为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色

            #p1 {
                background-color: yellow;
            }

            .p2 {
                background-color: yellow;
            }

            h1{
                background-color: yellow;
            }

            改进：选择器分组(并集选择器)
                通过选择器分组可以同时选中多个选择器对应的元素
                语法:
                    选择器1 , 选择器2 , 选择器N {

                    }
        */
        #p1,
        .p2,
        h1 {
            background-color: yellow;
        }

        /*
            通配选择器
                他可以用来选中页面中的所有的元素
                语法: *{

                }
        */
        * {
            color: red;
        }

        /*
            为拥有 class p3 span 元素设置一个背景颜色
            复合选择器(交集选择器)
                作用：
                    可以选中同时满足多个选择器的元素
                语法：
                    选择器1 选择器2 选择器N{

                    }
        */
        span.p3 {
            background-color: yellow;
        }

        /*
            为div中的span设置一个颜色为绿色
            后代元素选择器
                作用：
                    选中指定元素的指定后代元素
                语法：
                    祖先元素 后代元素{

                    }
        */
        div span {
            color: greenyellow;
        }

        #d1 span {
            background-color: brown;
        }

        /*
            选中id为d1中的div中的p元素中的span元素
        */
        #d1 p span {
            font-size: 50px;
        }

        /*
            为div的子元素span设置一个背景颜色
            子元素选择器
                作用：
                    选中指定父元素的指定子元素
                语法：
                    父元素>子元素
            IE6及以下的浏览器不支持子元素选择器
        */
        div>span {
            background-color: chocolate;
        }
    </style>
</head>

<body>
    <h1>悯农</h1>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p id="p1">锄禾日当午</p>
    <p>锄禾日当午</p>
    <!--
        我们可以为元素设置class属性，
        class属性和id属性类似，只不过class属性可以重复
        可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
    -->
    <p class="p2 hello">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
    <p>锄禾日当午</p>
    <p class="p3">锄禾日当午</p>
    <span class="p3">汗滴禾下土</span>

    <!--
        元素之间的关系
            父元素:直接包含子元素的元素
            子元素:直接被父元素包含的元素
            祖先元素:直接或间接包含后代元素的元素，父元素也是祖先元素
            后代元素:直接或间接被祖先元素包含的元素，子元素也是后代元素
            兄弟元素:拥有相同父元素的元素叫做兄弟元素
    -->
    <div>
        <span>我是div标签中的span</span>
        <p><span>我是p标签中的span</span></p>
    </div>

    <div id="d1">
        <p><span>我是p标签中的span</span></p>
    </div>

    <span>我是body中的span元素</span>

</body>

</html>

伪类选择器和伪元素（demo01.html）

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>伪类选择器和伪元素</title>
    <style type="text/css">
        /*
            伪类专门用来表示元素的一种的特殊的状态，
                比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
                当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
        */

        /*
            为没访问过的链接设置一个颜色为绿色
                :link 
                    表示普通的链接(没访问过的链接)
        */
        a:link {
            color: yellowgreen;
        }

        /*
            为访问过的链接设置一个颜色为红色
                :visited 表示访问过的链接
                    浏览器是通过历史记录来判断一个链接是否访问过
                    由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
        */
        a:visited {
            color: red;
        }

        /* :hover 伪类表示鼠标移入的状态*/
        a:hover {
            color: skyblue;
        }

        /* :active 表示的是超链接被点击的状态*/
        a:active {
            color: black;
        }

        /* :hover 和 :active也可以为其他元素设置*/
        p:hover {
            background-color: yellow;
        }

        p:active {
            background-color: orange;
        }

        /* 文本框获取焦点以后，修改背景颜色为黄色*/
        input:focus {
            background-color: yellow;
        }

        /*
            为p标签中选中的内容使用样式
            可以使用::selection伪类
            注意:这个伪类在火狐中需要采用另一种方式编写::-moz-selection
        */
        /*兼容火狐*/
        p::-moz-selection {
            background-color: orange;
        }

        /*兼容大部分浏览器的*/
        p::selection {
            background-color: orange;
        }

        /*使用伪元素来表示元素中的一些特殊的位置*/
        /*为p中第一个字符来设置一个特殊的样式*/
        p::first-letter {
            color: red;
            font-size: 40px;
        }

        /*为p中第一行来设置一个背景颜色为黄色*/
        p::first-line {
            background-color: yellow;
        }

        /*
            ::before 表示元素最前边的部分
            ::after 表示元素的最后边的部分
            一般before和after都需要结合content这个样式一起使用，
            通过content可以向before或after的位置添加一些内容
        */
        p::before {
            content: "送别 ";
        }

        p::after {
            content: "2020/4/19";
            color: orange;
            font-size: 15px;
        }
    </style>
</head>

<body>
    <a class="" href="http://www. baidu.com">访问过的链接</a>
    <br /><br />
    <a href="http://www.baidu123456.com">没访问过的链接</a>

    <p>
        <br />
        长亭外，古道边，芳草碧连天。晚风拂柳笛声残，夕阳山外山。<br />
        天之涯，地之角，知交半零落。一壶浊酒尽余欢，今宵别梦寒。<br />
        长亭外，古道边，芳草碧连天。问君此去几时还，来时莫徘徊。<br />
        天之涯，地之角，知交半零落。人生难得是欢聚，惟有别离多。<br />
    </p>

    <!-- 使用input可以创建一个文本输入框-->
    <input type="text" />

</body>

</html>

 属性选择器

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>属性选择器</title>
    <style type="text/css">
        /*
            为所有具有title属性的p元素，设置一个背景颜色为黄色
            属性选择器
                作用：可以根据元素中的属性或属性值来选取指定元素
                语法：
                    [属性名]选取含有指定属性的元素
                        p[title]{
                            background-color: yellow;
                        }

            为title属性值是hello的元素设置一个背景颜色为黄色
                    [属性名="属性值"] 选取含有指定属性值的元素
                        p[title="hello"]{
                            background-color: yellow;
                        }
            为title属性值以ab开头的元素设置一个背景颜色为黄色
                    [属性名^="属性值"]选取属性值以指定内容开头的元素
                        p[title^="ab"]{
                            background-color: yellow;
                        }
            为title属性值以c结尾的元素设置一个背景颜色为黄色
                    [属性名$="属性值"]选取属性值以指定内容结尾的元素
                        p[title$="c"]{
                            background-color: yellow;
                        }
            为title属性值含有c的元素设置一个背景颜色为黄色
                    [属性名*="属性值"]选取属性值含有某个内容的元素
                        p[title*="c"]{
                            background-color: yellow;
                        }
        */
        p[title*="c"] {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!--
        title属性，这个属性可以给任何标签指定
        当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
    -->
    <p title="hello">我是一个段落</p>
    <p>我是一个段落</p>
    <p title="hello">我是一个段落</p>
    <p title="abbc">我是一个段落</p>
    <p title="abccd">我是一个段落</p>
    <p title="abc">我是一个段落</p>
</body>

</html>

 子元素选择器和兄弟元素选择器

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>子元素选择器</title>
    <style type="text/css">
        /*
            为第一个p标签设置一个背景颜色为黄色
                :first-child 可以选中第一个子元素
                :last-child 可以选中最后一个子元素
                :nth-child 可以选中任意位置的子元素
                    该选择器后边可以指定一个参数，指定要选中第几个子元素
                    even 表示偶数位置的子元素
                    odd 表示奇数位置的子元素
                :first-of-type
                :last-of-type
                :nth-of-type
                    和:first-child这些非常的类似，
                    只不过child，是在所有的子元素中排列
                    而type，是在当前类型的子元素中排列
        */
        body>p:first-child {
            background-color: yellow;
        }

        p:first-child {
            background-color: yellow;
        }

        p:nth-child(3) {
            background-color: yellow;
        }

        /*
            为span后的一个p元素设置一个背景颜色为黄色
            后一个兄弟元素选择器
                作用：可以选中一个元素后紧挨着的指定的兄弟元素
                语法：前一个 + 后一个
                    span + p{
                        background-color: yellow;
                    }
            选中后边的所有兄弟元素
                语法:前一个 ~ 后边所有
                    span ~ p{
                        background-color: yellow;
                    }
        */
    </style>
</head>

<body>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <span>我是一个span</span>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <!--p既是div中第一个p元素也是最后一个p元素-->
    <div>
        <p>我div中的p标签</p>
    </div>
</body>

</html>

 否定伪类和a的伪类

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>否定伪类和a的伪类</title>
    <style type="text/css">
        /*
            为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
            否定伪类：
                作用：可以从已选中的元素中剔除出某些元素
                语法：
                    :not(选择器)
        */
        p:not(.hello) {
            background-color: yellow;
        }

        /*
            涉及到a的伪类一共有四个:
                :link
                :visited
                :hover
                :active
            而这四个选择器的优先级是一样的。
        */
        a:link {
            color: yellowgreen;
        }

        a:visited {
            color: red;
        }

        /*鼠标移入*/
        a:hover {
            color: orange;
        }

        /*正在点击*/
        a:active {
            color: cornflowerblue;
        }
    </style>
</head>

<body>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p class="hello">我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>

    <br /><br />
    <a href="http://www.baidu.com">访问过的链接</a>
    <br /><br />
    <a href="http://www.baidu123456.com">未访问过的链接</a>

</body>

</html>

样式的继承和选择器的优先级

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>样式的继承和选择器的优先级</title>
    <style type="text/css">
        body {
            font-size: 30px;
        }

        /*
            当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
            这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级(权重)决定
            优先级高的优先显示

            优先级的规则
                内联样式，优先级 1000
                id选择器，优先级 100
                类与伪类，优先级 10
                元素选择器，优先级 1
                通配*，优先级0
                继承的样式，没有优先级

            当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，
            但是注意，选择器优先级计算不会超过他的最大的数量叛
            如果选择器的优先级一样，则使用靠后的样式。

            并集选择器的优先级是单独计算
            div ,p,#p1.hello{}

            可以在样式的最后，添加一个 !important ，则此时该样式将会获得一个最高的优先级，
                将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用 !important
        */
        .p1 {
            background-color: yellow;
            color: black;
        }

        .p3 {
            color: aquamarine;
        }

        p {
            background-color: red;
        }

        #p2 {
            background-color: green;
        }

        p#p2 {
            background-color: brown;
        }
    </style>
</head>

<body>
    <!--
        像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
        利用继承，可以将一些基本的样式设置给祖先元素， 这样所有的后代元素将会自动继承这些样式
    
        但是并不是所有的样式都会被子元素所继承，比如:背景相关的样式都不会被继承、边框相关的样式、定位相关的
    -->
    <div style="background-color: yellow;">
        <p>
            我是p标签中的文字
            <span>我是span中的文字</span>
        </p>
    </div>
    <span>我是p元素外的span</span>

    <p class="p1 p3" id="p2">我是一个段落
        <span>我是p标签中的span</span>
    </p>
</body>

</html>

 

posted @ 2020-04-19 10:26  我等着你  阅读(243)  评论(0)    收藏  举报