html---css选择器_css中的class box1-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42077549/article/details/105234151

本文深入讲解了CSS中的三原色、字体样式、多种选择器及其应用场景，包括标签、ID、类、后代、子元素等选择器，以及链接伪类选择器的详细说明，帮助读者掌握CSS样式设置的核心技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 三原色

在网页中我们可以直接书写颜色的名字，但是却记不了这么多的单词。可以使用 RGB（red green blue）三原色来表示颜色，书写形式为：#ff00ff;

#ff0000; 红色
#00ff00; 绿色
#0000ff; 蓝色
#ffffff; 白色
#000000; 黑色

二. 字体样式

<span style="color:red; font-size: 34px;">字体</span>

三. 样式选择器

3.1 标签选择器(重要）

<style>
	/** 让所有的div使用同一中样式 */
	div {
        width: 100px;
        height: 100px;
        background-color: red;
	}
</style>

3.2 id选择器(不重要)

<style>
	/** 将id为box1的盒子应用以下样式 */
	#box1 {
        width: 100px;
        height: 100px;
        background-color: red;
	}
</style>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>

在实际的工作中，定义样式采用class, 使用js的使用id.

3.3 类选择器(非常重要)

<style>
	/** 将id为box1的盒子应用以下样式 */
	.box1 {
        width: 100px;
        height: 100px;
        background-color: red;
	}
</style>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box1"></div>
</body>

为什么使用类选择器：

1. 为了样式可重用性。
2. 为了代码的可维护性。

3.4 通配符选择器

* {
      margin: 0;
      padding: 0;
  }

在实际工作只用这一种用法。

3.5 后代选择器(非常重要)

.box1 li{    /** 中间必须是空格，表示class为box1, 所有的后代li都应用以下样式 */
    color: green;
}
<body>
    <!-- 如下的三个案例都会应用上如上的样式 -->
    <div class="box1">
        <ul>
            <li>用户</li>
            <li>系统</li>
            <li>菜案</li>
        </ul>
    </div>
    <ul class="box1">
        <li>用户</li>
        <li>系统</li>
        <li>菜案</li>
    </ul>
   
   <div class="box1">
        <div>
            <div>
                <ul>
                    <li>电脑</li>
                    <li>手机</li>
                    <li>计生用品</li>
                </ul>
            </div>
        </div>
    </div>
</body>

3.6 子选择器(用的较少)

<style>
        /**
            .box1的直接的儿子p, 变为红色
         */
        .box1>p {
            color: red;
        }
</style>
</head>
<body>
	<!-- 会应用如上定义的样式 -->
    <div class="box1">
        <p>文字</p>
        <p>系统</p>
        <p>菜案</p>
    </div>
    <!-- 不会应用如上定义的样式 -->
    <div class="box1">
        <div>
            <p>文字1</p>
            <p>系统1</p>
            <p>菜案1</p>
        </div>
    </div>
</body>

3.7 交集选择器(用的很少)

<head>
 	<style>
        /**
            p.red 意思是即是p标签，class又为red
         */
        p.red{
            color: red;
        }
    </style>
</head>
<body>
	<!-- 如下的三个盒子会应用如上定义的样式 -->
    <p class="red">红色</p>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <!-- 如下的两个盒子不会应用如上定义的样式 -->
    <p>绿色</p>
    <p>绿色</p>
</body>

3.8 并集选择器(非常重要)

<style>
		/** 所有p标签，span标签，含有class="red"下的所有的li标签 */
        p, span, .red li{
            color: red;
        }
        /*p {
            color: red;
        } */
        /*span {
            color: red;
        }*/
        /*.red li {
            color: red;
        }*/
    </style>
</head>
<body>
    <p>red</p>
    <p>red</p>
    <!-- .red li {} -->
    <div class="red">
        <span>文字</span>
        <ul>
            <li>电脑</li>
            <li>手机</li>
        </ul>
    </div>

    <div>green</div>

    <span>red</span>
    <span>red</span>
</body>

3.9 链接伪类选择器(非常重要)
爱恨法则(love hate)

a {
	text-decoration: none;   /** 去掉a标签的下划线 */
}
/* 是连接正常情况情况下的样式 */
a:link {
	color: orange;
}
/* 访问过之后所呈现的颜色 */
a:visited {
	color: red;
}
/* 鼠标停留在a标签上的样色 */
a:hover {
	color: green;
}
/* 当鼠标按下的时候，但是没有松手的时候呈现的样式 */
a:active {
	color: darkblue;
}