HTML——css--选择器

--JR

已于 2024-08-05 16:17:40 修改

阅读量712

点赞数 15

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

于 2024-08-05 02:50:34 首次发布

本文链接：https://blog.csdn.net/immnature/article/details/140915159

版权

Java 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML前端

3 篇文章 0 订阅

订阅专栏

scss

HTML中的标签为我们提供了一个盛放信息内容的容器，而如何让我们的信息变得更加直观明了，这个时候就需要我们的css来对页面进行装修美化。

借鉴上一个标签文章中动物之家的页面进行美化，我们在原来的基础上对其信息内容进行了适当的填充。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到动物之家</title>
</head>
<body>
    <h1>动物介绍</h1>

    <h2>老虎</h2>
    <img src="img/picture1.jpg" alt="" width="200px">
    <p>老虎是典型的山地林栖动物，由南方的热带雨林、常绿阔叶林，以至北方的落叶阔叶林和针阔叶混交林，都能很好的生活。</p>
    
    <h2>兔子</h2>
    <img src="img/picture2.jpg" alt="" width="200px">
    <p>兔，是兔形目兔科 兔属草食性脊椎动物 。</p>
</body>
</html>

1.三种样式：

1.1行内样式：

如果我想要调整老虎、兔子的字体大小和颜色，就可以在对应标签的位置设置样式 style，该样式也被称作“行内样式”

<h2 style="font-size: 30px; color: blueviolet;">老虎</h2>
<h2 style="font-size: 30px; color: blueviolet;">兔子</h2>

效果如下所示：

1.2内部样式

但如果动物的种类不断增加，如行内样式的修改方式会使得代码变得冗长繁琐，这个时候我们可以考虑内部样式，在使用这个h2标签之前就设置好style的格式。

把该代码加入到动物之家.html的任意位置当中，便可以去掉加在h2标签里style样式

<style>
        h2{
            font-size: 30px; 
            color: blueviolet;
        }
    </style>

注意：该样式代码与其修改样式标签的前后位置关系并不会影响页面效果的生成

1.3外部样式：

现在我的文档之中只有一个.html文档，如果在设计多个文档，文档之间的样式要求又都不一样的情况下，我们可以考虑外部样式，通过创建.css文档，并将.html和.css联立起来，提高代码的健壮性和可修改性。

从这里我们也引入了该文章索要讲解的重点——css

css的创建与格式

为了方便我们后续的代码拓展，我们在HTML文件夹中创建一个css文件夹用于专门存放.css文档，创建动物之家.css文档，并将样式修改信息存放到里头。

而其存储方式与之前在.html的存储方式有所不同

选择器{

属性1:值1;

属性2:值2;

属性3:值3;

}

如何与css连接

下一步就是将css与对应的.html相连接，这里我们用link。由上一篇标签文章可知，link标签在head标签中存储。href为资源路径。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到动物之家</title>
    <link rel="stylesheet" href="css/动物之家.css">
</head>

三种样式的优先级：

当在一个html文档中同时存在这三种样式，便会由一个优先顺序：

行内样式 > 内部样式 = 外部样式（谁在下面就是谁）

案例如下：

.css代码

h2{
    font-size: 30px; 
    color: blueviolet;
}

.html代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到动物之家</title>
    <link rel="stylesheet" href="css/动物之家.css">
</head>
<body>
    
    <h1>动物介绍</h1>
    <!-- 红色 -->
    <h2 style="color: rgb(255, 0, 0);" >老虎</h2>
    <img src="img/picture1.jpg" alt="" width="200px">
    <p>老虎是典型的山地林栖动物，由南方的热带雨林、常绿阔叶林，以至北方的落叶阔叶林和针阔叶混交林，都能很好的生活。</p>
    
    <h2 >兔子</h2>
    <img src="img/picture2.jpg" alt="" width="200px">
    <p>兔，是兔形目兔科 兔属草食性脊椎动物 。</p>
    <style>
        h2{
            /* 绿色 */
          color: rgb(0, 255, 26);  
        }
    </style>

</body>
</html>

运行结果：

一、基本选择器

1.元素选择器：

用元素名称做选择，如(注意是.css文件的内容)

p{          
              /* 红色 */
    color: rgb(254, 5, 5);
              /* 青色 */
    background: aquamarine;
     }

