week9 day2 CSS介绍、CSS选择器

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量272 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53587094/article/details/114331077
版权

week9 day2 CSS介绍、CSS选择器

一、CSS介绍

1.1 什么是CSS

CSS全称Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。

样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等

层叠属于CSS的三大特性之一，我们将在后续内容中介绍

表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里

1.2 为何要用CSS

在没有CSS之前，我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性，如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<h1 align="center">
    <font color="pink" size="5">天净沙·秋思</font>
</h1>
<p align="center">
    <font color="pink" size="5">锦瑟无端五十弦，一弦一柱思华年。</font>
</p>
<p align="center">
    <font color="pink" size="5">庄生晓梦迷蝴蝶，望帝春心托杜鹃。</font>
</p>
<p align="center">
    <font color="pink" size="5">沧海月明珠有泪，蓝田日暖玉生烟。</font>
</p>
<p align="center">
    <font color="pink" size="5">此情可待成追忆，只是当时已惘然。</font>
</p>
</body>
</html>

这么做的缺点是：

  1. 记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关的属性，那么设置了也没有效果

  2. 代码耦合度高：HTML语义与样式耦合到一起

  3. 扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改

于是CSS应运而生，很好地解决了以上三个问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        h1,p {
            color: pink;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>

<h1>天净沙·秋思</h1>
<p>锦瑟无端五十弦，一弦一柱思华年。</p>
<p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>
<p>沧海月明珠有泪，蓝田日暖玉生烟。</p>
<p>此情可待成追忆，只是当时已惘然。</p>
</body>
</html>

1.3 如何使用CSS

1.3.1 CSS语法

在这里插入图片描述

1.3.2 CSS四种引入方式
# 1 内联式
<p style="color:red;font-size:50px;text-align:center">123</p>

# 2 嵌入式
<head>
	<style>
		p{
			color:red;
			font-size:50px;
			text-align:center
		}
	</style>
</head>

# 3 导入式
<head>
	<style>
		/*形式一：*/
        /*@import "css/mystyle.css";*/
        /*形式二：*/
        @import url("css/mystyle.css");
    </style>
	</style>
</head>

# 4 外联式（企业开发中使用这种方式）
<head>
	<link rel="stylesheet" href="css/mystyle.css"
</head>

#1、行内式
行内式是在标签的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<p style="color: red;font-size: 50px;text-align: center">Egon是一个非常了不起的人</p>

#2、嵌入式
嵌入式是将CSS样式集中写在网页<head></head>标签内的的<style></style>标签对中。格式如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
            font-size: 50px;
            text-align: center
        }
    </style>
</head>
<body>

<p>Egon是一个非常了不起的人</p>

</body>
</html>


#新建外部样式表，然后使用导入式和链接式引入
首先在与html文件同级目录下有一个css文件夹，该文件夹下新建一个外部样式表mystyle.css,内容为
p {
    color: red;
    font-size: 50px;
    text-align: center
}

#3、导入式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        /*形式一：*/
        /*@import "css/mystyle.css";*/
        /*形式二：*/
        @import url("css/mystyle.css");

    </style>
</head>
<body>

<p>Egon是一个非常了不起的人</p>

</body>
</html>

#4、链接式（推荐使用） 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/mystyle.css">
</head>
<body>

<p>Egon是一个非常了不起的人</p>

</body>
</html>


#导入式与链接式的区别:
1、<link/>标签属于XHTML,@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
2、导入式的缺点：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷，用户体验差。
3、链接式的优点：
使用链接式时与导入式不同的是它会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。


#！！！注意点！！！
1、style标签必须放到head内 ,type="text/css"代表文本类型的css
2、type属性其实可以不用写，默认就是type="text/css"
3、设置样式时必须按照固定的格式来设置，key:value;
    其中;不能省略，最后一个属性其实可以省略，但我们可以简单地统一记成不 
    能省略就行了

详细解释

在这里插入图片描述

1.3.3 注释
/*这是注释*/

二、CSS选择器

2.1 基本选择器

2.1.1 id选择器

  1. 作用：
    根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性

  2. 格式

    id名称 {
    属性：值;
}

  3. 注意点：
    1、在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的
    2、每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复
    3、引用id一定要加#
    4、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            color: pink;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>

