css入门（二）—— 选择器

最新推荐文章于 2022-11-13 17:45:56 发布

少年闲客

最新推荐文章于 2022-11-13 17:45:56 发布

阅读量257

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_40633131/article/details/104299014

版权

css 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1. 元素id和class
    A. id和class是html中两个最基本的公共属性。
    B. 在同一个页面中，不允许出现两个相同的id，id是页面元素的唯一标识。
    C. 在同一个页面中，可以有相同的class（甚至标签不同也可以），以便对具有相同class的元素定义相同的css样式。另外，一个元素可以有多个class。
2. css选择器
    A. css选择器就是用一种方式选中需要的标签，实际上有多种选择方式。
    B. css选择器的格式为：选择器
                        {
                            样式属性1:取值1;
                            样式属性2:取值2;
                            ……
                        }
       注：不同选择器的”选择器“部分语法不同，”样式“部分语法相同
    2.1. 基本选择器
    2.1.1. 元素选择器
            A. 就是选择元素，对相同的元素设置同样的css样式。
            B. ”选择器“语法直接为"标签"。
            e.g. <head>
                    <title>css入门</title>
                    <style type="text/css">
                        /* 设置所有p标签都显示为红色 */
                        p {
                            color: red;
                        }
                    </style>
                </head>

                <body>
                    <p>a</p>
                    <p>b</p>
                    <div>c</div>
                </body>
    2.1.2. id选择器
            A. 为单个元素设置一个id，对相应的元素设置css样式。
            B. ”选择器“语法为"#idName"
            e.g. <head>
                    <title>css入门</title>
                    <style type="text/css">
                        #first {
                            color: red;
                        }
                    </style>
                </head>

                <body>
                    <p>a</p>
                    <p>b</p>
                    <div id="first">c</div>
                </body>
    2.1.3. class选择器
            A. 为单个或多个元素设置class，对相应的元素设置css样式。
            B. ”选择器“语法为".className"
            e.g. <head>
                    <title>css入门</title>
                    <style type="text/css">
                        .xxx {
                            color: red;
                        }
                    </style>
                </head>

                <body>
                    <p>a</p>
                    <p class="xxx">b</p>
                    <div class="xxx">c</div>
                </body>
    2.2. 其他选择器
    2.2.1. 子元素选择器
            A. 选择某个元素的子元素，对其设置css样式。
            B. ”选择器“语法为”选择器1 选择器2“，中间有空格。
            e.g. <head>
                    <title>css入门</title>
                    /* id为xxx的元素中子元素id为zzz的元素显示为红色 */
                    <style type="text/css">
                        #xxx #yyy {
                            color: red;
                        }
                    </style>
                </head>

                <body>
                    <div id="xxx">
                        <p id="yyy">a</p>
                        <p id="zzz">b</p>
                    </div>
                </body>
    2.2.2. 相邻选择器
            A. 选择某元素的下一个元素，对其设置css样式，这两个元素必须是同级元素。
            B. ”选择器“语法为”#idName+标签“。
            e.g. <head>
                    <title>css入门</title>
                    <style type="text/css">
                        /* id为yyy的下一个div显示为红色 */
                        #yyy+div
                        {
                            color:red;
                        }
                    </style>
                </head>

                <body>
                    <div id="xxx">
                        <p id="yyy">a</p>
                        <div>b</div>
                        <p>c</p>
                        <p>d</p>
                        <p>e</p>
                    </div>
                </body>
    2.2.3. 群组选择器
            A. 对多个选择器对应的所有元素设置css样式（取并集，不是交集）。
            B. ”选择器“语法为”选择器1,选择器2“。
            e.g. <head>
                    <title>css入门</title>
                    <style type="text/css">
                        #yyy,
                        #zzz,
                        .ccc {
                            color:red;
                        }
                    </style>
                </head>

少年闲客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css入门（二）—— 选择器

1. 元素id和class A. id和class是html中两个最基本的公共属性。 B. 在同一个页面中，不允许出现两个相同的id，id是页面元素的唯一标识。 C. 在同一个页面中，可以有相同的class（甚至标签不同也可以），以便对具有相同class的元素定义相同的css样式。另外，一个元素可以有多个class。2. css选择器 A. css选择器就是用一种方...
复制链接

扫一扫