CSS入门（基本选择器、组合选择器）

最新推荐文章于 2023-12-11 10:31:10 发布

Brittany____

最新推荐文章于 2023-12-11 10:31:10 发布

阅读量328

点赞数

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/Brittany____/article/details/127739494

版权

CSS基本选择器、CSS组合选择器

摘要由CSDN通过智能技术生成

CSS基本选择器

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。

1.通用选择器

选择所有元素
* {属性名:属性值}

 *{
        /* 字体颜色 */
        color: chocolate;
    }

2.元素选择器/标签选择器

选择指定元素
标签名 {属性名:属性值}

  div {
        color: navy;
        width: 100px; /* div的宽度 */
        height: 100px; /* div的高度 */
        background-color: rgb(168, 249, 222); /* 背景颜色 */
    }

3. id选择器

选择指定id属性值的元素(#)
#id属性值 {属性名:属性值}
id值最好保持唯一
id定义规则：以字母、数字、下划线、中划线组成，不要以数字开头

 #div1 {
        color: rgb(239, 70, 214);
    }

4.class类选择器

选择设置指定class属性值的元素（.）
.class属性值 {属性名:属性值}

 .cls1 {
        font-weight: bold; /* 字体粗细 */
    }

5.分组选择器（了解）

选择指定选择器选中的元素
选择器1,选择器2,选择器3,...{}

#div1,.cls2,p {
        /* 边框  边框的粗细  边框的风格  边框的颜色 */
        border: 1px solid black;
    }

选择器优先级（权重值）

id选择器 > 类选择器 > 元素选择器 > 通用选择器
行内样式 style属性中权重是1000（所以行内最高，最优先）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
    <style type="text/css">
    *{
     
        /* 字体颜色 */
        color: chocolate;
    }

    div