CSS笔记 —— 选择器

最新推荐文章于 2024-10-31 15:02:05 发布

一纸春秋

最新推荐文章于 2024-10-31 15:02:05 发布

阅读量516

点赞数 2

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

本文链接：https://blog.csdn.net/qq_44823756/article/details/121012757

版权

前端专栏收录该内容

9 篇文章 4 订阅

订阅专栏

本篇博客是根据B站up@遇见狂神说的视频以及W3school官网文档整理的笔记，里面会有一些视频的截图、代码和官网的概念，以及我个人的注释笔记，代码例子等
全篇博客包括代码均为自己手打，结果截图均为自己运行的结果。
以下是视频链接
https://www.bilibili.com/video/BV1YJ411a7dy?spm_id_from=333.999.0.0
W3school官网链接
https://www.w3school.com.cn/css/index.asp

CSS 是一种描述 HTML 文档样式的语言，用来描述应该如何显示 HTML 元素
CSS可以通过修改HTML的各种元素来美化网页

CSS的三种导入方式

行内样式
内部样式
外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

<!--内部样式-->
    <style>
        h1{
            color:blue;
        }
    </style>

<!--外部样式，具体的代码在css文件中-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--行内样式，在元素标签中，编写一个style属性，编写样式即可
    但是这样不推荐，因为有多少标签就要写多少个，不符合结构与表现分离的思想-->

<!--优先级：就近原则，行内样式，内部样式，外部样式，谁离这行代码最近优先显示谁的颜色-->
<!--行内样式肯定是最近的，内部样式和外部样式看谁更靠近，
外部样式用link语句判断，link语句在内部样式前面，则内部样式更加靠近这条h1标题语句-->
<h1 style="color:red"></h1>

</body>
</html>

这里为了方便学习，所以会使用内部样式的方式来写CSS代码
但实际开发中建议使用外部样式，CSS代码与HTML代码分离的方式来写

这里还需要注意的是，行内样式里面如果有多个语句，用分号结尾

<h1 style="color:red;color:blue">test</h1>

这样运行会出现两个网页，一个网页是红色的test标题，一个网页是蓝色的test标题

选择器

选择器是CSS非常重要的部分，用来选取要设置样式的 HTML 元素
如果连选中某个元素都做不到，那么对其进行修改更无从谈起

作用：选择页面上某一个或某一类元素

基本选择器

（1）标签选择器：选择一类标签，格式为标签{}
（2）类选择器 class：选择所有class属性一致的标签，可以跨标签，格式为 .类名{}
（3）id选择器：全局唯一，格式为 #id{}

注意！！！无论是类选择器还是id选择器，属性值都不能是数字开头，否则无效

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，会选择页面上所有的这个标签的元素*/
        /*这里会选择页面上的所有h1标签的元素，然后修改其颜色，边框等*/
        h1{
            color: aqua;
            background: beige;
            border-radius: 24px;
        }
        /*这里是选择所有的p标签*/
        p{
            font-size: 8px;
        }
    </style>
</head>

<body>

<h1>学习java</h1>
<p>css基础学习</p>
<p>HTML元素修改</p>

</body>
</html>

在这里插入图片描述

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*因为标签选择器一次性会选中所有是此标签的元素，所以如果想选中单个元素，就需要类选择器*/
        /*类选择器的格式  .类的名字{} */
        /*好处：可以多个标签归类，对同一个class的多个标签元素进行操作
                这里的多个标签元素可以是不同的标签类型*/

        .java{
            color: #e82020;
        }
        .hive{
            font-size:16px;
            color: #5be772;
        }
    </style>
</head>
<body>

<h2 class="java">标题一</h2>
<h2 class="hive">标题二</h2>
<h2 class="java">标题三</h2>

<p class="java">段落一</p>

</body>
</html>

在这里插入图片描述
这里可以比较明显的看出来，有两个h2标签和一个p段落标签的class属性是一样的，都是java，所以类选择器 .java可以一次性选中这三个标签然后修改

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器,全局唯一,格式为
           #id名称{}
           优先级, 不遵循就近原则: id选择器 > 类选择器 > 标签选择器
           */
        #java{
            color: aquamarine;
        }

    </style>
</head>
<body>

<h3 id="java">标题1</h3>
<h3>标题2</h3>

</body>
</html>

在这里插入图片描述
id选择器只会选择到一个元素，因此如果两个元素的id属性值相同会报错

区别：

标签选择器只能选择同一类型的所有标签。
类选择器可以选择不同类型的多个标签，只要class属性的值相同就可以一起选中。
id选择器只能选择一个标签，id属性的值不能相同

层次选择器

后代选择器
子选择器
相邻兄弟选择器
通用选择器（通用兄弟选择器）

事实上，之前写的html的主体部分的代码，都是这种树状结构，必须了解这种层次结构，才能使用层次选择器
根据这张树状结构图，来写html的body里面的代码

<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>

</body>

后代选择器

选中某个元素后面的内容。可以比喻为祖爷爷，爷爷，爸爸，你，涉及多代人，可以选中某一代人后面的所有人

为了适当简化文章内容，这里只写具体的css代码，其余部分的代码不再列出
注意css代码和html代码一起写的时候，css代码要写在< head >的< style >标签里面

