CSS资料之选择器

最新推荐文章于 2024-10-14 09:20:17 发布

宅羽

最新推荐文章于 2024-10-14 09:20:17 发布

阅读量167

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/sky6even/article/details/79327145

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

◆ 选择器的语法结构：

选择器{
      属性:值;
      属性:值;
      ……
      }

◆ 选择器分类：

★基础选择器                                                                 
  1）标签选择器
  2）类选择器
  3）ID选择器
  4）通配符选择器

★复合选择器

◆ 选择器的基本属性：

属性	解释
width	宽度
height	高度
background-color	背景颜色
font-size	文字大小
text-align:left \| center\| right	内容的水平对齐方式
text-indent	首行缩进
color	文字颜色

◆ 标签选择器：

标签选择器定义之后，会将页面所有的该标签都执行这个标签样式。

格式：

标签{属性：值;}

示例：div标签的文字大小为50像素，颜色为红色。

        div{
            font-size: 50px;
            color: red;
        }

◆ 类选择器：

★ 谁调用，谁生效。
★ 一个标签可以调用多个类选择器。
★ 多个标签可以调用同一个类选择器。

格式：

★ 定义：.自定义类名{属性:值;  属性:值；}

★ 调用：<标签名 class="自定义类名">

示例：

<head>
    <style type="text/css">
        .snow{
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="snow">Hello World!</div>
</body>

类选择器命名规则：

◎不能用纯数字或者数字开头来定义类名
◎不能使用特殊符号或者特殊符号开头（_）来定义类名
◎不建议使用汉字来定义类名
◎不推荐使用属性或者属性的值来定义类名

◆ ID选择器：

ID主要用于JS中，不提倡用id选择器去写样式

★ 一个ID选择器在一个页面只能调用一次。
★ 一个标签只能调用一个ID选择器。
★ 一个标签可以同时调用类选择器和ID选择器。

格式：

★ 定义：#自定义名称{属性:值;}

★ 调用：<标签名 id="自定义名称">

示例：

<head>
    <style type="text/css">
        #snow{
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="snow">Hello World!</div>
</body>

◆ 通配符选择器：

★ 给所有的标签都使用相同的样式。
★ 不推荐使用，增加浏览器和服务器负担。

格式：

*{属性:值;}

◆ 交集选择器：

即要满足使用了某个标签，还要满足使用了类（或id）选择器。

格式：

标签+类（或ID）选择器{属性：值；}

注：中间没有空格。

示例：既使用了标签选择器div，又使用了类选择器snow

<head>
    <style type="text/css">
        div.snow{
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="snow">Hello World!</div>
</body>

◆ 后代选择器：

后代选择器首选要满足包含（嵌套）关系。父集元素在前边，子集元素在后边。

★ 无限制隔代。
★ 标签、类选择器、ID选择器自由组合。

格式：

选择器+空格+选择器{属性：值;}

示例：

<head>
    <style type="text/css">
        div .snow{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p class="snow">Hello World!</p>
    </div>
</body>

◆ 子代选择器：

选中直接下一代标签，不允许隔代。

格式：

选择器>选择器{属性:值;}

示例：

<head>
    <style type="text/css">
        div>.snow{
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p class="snow">Hello World!</p>
    </div>
</body>

◆ 并集选择器：

主要用于使某些选择器定义的样式完全相同，或部分相同。

格式：

选择器,选择器,选择器{属性:值;}

示例：

<head>
    <style type="text/css">
        div,.snow{
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>
    <div>Hello</div>
    <p class="snow">World</p>
</body>