特例：选择所有元素 *

*{
    color: rgb(254, 5, 5);
    background: aquamarine;    
     }

2.属性选择器：

为更好展示选择器的效果，我们对动物之家的代码进行了拓展。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到动物之家</title>
    <link rel="stylesheet" href="css/动物之家.css">
</head>
<body>
    
    <h1>动物介绍</h1>
    <!-- 红色 -->
    <h2 style="color: rgb(255, 0, 0);" >老虎</h2>
    <img src="img/picture1.jpg" alt="" width="200px">
    <p>老虎是典型的山地林栖动物，由南方的热带雨林、常绿阔叶林，以至北方的落叶阔叶林和针阔叶混交林，都能很好的生活。</p>
    <div>生存条件
        <p>老虎需要广阔的领地，一般栖息在森林、山地等环境。它们对食物的需求大，主要捕食大型哺乳动物。</p>
    </div>
    <div>习性
        <p>老虎是独居动物，具有很强的领地意识。它们善于潜伏和突袭，通常在夜间活动觅食。</p>
    </div>
    <div>外貌特征
        老虎体型庞大，毛色呈浅黄色或棕黄色，身上有黑色横纹。头部较大，眼睛炯炯有神，牙齿锋利，爪子尖锐有力。
    </div>
    <h2 >兔子</h2>
    <img src="img/picture2.jpg" alt="" width="200px">
    <p>兔，是兔形目兔科 兔属草食性脊椎动物 。</p>
    <div>生存条件
        <p>兔子喜欢生活在干燥、通风、温度适宜的环境中。它们需要有足够的空间来活动和藏身，常见于草原、森林边缘、农田等地。对食物的需求主要是各类青草、蔬菜等</p>
    </div>
    <div>习性
        <p>兔子具有夜行性和嗜眠性，胆小易惊。它们喜欢打洞居住，有较强的繁殖能力。在野外，兔子会通过快速奔跑来躲避天敌。</p>
    </div>
    <div>外貌特征
        <p>兔子体型不大，通常有柔软的皮毛，耳朵长而直立，尾巴短而毛茸茸。眼睛大而圆，颜色多样，常见的有白色、灰色、黑色等。</p>
    </div>

</body>
</html>

表示有id属性的div（div也可以换做其他标签，不唯一）

该选择器表示div中只要具有id值（无关值是多少），便执行该样式。

html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到动物之家</title>
    <link rel="stylesheet" href="css/动物之家.css">
</head>
<body>
    
    <h1>动物介绍</h1>
    
    <h2>老虎</h2>
    <img src="img/picture1.jpg" alt="" width="200px">
    <p>老虎是典型的山地林栖动物，由南方的热带雨林、常绿阔叶林，以至北方的落叶阔叶林和针阔叶混交林，都能很好的生活。</p>
    <div id="x">生存条件
        <p>老虎需要广阔的领地，一般栖息在森林、山地等环境。它们对食物的需求大，主要捕食大型哺乳动物。</p>
    </div>
    <div id="x">习性
        <p>老虎是独居动物，具有很强的领地意识。它们善于潜伏和突袭，通常在夜间活动觅食。</p>
    </div>
    <div id="x">外貌特征
        老虎体型庞大，毛色呈浅黄色或棕黄色，身上有黑色横纹。头部较大，眼睛炯炯有神，牙齿锋利，爪子尖锐有力。
    </div>
    <h2 >兔子</h2>
    <img src="img/picture2.jpg" alt="" width="200px">
    <p>兔，是兔形目兔科 兔属草食性脊椎动物 。</p>
    <div id="y">生存条件
        <p>兔子喜欢生活在干燥、通风、温度适宜的环境中。它们需要有足够的空间来活动和藏身，常见于草原、森林边缘、农田等地。对食物的需求主要是各类青草、蔬菜等</p>
    </div>
    <div id="y">习性
        <p>兔子具有夜行性和嗜眠性，胆小易惊。它们喜欢打洞居住，有较强的繁殖能力。在野外，兔子会通过快速奔跑来躲避天敌。</p>
    </div>
    <div id="y">外貌特征
        <p>兔子体型不大，通常有柔软的皮毛，耳朵长而直立，尾巴短而毛茸茸。眼睛大而圆，颜色多样，常见的有白色、灰色、黑色等。</p>
    </div>

