腾讯前端十天小白训练营<DAY 3>---css引入方式、选择器&权重

本文介绍了CSS中的各种选择器，包括标签、class、id选择器及其组合使用方式，并讲解了权重和特殊选择器如属性选择器的用法。

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

CSS的引入方式

<html>
<head>
<title>css的引入</title>
<!--外链式/链接式 : 新建css文件，引用时注意相对路径和绝对路径的区别-->
<link href="demo.css" type="text/css" rel="stylesheet"/>

<!--内嵌式-->
<style type="text/css">
p{
    color:green;
}
</style>
</head>

<body>
<!--行内样式-->
<p style="color:red;">hello</p>

<p>样式的显示：就近原则</p>
</body>
</html>

导入式(一般不用）：

<style>
@import(url(demo.css))
</style>

这里写图片描述

w3school_____如何创建css

css选择器

1) 标签选择器：是什么标签就写什么标签；

p{
    color:red;
}

2) class选择器：可以重复，可以共用;
一个标签可以有多个class;

.c1{
    color:blue;
}
.c2{
    font-size:36px;/*设置字体大小*/
    /*添加和取消粗体使用font-weight属性bold,normal;
    添加或取消斜体可以使用font-style属性：italic(斜体）,normal,  oblique(倾斜的字体);
    控制大小写:text-transform:
    uppercase,capitalize,lowercase
    */

}

3) id选择器：优先级最高；
不能共用，在同一个html文档中同一个ID只能用一次
https://www.zhihu.com/question/19899340；（具体的还是遇到了再查吧，现在查了也看不懂@-@）

#d1{
    color:green;
}

下面是源代码：

<html >
<head>

<link href="Untitled-2.css" type="text/css" rel="stylesheet"/>
</head>

<body>

<p class="c1" id="d1"> hello </p>
<p class="c1 c2" id="d2"> hello </p>

</body>
</html>

下面是css部分

p{
    color:red;
}
.c1{
    color:blue;
}
#d1{
    color:green;
}

.c2{
    color:yellow;
    font-size:36px
}/* CSS Document */

这里写图片描述

空格：

body .c1{
}

表示 body 下面的 c1

c1后面再加空格就表示 body下面的c1下面的xxx

逗号:

.c1,.c2

表示class=c1和class=c2的标签

下面是源代码：

<html>
<head>
<link href="Untitled-5.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div> 
<p class="c1">cccccccccc</p>
 <p>dddddddddc</p>
   <p>ceeeeeeec</p>
     <p>ccffffff</p>
</div>

</body>
</html>

*号：
表示页面中的所有标签

*{
    color:blue;
}

这里写图片描述

+号
表示紧随前面标签的同级元素

*{
    color:blue;
}
.c1+p
{
    color:red;
}

这里写图片描述

~
以下css代码表示class=c1后面所有同级的元素

.c1~p
{
    color:red;
}

这里写图片描述

> 表示子元素的

以下是源代码

<html>
<head>
<link href="Untitled-5.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div> 
<p class="c1">cccccccccc</p>
 <p>dddddddddc</p>
   <p>ceeeeeeec</p>
     <p>ccffffff</p>
        <div><p>wwwww</p></div>
</div>

<p>cddddddddd</p>

</body>
</html>

以下css代码表示div下的子元素中的P标签

div>p
{
    color:red;
}

这里写图片描述

以下表示.c1下的子元素的p标签

.c1>p
{
    color:red;
}

这里写图片描述

以下表示class=c1下的所有p标签

.c1 p
{
    color:red;
}

这里写图片描述

[ ]表示设置了某属性的某标签

以下是源代码：

<html>
<head>
<link href="Untitled-5.css" type="text/css" rel="stylesheet" />
</head>

<body>
<a href="http://www.w3school.com.cn" title="aaa">w3school.cn</a>
<a href="http://www.w3school.com" >w3school</a>
</body>
</html>

如下表示设置了title属性的a标签

a[title]
 {
     color:red;
 }

如下为为包含指定值的 title 属性的所有元素设置样式
[title~=hello] { color:red; }

如下表示属性值为一个链接的a标签

a[href='http://www.w3school.com.cn']
 {
     color:red;
 }

这里写图片描述

如下，
^ 表示以xx开头的
$表示以XX结尾
*表示里面包含指定值（如 a[href*=’www’] ）
~表示包含指定值（词汇）的 title 属性的所有元素设置样式。适用于由空格分隔的属性值

a[href^='http://www.w3school.com.cn']

 {
     color:red;
}
a[href$='.com']

 {
     color:green;
 }

这里写图片描述

详细内容参考w3school-css属性选择器详解

css选择器权重

这里写图片描述

<html>
<head>
<link href="Untitled-5.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="c1"> 
    <h3 class="c2" id="d2" >hello</h3>
</div> 
</body>

</html>

如下，权重依次增加,最终hello显示为red

.c1 h3
{
    color:blue;/*cd*/
}
.c1 .c2
{
    color:yellow;/*cc*/
}
#d2
{
    color:black;/*b*/
}
.c1 #d2
{
    color:red;/*bc*/
}

css具有继承性，当设置:

.c1
 {
    color:red;
  }

显示hello为red