/*后代选择器,选中某个元素后面的所有元素*/
body p{
    color:red;
}
/*这里选中了body元素后面的所有p标签,并更改它们的颜色*/

在这里插入图片描述

可以将类选择器和后代选择器结合起来使用，给< ul >标签加上class属性

<body>
    <p>p0</p>
    <p>p2</p>
    <p>p3</p>
    <ul class="test1">
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>

.test1 p{
            color:red;
        }

在这里插入图片描述

子选择器

只选择一代人，比如祖爷爷只能选到爷爷，选不到爸爸

/*子选择器*/
        body>p{
            color: #09efef;
        }

在这里插入图片描述
只能选择一代人，p0，p2，p3是同一代，而p4，p5，p6是下一代

相邻兄弟选择器

选择同辈，而且只选择一个在下面的相邻的元素
这里在body代码中添加一个p1标签

	<p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>

    <ul class="test1">
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>

/*相邻兄弟选择器,只选择一个,选择相邻而且在下面的那个*/
        /*选择.active标签下面的一个相邻的p标签*/
        .active + p{
            background: bisque;
        }

.active类选择器选择到了p1标签，然后+p是相邻兄弟选择器，选中p1下面的相邻的那个
在这里插入图片描述
这里要注意两个地方，容易出错
（1）必须是同一辈的元素

body + p{
            color:red;
        }

像这样是选择不到的，因为body和p不是同辈的兄弟关系
（2）下面的兄弟标签类型不符也不行
将body里面的代码，p1和p2之间加入一个a标签，既选不到a标签（因为类型不符），也选不到p2标签（因为不相邻）

	<p class="active">p1</p>
    <a href="#"></a>
    <p>p2</p>

通用选择器

将body里面的代码修改为

<body>
<p>p0</p>
<p class="active">p1</p>
<a href="#"></a>
<p>p2</p>
<p>p3</p>

<ul class="test1">
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
<p>p7</p>
<p>p8</p>

</body>

/*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: bisque;
        }

在这里插入图片描述

.active选中了p1 标签，然后~p 通用选择器，选中了p1标签之后的所有p标签
这里只会选中p标签，而a标签不会被选中

结构性伪类选择器

这里是我自己举的例子，下面body里面的html代码

<body>

<div id="active">
    <p>p0</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p1</p>
    <a href="#">123</a>
    <p>p2</p>
    <p>p3</p>
</div>
</body>

在这里插入图片描述

nth-of-type

<style>
    #active p:nth-of-type(3) {
        background: red;
    }
</style>

首先通过 #active id选择器来选择div标签
然后在div标签内部，在p标签的同辈兄弟标签中，找到第三个p标签

注意：
nth-of-type 在计算第几个标签的时候，会跳过类型不同的，以及非同辈关系的标签
比如p2标签前面的超链接123（a标签类型不同），p4等（非同辈关系）
在这里插入图片描述

nth-child

#active p:nth-child(3) {
        background: #45de45;
    }

在这里插入图片描述
注意：
nth-child不要求标签类型，只要是兄弟节点就算一个次数，所以第一个是p标签p1，第二个是 ul 标签，第三个是p标签p1
但这里要注意的是，虽然按次数数的时候不要求类型，实际找到的标签如果与指定类型不符，代码是不会生效的

比如这里改为

 #active p:nth-child(4) {
        background: #45de45;
    }

在这里插入图片描述
这里继续往下数，应该是a标签，但是a标签与p标签类型不符，所以不会改变

属性选择器

这个用的很多，很重要
body部分的主体代码是，这里的代码我修改了，视频里面的代码比较长，这里为了方便看，我都统一改短了

<body>
<p class="demo">
    <a href="test1.com" class="class first" id="first">1</a>
    <a href="test2.com" class="class second" target="_blank">2</a>
    <a href="123.html" class="css1">3</a>
    <a href="321.png" class="css2">4</a>
    <a href="123.jpg" class="a demo">5</a>
    <a href="abc" class="b demo">6</a>
    <a href="/a.pdf" class="link">7</a>
    <a href="/abc.pdf" class="hive">8</a>
    <a href="abc.doc" class="hadoop">9</a>
    <a href="abcd.doc" class="java">10</a>
</p>
</body>

在这里插入图片描述

属性选择器
格式：标签名[属性名]{} 或标签名[属性名=属性值]{}
这里的属性值可以是一个正则表达式，匹配符合正则的属性值

选择存在id属性的元素

<style>
    a[id]{
        background:yellow;
    }
</style>

在这里插入图片描述

选择所有class属性值为class second的元素

a[class="class second"]{
            background : #f85151;
        }

在这里插入图片描述

选择所有属性值包含 h 的class的元素

a[class*="h"]{
            background:yellow;
        }

在这里插入图片描述

选中href中以abc为开头的元素

a[href^="abc"]{
            background: #72fd72;
        }

在这里插入图片描述

选中class中以demo为结尾的元素

 a[class $= "demo"]{
            background: #71e0a7;
        }

在这里插入图片描述
总结一下，属性选择器
属性名，或者属性名=属性值（属性值可以是正则）
= 绝对等于
*= 包含这个元素
^= 以这个元素为开头
$= 以这个元素为结尾

一纸春秋

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录