<h1>天净沙·秋思</h1>
<p id="p1">锦瑟无端五十弦，一弦一柱思华年。</p>
<p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>
<p>沧海月明珠有泪，蓝田日暖玉生烟。</p>
<p>此情可待成追忆，只是当时已惘然。</p>
</body>
</html>
2.1.2 类选择器

  1. 作用：根据指定的类名称，在当前界面中找到对应的标签，然后设置属性

  2. 格式：

    .类名称 {
    属性：值;
}

  3. 注意点：
    1、类名就是专门用来给某个特定的标签设置样式的
    2、每个标签都可以设置一个或多个class（空格分隔），class就相当于人/标签的名称，因此同一界面内class可以重复
    3、引用class一定要加点.
    4、类名的命名规则与id的命名规则相同

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .p1 {
            color: pink;
            font-size: 24px;

        }
        .p2{
            color:red;
            
            text-align: left;
        }
        .p3{
            text-align: right;
        }
    </style>
</head>
<body>

<h1>天净沙·秋思</h1>
<p class="p1 p2">锦瑟无端五十弦，一弦一柱思华年。</p>
<p class="p2 p3">庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>
<p class="p1 p3">沧海月明珠有泪，蓝田日暖玉生烟。</p>
<p>此情可待成追忆，只是当时已惘然。</p>
</body>
</html>
2.1.3 标签选择器

  1. 作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性

  2. 格式：

    标签名称 {
    属性：值;
}

  3. 注意点：
    1、只要是HTML的标签都能当做标签选择器
    2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
    3、标签选择器，无论嵌套多少层都能选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>EGON美丽的外表下其实隐藏着一颗骚动的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>这颗心叫做七巧玲珑心，男人吃了会流泪，女人吃了会怀孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>
2.1.4 通配符选择器

  1. 作用：选择所有标签

  2. 格式：

    * {
    属性：值；
}

  3. 注意点：
    在企业开发中一般不会使用通配符选择器
    理由是：由于通配符选择器是设置界面上所有的标签的属性，所以在设置之前会遍历所有的标签。如果当前界面上的标签比较多，那么性能就会比较差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>

    <style type="text/css">

        * {
            color: red;
        }

    </style>
</head>
<body>
    <h1 >我是标题</h1>
    <p >我是段落</p>
    <a href="#">我是超链接</a>
</body>
</html>

2.2 组合选择器

