CSS选择器（一）

最新推荐文章于 2023-03-08 13:37:24 发布

浅浅心事有谁知i

最新推荐文章于 2023-03-08 13:37:24 发布

阅读量1.8k

点赞数 12

文章标签： html css

本文链接：https://blog.csdn.net/wzfi20042002/article/details/113465305

版权

CSS选择器（一）

1.基本选择器

1.1标签选择器

标签选择器（元素选择器）是直接引用HTML里面的标签名称，比如 p、h1、em、a，甚至可以是 html 本身。标签选择器规定了网页元素在页面中默认的显示样式，因此标签选择器可以快速、方便地控制页面标签的默认显示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        h1 {color:blue;}
        h2 {color:silver;}
        p  {color:pink;font-size:20px;}
    </style>
</head>
<body>
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
    <p>这是p标签</p>
</body>
</html>

在这里插入图片描述

其基本语法格式如下：
标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; …}
标签选择器在css中是使用频率最高的一类选择器，最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

1.2类选择器

类选择器允许以一种独立于文档元素的方式来指定样式，能够为网页对象定义不同的样式，实现不同元素拥有相同样式，相同元素的不同对象拥有不同样式。

类选择器以一个点（.）前缀开头，然后跟随一个自定义的类名。

应用类样式可以使用class属性来实现，HTML所有元素都支持该属性，只要在标签中定义class属性，然后把该属性值设置为事先定义好的类选择器的名称即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        p  {color:blue;font-size:20px;}
        .apple {font-size: 30px;color:pink;}
    </style>
</head>
<body>
    <div class="apple">今天是个好日子。</div>
    <p class="apple">不过六级不改名。</p>
    <p>看到我请叫我去学习。</p>
</body>
</html>

在这里插入图片描述

指定类选择器：如果把标签与类捆绑在一起来定义选择器，可以限定类的使用范围，这样就可以指定该类仅适用于特定的标签范围内。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        p  {color:blue;font-size:20px;}
        div.apple {font-size: 30px;color:pink;}  /*指定标签的类样式*/
        .apple {font-size: 25px;}                  /* 类样式 */
    </style>
</head>
<body>
    <div class="apple">今天是个好日子。</div>
    <p class="apple">不过六级不改名。</p>
    <p>看到我请叫我去学习。</p>
</body>
</html>

在这里插入图片描述

1.3 ID选择器

ID选择器是以（#）号作为前缀，然后是一个自定义的ID名。应用ID选择器可以使用id属性来实现，HTML所有元素都支持该属性，只要在标签中定义id属性，然后把该属性值设置为事先定义好的ID选择器的名称即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        #box{background-color: pink;  /*定义盒子背景颜色*/
            height: 200px;              /*固定盒子高度*/
            width: 400px;               /*固定盒子宽度*/
        }
    </style>
</head>
<body>
    <div id="box">今天是个好日子。</div>
   
</body>
</html>

在这里插入图片描述

也可以为ID选择器指定标签范围，采用这种方法可以提高该样式的优先级。

针对上面的示例，可以在ID选择器前面增加一个div标签，这样div#box选择器的优先级会大于#box的优先级。在相同条件下，浏览器优先解析div#box选择器定义的样式。

**提示：**一般通过ID选择器来定义HTML框架结构的布局效果，因为HTML的框架元素的值都是唯一的。

1.4 通配选择器

如果HTML所有元素都需要定义相同的样式，这时可以使用通配选择器。通配选择器是固定的，用（*）来表示。

*{
magrin:0;
padding:0;
}

浅浅心事有谁知i

关注

12
点赞
踩
29

收藏

觉得还不错? 一键收藏
8
评论
CSS选择器（一）

CSS选择器1.基本选择器1.1标签选择器标签选择器（元素选择器）是直接引用HTML里面的标签名称，比如 p、h1、em、a，甚至可以是 html 本身。标签选择器规定了网页元素在页面中默认的显示样式，因此标签选择器可以快速、方便地控制页面标签的默认显示效果。<!DOCTYPE html><html lang="en"><head> <style type="text/css"> h1 {color:blue;
复制链接

扫一扫