CSS选择器

克克林-Mr.白夜

已于 2023-02-22 15:30:22 修改

阅读量68

点赞数

文章标签： css html css3 Powered by 金山文档

于 2023-02-21 21:56:20 首次发布

本文链接：https://blog.csdn.net/mcbitch/article/details/129149362

版权

前言

CSS选择器用于选择你想要的元素的样式的模式。

一、基础选择器

标签选择器(元素选择器)

<!DOCTYPE html>
<html>
<!-- 标签选择器：指用HTML标签名称作为选择器，为页面中某一类标签设置统一的CSS样式 -->
<!-- 语法：
        标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }或者
        元素名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
 -->
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        /*设置p标签的属性*/
        p {
            color: red;
            font-size: 10px;
        }

        /*设置h1标签的属性*/
        h1 {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>段落一</p>
    <p>段落二</p>
    <h1>标题一</h1>
    <h1>标题二</h1>
</body>
</html>
<!-- 特点：能快速的为页面中同类型的标签统一样式。
     缺点：不能设计差异化样式。 
-->

id选择器

<!DOCTYPE html>
<html>
<!-- id选择器：使用#(英文井号)标识，后面紧跟id名 -->
<!-- 语法：
        #id名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
     注意：id不能相同
        例：<p id = "p1"></p>
           <p id = "p1"></p>
           这种写法是错的，id如同编号，元素的id是唯一的，只能对应于文档中某一个具体的元素
 -->
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        /*设置id为p1的元素属性*/
        #p1 {
            color: blueviolet;
        }

        /*设置id为p2的元素属性*/
        #p2 {
            color: pink;
        }

    </style>
</head>
<body>
<p id="p1">段落一</p>
<p id="p2">段落二</p>
</body>
</html>

类选择器

<!DOCTYPE html>
<html>
<!-- 类选择器：使用"."(英文点号)进行标识，后面紧跟类名
    语法：
        .类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    标签调用的时候设置属性 class = "类名" 即可。
-->
<head>
    <title>类选择器</title>
    <meta charset="UTF-8">
    <style type="text/css">
        /*设置类名为p1的标签属性*/
        .p1 {
            /*设置字体颜色*/
            color: red;
            /*设置字体粗细*/
            font-weight: bold;
        }

        /*设置类名为p2的标签属性*/
        .p2 {
            color: blue;
            font-weight: lighter;
        }

        /*设置所有类名为h1的标签属性*/
        .h1 {
            color: green;
        }
    </style>
</head>
    <body>
        <p class="p1">段落一</p>
        <p class="p2">段落二</p>
        <h1 class="h1">标题一</h1>
        <h1 class="h1">标题二</h1>
    </body>
</html>
<!-- 类选择器最大的优势是可以为元素对象定义单独或相同的样式 -->

id选择器和类选择器的区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

id选择器：就像人的身份证号码，全中国是唯一的，不得重复。

类选择器(class)：就像人的名字，是可以多次重复使用的，比如张伟这个名字，全国不知道多少人。

通配符选择器

<!--通配符选择器用"*"号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
语法：
    *{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-->
<!--例如：使用通配符选择器定义css样式，清除所有HTML标记的默认边距。-->
    *{ margin: 0 ; padding: 0 ; }
<!-- 注意：这个通配符选择器，认识就行了，平时很少用到 -->