</body>
</html>

css

div[id]{
     color: rgb(254, 5, 5);
     background: aquamarine;
     }

运行效果：

表示有id属性且具体值xx（后面代码不再以前面动物之家作为参考）

div[id=xx]{

color: rgb(250, 31, 31);

background: rgb(0, 0, 0);

}

表示有id属性且包含xx

div[id*=xx]{

color: rgb(250, 31, 31);

background: rgb(0, 0, 0);

}

表示有id属性且以xx开头

div[id^=xx]{

color: rgb(250, 31, 31);

background: rgb(0, 0, 0);

}

表示有id属性且以xx结尾

div[id$=xx]{

color: rgb(250, 31, 31);

background: rgb(0, 0, 0);

}

3.id选择器：

#xx{

color: rgb(20, 255, 91);

background: rgb(245, 137, 43);

}

4.class选择器

p.xx{

color: rgb(20, 255, 91);

background: rgb(245, 137, 43);

}

特例：结合选择器

5.包含选择器 selector1 selector2 强调包含

//寻找div下面的p标签

div p{

color: rgb(20, 255, 91);

background: rgb(245, 137, 43);

}

6.子选择器 selector1 > selector2 强调父子

//寻找div下面的p标签

div>p{

color: rgb(20, 255, 91);

background: rgb(245, 137, 43);

}

7.兄弟选择器 selector1 ~ selector2 兄~弟

//寻找div下面的p标签

class=cc往下的class=dd的标签

.cc~.dd{

color: rgb(20, 255, 91);

background: rgb(245, 137, 43);

}

//class=cc往下的所有

.cc~*{

color: rgb(0, 0, 0);

background: rgb(255, 241, 229);

}

8.选择器组合 selector1,selector2

div,

span{

color: rgb(0, 0, 0);

background: rgb(255, 241, 229);

}

二、伪元素选择器

1.首字母： ::first-letter只能用于块级元素（竖着）

div::first-letter{

color: blue;

font-size: 30px;

}

2.首行：

div::first-line{

color: blue;

font-size: 30px;

background: rgb(255, 241, 229);

}

//单词裂开

div{

word-break: break-all;

}

3.在前边插入 ::before

div::before{

content: "hi~hi~hi~";

}

4.在后边插入 ::after

div::after{

content: "hi~hi~hi~";

}

三、伪类选择器

1.结构性伪类选择器

:nth-child()

括号里可以是数字n n从1开始

可以是英文单词 odd奇数 even偶数

括号里可以是表达式 5n+2 n从1开始

找到最后一个 :last-child()

倒着数 :nth-last-child()

只认数字，如果类型刚好符合，则被选中

例：

ul li:nth-child(2n+1){

color: rgb(68, 0, 255);

background: rgba(0, 0, 0, 0);

}

:nth-of-type()

括号里可以是数字n n从1开始

可以是英文单词 odd奇数 even偶数

括号里可以是表达式 5n+2 n从1开始

既认数字，也认类型，找同类型下的第n个元素

:last-of-type()

2.ui状态伪类选择器：

状态

:hover鼠标悬停状态

ul li:hover{

color: blue;

background-color: black;

}

:focus焦点状态//多用于输入框

input:hover{

color: blue;

background-color: black;

}

:checked选中状态//多用于单选框和复选框

input:checked{

box-shadow: 3px 3px 3px red;

}

3.其他伪类选择器

:not()//排除括号中class= 的标签

ul li:not(.hh){

color: blue;

background-color: black;

}

选择器的优先级规则

不同的效果是相互叠加的，样式有冲突的看优先级：

优先级规则：

1.选择器写的越长/准确，优先级越高

2.优先级高低：id选择器 > class选择器 > 元素选择器

3.同级别长度下，css代码按照顺序执行

特别注意：以上规则适用大部分场景，特殊场景不适用以自行测试为准

--JR

关注

15
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
HTML——css--选择器

HTML中的为我们提供了一个盛放信息内容的容器，而如何让我们的信息变得更加直观明了，这个时候就需要我们的来。借鉴上一个标签文章中动物之家的页面进行美化，我们在原来的基础上对其信息内容进行了适当的填充。
复制链接

扫一扫

专栏目录