2.2.1 后代选择器

  1. 作用：找到指定标签的所有后代（儿子，孙子，重孙子、、、）标签，设置属性

  2. 格式：

    标签名1 xxx {
    属性：值;
}

  3. 注意：
    1、后代选择器必须用空格隔开
    2、后代不仅仅是儿子，也包括孙子、重孙子
    3、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class
    4、后代选择器可以通过空格一直延续下去

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后代选择器</title>
    <style type="text/css">
        div p{
            color:red;
        }
        div ul li a {
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想为div内所有标签都设置属性，无论用id还是class都不合理，因为当div内的标签过多，我们无法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li>
                <p>我是ul》li下的段落1</p>
                <p>我是ul》li下的端罗2</p>
                <a href="">我是空</a>
            </li>
            <li>
                <a href="#">我是#</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>
2.2.2 子元素选择器

  1. 作用：找到制定标签的所有特定的直接子元素，然后设置属性

  2. 格式：

    标签名1>标签名2 {
    属性：值;
}

先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

  1. 注意：
    1、子元素选择器之间需要用>符号链接，并且不能有空格
    比如div>p会找div标签的所有后代标签，标签名为">p"
    2、子元素选择器只会查找儿子，不会查找其他嵌套的标签
    3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class
    4、子元素选择器可以通过>符号一直延续下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        body>p {
            color: green;
        }

        div>p {
            color: red;
        }

        .aaa>a {
            font-size: 100px;
        }

        div>ul>li>.ddd {
            color: blue;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想为div内所有标签都设置属性，无论用id还是class都不合理，因为当div内的标签过多，我们无法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落2</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="#">点我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>
2.2.3 毗邻选择器，CSS2推出（又称相邻兄弟选择器）

  1. 作用：选定紧跟其后的那个标签

  2. 格式

    选择器1+选择器2 {
    属性：值;
}

  3. 注意点：
    1、毗邻选择器必须通过+号链接
    2、毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签

2.2.4 弟弟选择器，CSS3推出（又称通用兄弟选择器）

  1. 作用：给指定选择器后面的所有选择器中的所有标签设置属性

  2. 格式：

    选择器1~选择器2 {
    属性：值;
}

  3. 注意点：
    1、通用兄弟选择器必须用~来链接
    2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
    无论有没有被隔开，都可以被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        h1+p {
            font-size: 50px;
        }
        h1~p {
            color: red;
        }

    </style>
</head>
<body>
    <h1 >我是标题1</h1>
    <a href="">有了这个标签，p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是标题2</h1>
    <p>我是段落</p>

</body>
</html>

示例
选择器名称使用符号作用范围
后代选择器div p所有后代，藏得再深都能找到
儿子选择器div>p只往下找一层，只招儿子，儿子没有就算了
毗邻选择器div+p只找同级下面那一个
弟弟选择器div~p找同级往下的所有

2.3 交集选择器和并集选择器

2.3.1 交集选择器（不常用）

  1. 作用：给所有选择器选中的标签中，相交的那部分标签设置属性

  2. 格式：
    选择器1选择器2 {
    属性：值;
    }

  3. 注意：
    1、选择器与选择器之间没有任何链接符号
    2、选择器可以使用标签名称、id、class
    3、交集选择器在企业开发中并不多见，了解即可
    因为：p.part1 完全可以用.part1取代


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        p.part1 {
            color: red;
        }
        p#p1{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
2.3.2 并集选择器

  1. 作用：给所有满足条件的标签设置属性

  2. 格式：

    选择器1,选择器2 {
    属性：值;
}

  3. 注意：
    1、选择器与选择器之间必须用逗号来链接
    2、选择器可以使用标签名称、id、class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        .part1,h1,a {
            color: red;
        }
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <a href="#">我是我</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>

2.4 序列选择器

  1. 作用：
    css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个

  2. 格式

    1. 同级别
      :first-child p:first-child 同级别的第一个
      :last-child p:last-child 同级别的最后一个
      :nth-child(n) 同级别的第n个
      :nth-last-child(n) 同级别的倒数第n个

    2. 同级别同类型
      :first-of-type 同级别同类型的第一个
      :last-of-type 同级别同类型的最后一个
      :nth-of-type(n) 同级别同类型的第n个
      :nth-last-of-type(n) 同级别同类型的倒数第n个

    3. 其他
      :only-of-type 同类型的唯一一个
      :only-child 同级别的唯一一个

#1、同级别的第一个必须是前面指定的标签才能改变格式
#1.1 示范一
p:first-child { 
    color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

这样的话第一个p和div中的第一个p都变成红色，

#1.2 示范二
p:first-child {
    color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签

<h1>w我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p

注意点：
    :fist-child就是第一个孩子，不区分类型

#2、同级别的最后一个
p:last-child {
    color: red;
}
代表：同级别的最后一个，并且最后一个要求是一个p标签

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>
<p>我是段落7</p>
这样的话只有6跟7都变红

#3、同级别的第n个
p:nth-child(3) {
    color: red;
}
代表：同级别的第3个，并且第3个要求是一个p标签

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落2”变红

#4、同级别的倒数第n个
p:nth-last-child(3) {
    color: red;
}
代表：同级别的倒数第3个，并且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落6.1”和“我是段落5”被选中

示例：同级别

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
#1、同级别同类型的第一个
p:first-of-type {
    color: red;
}
“我是段落1”和“我是段落6.1”被选中

#2、同级别同类型的最后一个
p:last-of-type {
    color: red;
}
“我是段落7”和“我是段落6.2”被选中

#3、同级别同类型的第n个
p:nth-of-type(2) {
    color: red;
}
“我是段落2”和“我是段落6.2”被选中

#4、同级别同类型的倒数第n个
p:nth-last-of-type(2) {
    color: red;
}
“我是段落5”和“我是段落6.1”被选中

示例:同级同类型

#1、同类型的唯一一个
p:only-of-type {
    color: red;
}

<h1>我是标题</h1>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>

“我是段落7“被选中

#2、同级别的唯一一个
p:only-child {
    color: red;
}

<h1>我是标题</h1>
<div>
    <p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被选中

示例：其他

2.5 属性选择器

  1. 作用：根据指定的属性名称找到对应的标签，然后设置属性
    该选择器，最常用于input标签

  2. 格式与具体用法：

[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]

例1：找到所有包含id属性的标签
    [id]

例2：找到所有包含id属性的p标签
    p[id]

例3：找到所有class属性值为part1的p标签
    p[class="part1"]

例4：找到所有href属性值以https开头的a标签
    a[href^="https"]
    
例5：找到所有src属性值以png结果的img标签
    img[src$="png"]
    
例6：找到所有class属性值中包含part2的标签
    [class*="part"] 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        [id] {
            color: red;
        }
        p[id] {
            font-size: 30px;
        }
        p[class="part1"] {
            color: green;
        }
        a[href^="https"] {
            font-size: 50px;
        }
        img[src$="png"] {
            width: 100px;
        }
        [class*="part"] {
            text-decoration: line-through;
        }

    </style>
</head>
<body>
    <h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落</p>
    <p class="part1">我是段落</p>
    <p class="xxx part2 yyy">我是段落</p>
    <a href="#">我是我</a>
    <a href="http://www.baidu.com">http://www.baidu.com</a>
    <a href="https://www.baidu.com">https://www.baidu.com</a>
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>

示例

2.6 伪类选择器

  1. 作用：常用的几种伪类选择器。

    1. 没有访问的超链接a标签样式：

      a:link {
  color: blue;
}

    2. 访问过的超链接a标签样式：

      a:visited {
  color: gray;
}

    3. 鼠标悬浮在元素上应用样式：

      a:hover {
  background-color: #eee; 
}

    4. 鼠标点击瞬间的样式：

      a:active {
  color: green;
}

    5. input输入框获取焦点时样式：

      input:focus {
  outline: none;
  background-color: #eee;
}

  2. 注意：

    1. a标签的伪类选择器可以单独出现，也可以一起出现
    2. a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
      link，visited，hover，active
    3. hover是所有其他标签都可以使用的
    4. focus只给input标签使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        a:link {
            color: #cccccc;
        }
        a:visited {
            color: #55BBBB;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: red;
        }

        input:hover {
            outline: none;
            background-color: #cccccc;

        }

    </style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>
<input type="text">
</body>
</html>

2.7 伪元素选择器

  1. 常用的伪元素。

    1. first-letter：杂志类文章首字母样式调整
      例如：

      p:first-letter {
  font-size: 48px;
}

    2. before
      用于在元素的内容前面插入新内容。
      例如：

      p:before {
  content: "*";
  color: red;
}

      在所有p标签的内容前面加上一个红色的*。

    3. after
      用于在元素的内容后面插入新内容。
      例如：

      p:after {
  content: "?";
  color: red;
}

      在所有p标签的内容后面加上一个蓝色的?。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        p:first-letter {
            font-size: 50px;
        }
        /*两个冒号与一个是一样的，老版本用的是一个冒号，考虑到兼容性推荐使用一个冒号*/
        a::after {
            content: "?";
            color: red;
        }
        a:before {
            content: "-";
            color: green;
        }

    </style>
</head>
<body>
<p>英雄不问出处，流氓不论岁数</p>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
</body>
</html>

2.8 CSS三大特性

2.8.1 继承性

  1. 定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性

  2. 注意：

    1. 只有以color、font-、text-、line-开头的属性才可以继承
    2. a标签的文字颜色和下划线是不能继承别人的
    3. h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大

    ps:打开浏览器审查元素可以看到一些inherited from。。。的属性

  3. 应用场景：
    通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">

        div {
            color: red;
            font-size: 50px;
        }


    </style>
</head>
<body>

<div>
    <h1>我是标题</h1>
    <p><a href="#">偶的博爱</a></p>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航2</li>
    </ul>
</div>

<div>
    <div>
        <p>aaaa</p>
    </div>
    <div>
        <p>bbbb</p>
    </div>
</div>


</body>
</html>
2.8.2 层叠性

  1. 定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果

  2. 注意：
    层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，才会发生层叠性。
    ps：通过谷歌浏览器可以查看到，一些属性被划掉了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">

        p {
            color: red;
        }

        .ppp {
            color: green;
        }

    </style>
</head>
<body>

<p class="ppp">我是段落</p>


</body>
</html>

示例
2.8.3 优先级

  1. 定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定

  2. 优先级
    整体优先级从高到底：行内样式>嵌入样式和外部样式
    行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级

一、大前提：直接选用>间接选用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        .ppp {
            color: green;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>

<p class="ppp">我是段落</p>

</body>
</html>

二、如果都是间接选中，那么谁离目标标签比较近，就听谁的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        /*离目标近*/
        li {
            color: red;
        }
        /*离目标远*/
        ul {
            color: yellow;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>

三、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        p {
            color: red;
        }
        /*同样都是标签选择器，谁写在后面谁生效*/
        p {
            color: yellow;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>

四、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        /*打开浏览器依次去掉优先级高的来进行验证*/
        #id1 {
            color: red;
        }
        .ppp {
            color: green;
        }
        p {
            color: blue;
        }
        * {
            color: yellow;
        }
        li {
            color: #7e1487;
        }
        
    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>

五、优先级之!important

  1. 作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。

  2. 注意：

    1. !important只能用于直接选中，不能用于间接选中
    2. !important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升
    3. !important必须写在属性值分号的前面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        /*打开浏览器依次去掉优先级高的来进行验证*/
        #id1 {
            color: red;
        }
        .ppp {
            color: green;
        }
        p {
            color: blue;
        }
        * {
            color: yellow !important;
        }
        li {
            color: #7e1487;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>

六、优先级之权重计算

  1. 强调
    如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级

  2. 计算方式

    1. id数多的优先级高
    2. id数相同，则判定类数多的优先级高
    3. id数、class数均相同，则判定标签数多的优先级高
    4. 若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        #id1 #id2 #id3 .ppp{
            color: red;
        }
        #id2 #id3.aaa p{
            color: purple;
        }

        #id1.ccc>.bbb>.aaa>p {
            color: pink;
        }

        #id1 .aaa .ppp {
            color: green;
        }

        #id2 .aaa p {
            color: yellow;
        }

        div ul li p {
            color: blue;
        }

        div ul p {
            color: cyan;
        }

    </style>
</head>
<body>
    <div id="id1" class="ccc">
        <ul id="id2" class="bbb">
            <li id="id3" class="aaa">
                <p class="ppp">我是段落</p>
            </li>
        </ul>
    </div>
</body>
</html>
魏森林
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
week9 day4 CSS网页布局
weixin_53587094的博客
03-06 278
week9 day4 CSS网页布局一、网页布局方式二、标准流三、浮动流3.1 什么是脱离文档流？3.2 什么又是半脱离文档流3.3 浮动元素贴靠问题3.4 浮动元素字围现象3.5 浮动元素排版练习3.6 浮动元素高度问题（又称父级坍塌）3.6 清除浮动四、定位流五、练习 一、网页布局方式 什么是网页布局方式 布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word，nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 网页布局/排版的三种
week9 day3 CSS属性设置
weixin_53587094的博客
03-05 283
week9 day3 CSS属性设置一、字体属性二、文本属性三、背景属性四、盒子模型五、盒子模型各部分详解 一、字体属性 font-weight：文字粗细 取值 描述 normal 默认值，标准粗细 border 粗体 border 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值 font-style：文字风格 属性名 描述 normal 正常，
WEEK4 Day4 H5表单，css选择器
bbbbbbxxx的博客
04-10 287
WEEK4 Day4 H5表单，css选择器 今日总结：今天学习的东西比较杂而且单词量也比较多，不容易记忆。通过今日的学习，学习了H5中的表单新加的属性、css中的渐进增强和优雅降级、css3中的属性选择器、css中的结构性伪类选择器、UI元素状态伪类、动态伪类和层次选择器。 H5表单 1：新增加的type类型 email url number range color search time 时...
HTML5+CSS——Day4
weixin_51273795的博客
07-20 208
今天学习HTML5新元素
html5&css3（day4）
shosatoshi的博客
03-08 112
1.HTML5新特性 增加了一些新的标签、新的表单和新的表单属性等。 基本是 IE9+ 以上版本的浏览器才支持。 1.1 HTML5 新增的语义化标签 <header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>:定义文档某个区域 <aside>:侧边栏标签 <footer>:尾部标签 注意： ・这种语义化标准主要是针对搜索引擎的 ・这些新标签页面中可以使用多次 ・在 IE9 中，需要把这些元素转换
week3day2 宽高自适应之类的问题
bbbbbbxxx的博客
03-31 191
week3day2 今日总结：今天学的东西都是偏理解性的知识，但是在实际应用中确是很常见的问题，例如，最小高度的兼容问题，高度塌陷，伪对象选择符，高度自适应的几种情况等。 最小高度的兼容设置方法 正常项目中：最小高度直接用min-height即可。 如果考虑兼容：min-height iE6不兼容。 IE6默认把height解析成最小高度 注：如果height 和 min-height同是出现，...
html+css
m0_55836496的博客
08-25 2125
HTML+CSS标签
week09_day02&&03_CSS
shihao的博客
06-11 371
作业： 1.实现点击导航如图 div是块级元素，是上下排列的，现在我们想实现左右排列，得用浮动。 在我们写的页面里嵌入百度首页，用iframe。 首页、百度、淘宝，是一行一行的，可以用div。用table的话首页、百度、淘宝下面的线无法实现，用ol、ul也可以。下面的线也不能用hr，因为hr的线会是双线，会比较厚。 每一个链接下面都有线，用底边框。 点击之后就会跳转，得用超链接<a>， 而在某个地方打开一个链接，要注意哪些属性？ •Target •超链接属性target的value值时默认是
week6day2proj
02-15
CSS选择器是用于选取HTML或XML文档中特定元素的工具。基础选择器包括标签选择器（如`p`）、类选择器（`.class`）、ID选择器（`#id`）和通配符选择器（`*`）。更高级的选择器如后代选择器（`div p`）、子元素选择器...
hw-week_02-day_01-html-css
03-16
HTML / CSS硬件 描述 热门的纽约科技初创公司Relaxer已与您联系，以帮助他们为他们的公司开发新的着陆页。 他们已将网站的以及副本和资产交给了您。 您需要获取这些文件并将其转换为登录页面。... 放松器的
accelerated-bootcamp-prep-week-1-day-2--abcp
04-26
1. 讲义：这部分通常包含课程的主要概念，比如CSS选择器的介绍，它们是如何工作的，以及如何使用它们来定位和选择HTML元素。可能还会涵盖CSS盒模型，它是理解元素大小和位置的关键概念。 2. 课堂练习：这些可能是...
accelerated-bootcamp-prep-week1-day-1-abcp
04-26
在课堂练习中，我们可能会实践如何使用CSS选择器，比如类选择器(.class)、ID选择器(#id)、元素选择器(element)以及后代选择器、子选择器等更高级的选择器。这些工具让我们能够有选择地应用样式，实现精细化控制。 ...
week7_day1
03-25
此外，还可以使用ID（`id`）和类（`class`）属性为CSS和JavaScript选择器提供钩子，以便进行样式控制和交互处理。 HTML与CSS（Cascading Style Sheets）紧密配合，实现页面的布局和样式设计。CSS通过选择器定位HTML...
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 607
仅对已定位的元素（）有效，默认值为0，可以为负值。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1175
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1162
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
JS之防抖和节流
喵喵的博客
07-09 1020
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
旋转木马案例
喵喵的博客
07-08 761
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
css选择器 input的type
04-08
回答：input的type属性可以取值为text、password、checkbox、radio、submit、reset、button、file、hidden、image、date、time、datetime、datetime-local、email、month、number、range、search、tel、url、week。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值