【CSS进一步学习】

已于 2022-06-17 18:02:53 修改
阅读量289 收藏
点赞数
分类专栏： css 文章标签： css
于 2022-04-19 23:41:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46839072/article/details/124280037
版权

CSS选择器的深入了解

一、属性选择器

前提："E"表示各个标签，"att "指各个属性

1、E[att]

选择具有att属性的元素

举个例子：如下所示，属性选择器h1[class]对前两行起作用，字体为斜体，颜色为红色，对第三行没有作用。

①代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1[class]{
        color: red;
        font-style: italic;
    }
</style>
<body>
    <h1 class="">西安邮电大学</h1>
    <h1 class="">西安邮电大学</h1>
    <h2 class="">西安邮电大学</h2>
</body>
</html>

②页面展示：
在这里插入图片描述

2、E[att=“val”]

选择具有att属性,并且att属性值等于val的元素.

举个例子：如下所示，属性选择器a[class=‘ex1’]只对第二行起作用，而a[class=‘ex3’]只对第三行起作用，二三行都是超链接的默认样式。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
a[class='ex1']{
    color: red;
}
a[class='ex3']{
    font-size: 25px;
    color: aquamarine;
}
</style>
<body>
    <ul>
        <li ><a href="#" class="ex1">外部链接</a></li>
        <li ><a href="#">内部链接</a></li>
        <li ><a href="#" class="ex3">外部链接</a></li>
        <li ><a href="#">内部链接</a></li>
    </ul>
</body>
</html>

②页面展示：
A

3、E[att~=“val”]

选择具有att属性,并且att属性值是用空格隔开的单词,其中一个单词等于val

举个例子：如下所示，属性选择器 li[class~=‘zh’] 是用空格隔开的单词,其中一个单词等于zh,如页面展示中， 对一三行的样式起作用，字体颜色、字体大小、字体类型样式都已改变，而三四行就是默认值。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li[class~='zh']{
    font-size: 30px;
    color: aqua;
    font-family: '宋体';
}
</style>
<body>
    <ul>
        <li class="zh xiyou">红楼梦</li>
        <li>西游记</li>
        <li class="zh why">水浒传</li>
        <li>三国演义</li>
    </ul>
</body>
</html>

②页面展示：
在这里插入图片描述

4、E[att^=“val”]

选择具有att属性,并且att属性值是以val开头的字符串

举个例子：如下所示，属性选择器 input[name^=‘user’] 是将name属性值是以user开头的字符串的input标签的样式进行修改。
正如页面展示所示，一三行的输入框内容样式改变，颜色为红色，而第二行为默认样式，没有任何样式改变。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
/* 选择具有name属性，并且name属性值是以user开头的input标签 */
input[name^='user']{
    color: red;
}
</style>
<body>
密码: <input type="password" name="userpwd">
<br/><br/>
地址: <input type="text" name="address">
<br/><br/>
年龄:<input type="text" name="userage">
</body>
</html>

②页面展示：
在这里插入图片描述

5、E[att$=“val”]

选择具有att属性,并且att属性值是以val结尾的字符串

举个例子：如下所示，属性选择器 input[name$=‘age’]是将name属性值是以age结尾的字符串的input标签的样式进行修改。
正如页面展示所示，输入框内容样式改变，颜色为紫色。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
/* 选择具有name属性，并且name属性值是以age结尾的input标签 */
input[name$='age']{
    color: blueviolet;
}
</style>
<body>
    年龄：<input type="text" name="userage">

</body>
</html>

②页面展示：
在这里插入图片描述

6、E[att*=“val”]

选择具有att属性,并且att属性值中包含val的字符串。

举个例子：如下所示，属性选择器 input[name=‘add’]是将name属性值中包含’add’的input标签的样式进行修改。
正如页面展示所示，输入框内容样式改变，颜色为青色。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
/* 选择具有name属性，并且name属性值中包含'add'的input标签  */
input[name*='add']{
    color: chartreuse;
}
</style>
<body>
    地址: <input type="text" name="address">
</body>
</html>

②页面展示：
在这里插入图片描述

7、E[att|=“val”]

选择具有att属性,并且att属性值是以val开头、以’-'分隔的字符串

举个例子：如下所示，属性选择器input[name|=‘user’]是将name属性值中是以user开头，以’-'分隔的字符串的input标签的样式进行修改。
正如页面展示所示，输入框内容样式改变，颜色为橘色。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
/* 选择具有name属性，并且name属性值是以user开头，以'-'分隔的字符串的input标签  */
input[name|='user']{
    color: orange;
}
</style>
<body>
    爱好：<input type="text" name="user-hobby">
</body>
</html>

②页面展示：
在这里插入图片描述

二、关系选择器

穿插个小知识点：html中的父元素、子元素、兄弟元素是什么？

html元素指的是从开始标签到结束标签的所有代码，不同的标签之间有包含关系，也有同级关系，举例如下：

<html>
<body>
<p>我是一段文字</p>
<p>我也是一段文字</p>
</body>
</html>

html元素定义了整个html文档， 这个元素拥有一个开始标签<html>; ，以及一个结束标签</html>。而这个html文档的元素内容是另一个html元素<body> 。

body元素定义了html文档的主体部分，相对于body来说，html就是body的父元素，body就是html的子元素。

同理，上例代码中，p元素相对于body来说，body就是p的父元素，p就是body的子元素。

而两个p元素互相没有包含的关系，那么这两个p元素就是同级关系，也就是兄弟元素。

1、包含选择器(E F)

选择所有被E包含的F元素

举个例子：如下所示，包含选择器 (ol li)是选择所有被ol包含的li元素样式进行修改。
正如页面展示所示，li标签样式被改变，字体颜色为红棕色，字体大小也被改变为20px，默认字体为16px。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 选择所有被ol包含的li元素 */
    ol li{
            font-size: 20px;
            color: brown;
        }
</style>
<body>
    <ol>
        <li>茅台</li>
        <li>五粮液</li>
        <li>泸州老窖</li>
        <li>西凤酒</li>
    </ol>
</body>
</html>

②页面展示：
在这里插入图片描述

2、子元素选择器(E>F)

选择所有作为E元素的子元素F

举个例子：如下所示，子元素选择器 (nav>p)是选择nav所包含的所有为p子元素标签进行修改。
正如页面展示所示，p标签样式被改变，字体颜色改为黄绿色。span标签就为默认样式，没有被改变。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   /* 选择nav所包含的所有为p子元素标签 */
   nav>p{
            color: yellowgreen;
        }
</style>
<body>
    <nav>
        <p>公司管理</p>
        <p>采购管理</p>
        <p>后勤管理</p>
        <p>采购管理</p>
        <span>AAAAA</span>
    </nav>
</body>
</html>

②页面展示：
在这里插入图片描述

3、相邻元素选择器(E+F)

选择紧贴在E元素之后F元素

举个例子：如下所示，相邻元素选择器 (nav+p)是指选择紧贴在nav标签之后的p标签样式进行修改。
正如页面展示所示，紧贴nav标签的p标签样式被改变，字体颜色为红色。相隔的p标签就不行，字体颜色没有被改变。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  /* 选择紧贴在nav标签之后的p标签 */
  nav+p{
            color: red;
        }
</style>
<body>
    <nav>
        <p>公司管理</p>
        <p>采购管理</p>
        <p>后勤管理</p>
        <p>采购管理</p>
        <span>AAAAA</span>
    </nav>
    <p>西安邮电大学</p>
    <p>西安交通大学</p>
</body>
</html>

②页面展示：
在这里插入图片描述

4、兄弟选择器(E~F)

选择E元素后面的所有兄弟元素F

**举个例子：如下所示，兄弟选择器 (ol~p)是指选择ol之后的所有兄弟标签样式进行修改。
正如页面展示所示，p样式被改变，字体颜色为深黄色，字体大小也被改变为45px。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  /* 选择ol之后的所有兄弟标签 */
  ol~p{
            color: gold;
            font-size: 45px;
        }
</style>
<body>
    <ol>
        <li>茅台</li>
        <li>五粮液</li>
        <li>泸州老窖</li>
        <li>西凤酒</li>
    </ol>
    <nav>
        <p>公司管理</p>
        <p>采购管理</p>
        <p>后勤管理</p>
        <p>采购管理</p>
        <span>AAAAA</span>
    </nav>
    <p>西安邮电大学</p>
    <aside>
        <p>西北政法大学</p>
    </aside>
    <p>西安交通大学</p>
</body>
</html>

②页面展示：
在这里插入图片描述

三、结构化的伪类选择器

注意：伪类选择器带冒号

1、html:root：根元素选择器。

html文档中的根只有一个。样式应用于页面的每个元素。

①代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html:root{
        background-color: rgb(228, 204, 209);
        color: red;
    }  
</style>
<body>
    <ul>
        <li>AAAAA</li>
        <li>BBBBBB</li>
    </ul>
    <p>CCCC</p>
    <span>DDDDD</span>   
</body>
</html>

②页面展示：
在这里插入图片描述

2、E:not(选择器)

不包含给定选择器的元素

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 将p标签中class属性值为abc的元素排除 
       即：选择class属性值不等于abc的p标签
    */
    p:not(.abc){
        color:blue;
    }
</style>
<body>
    <p class="abc" id="ps">西安交大</p>
    <p id="pt">西北大</p>
    <p class="abcd" id="pi">陕师大</p> 
</body>
</html>

②页面展示：
在这里插入图片描述

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   /* 选择id属性不是pt的p标签 */
   p:not(#pt){
        font-size: 35px;
    }
</style>
<body>
    <p class="abc" id="ps">西安交大</p>
    <p id="pt">西北大</p>
    <p class="abcd" id="pi">陕师大</p> 
</body>
</html>

②页面展示：

在这里插入图片描述

3、E:only-child

匹配父元素仅有一个子元素E

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   /* 匹配ul父元素只有一个子元素的标签 */
   li:only-child{
        background-color: antiquewhite;
    }
</style>
<body>
    <ul>
        <li>北京</li>
    </ul>
    <ul>
        <li>重庆</li>
        <li>上海</li>
        <li>天津</li>
    </ul>
</body>
</html>

②页面展示：（注：可以看到，相同的无序标签，只对第一个无序标签里的含有一个子元素"li"起作用,对第二个的无序标签没有任何改变。)

在这里插入图片描述

4、E:first-child

匹配父元素的第一个子元素E

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   /* 选择父元素中的第一个子元素的li */
   li:first-child{
        font-size: 25px;
        color:blueviolet
    }
</style>
<body>
    <ul>
        <li>北京</li>
    </ul>
    <ul>
        <li>重庆</li>
        <li>上海</li>
        <li>天津</li>
    </ul>
    <ol>
        <li>董事长</li>
        <li>总经理</li>
        <li>董事</li>
    </ol>
</body>
</html>

②页面展示:
在这里插入图片描述

5、E:last-child

匹配父元素的最后一个子元素E

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   /* 选择父元素中的最后一个子元素的li */
    li:last-child{
        font-size: 25px;
        color: aqua;
    }
</style>
<body>
    <ul>
        <li>北京</li>
    </ul>
    <ul>
        <li>重庆</li>
        <li>上海</li>
        <li>天津</li>
    </ul>
    <ol>
        <li>董事长</li>
        <li>总经理</li>
        <li>董事</li>
    </ol>
</body>
</html>

②页面展示：（注：第一个无序标签里的li标签是父元素的第一个元素，也是最后一个元素，样式也进行了改变。）
在这里插入图片描述

6、E:nth-child(n)

匹配父元素中第(n)个子元素E

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  /* 选择是父元素的第二个子元素的li */
  li:nth-child(2){
        color:blueviolet;
        font-size:20px;
    }
</style>
<body>
    <ul>
        <li>重庆</li>
        <li>上海</li>
        <li>天津</li>
    </ul>
    <ol>
        <li>董事长</li>
        <li>总经理</li>
        <li>董事</li>
    </ol>
</body>
</html>

②页面展示：
在这里插入图片描述

7、E:nth-last-child(n)

匹配父元素中倒数第(n)个子元素E

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
 /* 选择父元素中的倒数第一个子元素的li */
    li:nth-last-child(1){
        font-size: 25px;
        color:pink
    }
</style>
<body>
    <ul>
        <li>重庆</li>
        <li>上海</li>
        <li>天津</li>
    </ul>
    <ol>
        <li>董事长</li>
        <li>总经理</li>
        <li>董事</li>
    </ol>
</body>
</html>

②页面展示：
在这里插入图片描述

8、E:nth-of-type(n)

匹配同类型中的第n个同级兄弟元素E。

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     /* 选择aside的第三个p标签 */
     p:nth-of-type(3){
            color:red;
        }
</style>
<body>
    <aside>
        <p>飞机</p>
        <p>轮船</p>
        <p>汽车</p>
    </aside>   
</body>
</html>

②页面展示：
在这里插入图片描述

9、E:empty

匹配没有任何子元素的元素E

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     /* 选择没有任何元素的p标签（包括没有任何内容） */
     p:empty{
            height: 15px;
            border: 1px;
            background-color: rgb(38, 186, 197);
        }
</style>
<body>
<p>AAAAAAAA</p>
<p></p>
<p>BBBBBBBB</p>
</body>
</html>

②页面展示：
在这里插入图片描述

10、E:checked

匹配用户界面上处于选中状态的元素E

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     /* 选择处于选中状态的input ,将它的相邻的兄弟元素的文本设置为red*/
     input:checked+span{
            color:red;
        }
</style>
<body>
    性别：
    <label><input type="radio" value="男" name="gender" checked/><span>男</span>
     </label>
     <label>
      <input type="radio"  value="女" name="gender"/><span>女</span>
    </label>
</body>
</html>

②页面展示：（注：选中后，颜色改为红色）
在这里插入图片描述

11、E:enabled

匹配用户界面上处于可用状态的元素E。

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
      /* 选择含有name属性并且可用的input标签 */
      input[name]:enabled{
            color:red;
        }
</style>
<body>
    <label>
        姓名：
        <input type="text" name="username"/>
    </label>
    <br/><br/>
    <label>
        测试：
        <input type="text" name="test" value="abc" disabled/>   <!--不可用 -->
    </label>
</body>
</html>

②页面展示：（注：可以看到可用的input标签，输入框的内容颜色改变，颜色为红色，而不可用的input标签颜色没有任何改变）
在这里插入图片描述

12、E:disabled

匹配用户界面上处于禁用状态的元素E。

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     /* 选择含有name属性并且不可用的input标签 */
     input[name]:disabled{
            color:blue;
        }
</style>
<body>
    <label>
        姓名：
        <input type="text" name="username"/>
    </label>
    <br/><br/>
    <label>
        测试：
        <input type="text" name="test" value="abc" disabled/>   <!--不可用 -->
    </label>
</body>
</html>

②页面展示：（注：可以看到不可用的input标签，内容框的内容颜色改变，变为了蓝色，可用的input标签颜色没有被改变。）
在这里插入图片描述

四、伪对象选择器

1、E:before(CSS2) -> E::before(CSS3)

设置在对象前（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     p::before{
        /* position: absolute; 定位方式：绝对定位 */
        color:red;
        content: '西安交通大学';
    }
</style>
<body>
    <p>西安邮电大学</p>      
</body>
</html>

②页面展示：

在这里插入图片描述

2、E:after(CSS2)-> E::after(CSS3)

设置在对象后（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     p::after{
        /* position: absolute; 定位方式：绝对定位 */
        color:red;
        content: '西安交通大学';
    }
</style>
<body>
    <p>西安邮电大学</p>      
</body>
</html>

②页面展示：

在这里插入图片描述

五、超链接的伪类选择器

1、E:link

设置超链接a在未被访问前的样式，也就是超链接正常时候的状态。

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
      a:link{ 
        /* 超链接未被访问之前的样式   */
        font-size: 20px;
        color:red;
    }
   
</style>
<body>
    <a href="">百度</a>   
</body>
</html>

②页面展示：
在这里插入图片描述

2、E:visited

设置超链接a在被访问后的样式

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    a:visited{
        /* 超链接被访问之后的样式 */
        color:greenyellow;
    }
</style>
<body>
    <a href="">百度</a>   
</body>
</html>

②页面展示：
在这里插入图片描述

3、E:hover

设置元素在其鼠标悬停时的样式

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* E:hover文本和超链接均可使用 */
    p:hover{
        /* 鼠标悬浮在p标签上的样式 */

        font-style: italic;
        font-size: 25px;
    }
    /* 鼠标悬浮在a标签的样式 */
    a:hover{
        font-weight:bold;
        font-size:25px;
    }
</style>
<body>
    <a href="">百度</a> 
    <p>西安邮电大学</p>   
</body>
</html>

②页面展示：
在这里插入图片描述

在这里插入图片描述

4、E:active

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

①代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   p:active{
        /* 鼠标在被激活时（鼠标点击与释放之间发生的事情）的样式 */
        color:blue;
    }
</style>
<body>
    <p>西安邮电大学</p>   
</body>
</html>

②页面展示：
在这里插入图片描述

第四周学习周记——进一步学习CSS
jix_Hu的博客
04-22 533
第四周学习周记前言一、CSS常用属性1. CSS背景2. CSS颜色3. CSS对齐4. CSS边框5. CSS显示二、BootStrap简介总结 前言 在上周初步学习了CSS，了解了CSS的基本概念、语法以及如何创建CSS，这一周将进一步学习CSS的相关属性并初步认识BootStrap。 一、CSS常用属性 CSS的常用属性有很多，在这里我主要学习了如下属性。 1. CSS背景 CSS的背景属性用于定义HTML元素的背景。 背景颜色的background-color属性定义了元素的背景颜色。 页面的背
PostCSS详细介绍
技术探秘者的博客
04-26 1397
PostCSS是一个强大的CSS处理工具，它可以用来转换、优化和格式化CSS代码。与传统的预处理器（如Sass和Less）不同，PostCSS不是一种新的CSS语法，而是一个基于JavaScript插件的工具，可以灵活地扩展和定制。本书将详细介绍PostCSS的原理、用法和常见插件，帮助读者快速掌握PostCSS的使用技巧和优化方法。
HTML&CSS学习总结
krister_的博客
07-01 888
<li>列表项1</li><li>列表项2</li><li>列表项1</li><li>列表项2</li>
CSS从入门到进阶教程 - 系统学习CSS 技术
YunWisdom
10-10 1379
由浅入深的系统讲解CSS的功能，CSS 体系课程专讲
web前端开发css的学习
m0_74569795的博客
01-17 1259
css书写要求，css常用选择器：全局选择器；元素选择器；类选择器；ID选择器；合并选择器；选择器的优先级，字体样式：字体颜色，字体大小 ；字体样式 ；字体，背景属性 ：背景颜色；背景图片；背景平铺；
CSS基础
qq_61900577的博客
12-18 888
黑马程序员|前端开发学习css笔记
Web技术学习：CSS属性结构化记忆梳理
hebhljdx的博客
09-27 1289
CSS属性是一系列规则，用于描述HTML元素在网页上的外观表现。这些属性可以控制文本的颜色、大小、字体、背景颜色等，也可以控制元素的位置布局，甚至动画效果。文本与字体颜色与背景边框与填充布局与定位过渡与动画用户交互与元素属性属性数量多，分类特征不明显。设计上不够完美，存在明显的兼容和历史发展的痕迹。很多特性已经淘汰或者很少使用。初学者难以分辨。属性特性存在冗余和相互影响，提高了调试和理解的难度。属性在实际应用时难以抉择，存在多种方案，初学者很难找到最佳实践。
Tailwind CSS快速入门
知识点沉淀包括不限于前端
05-24 1811
Tailwind css 对比传统css css in js 安装流程 书写技巧 速查手册
CSS动画技术（css-animation）
Zarathusa的博客
05-23 3027
CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
CSS学习总结
wuyuplus的博客
05-18 1103
CSS（层叠样式表）和html相比，内容较多。因此打算以由大到小的脉络来把握整体CSS的内容。从大到小，依次是整体的CSS概念理论，CSS层叠关系，CSS排版，CSS基本的盒子模型，盒模型内部相关元素，一些常用样式等。随着学习的深入也会进一步修改文章。
CSS学习资料
03-14
《CSS学习资料》 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它赋予HTML或XML文档以视觉样式，使网页呈现出丰富多彩、布局精致的效果。本资料主要聚焦于“DIV+CSS”布局技术，这是一种广泛...
CSS_01_Css学习教程_
09-29
在CSS（层叠样式表）学习教程中，我们将深入探讨这一关键的前端技术，它用于控制网页的布局和视觉表现。...在“CSS_01”这个压缩包中，可能包含了针对这些知识点的实例、代码片段和练习，供你进一步学习和掌握。
CSS学习案例图片素材
04-17
在IT行业中，CSS（Cascading Style Sheets）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。这个“CSS学习案例图片素材”压缩包...在实践中不断试验和探索，可以进一步提升CSS的运用能力。
HTML CSS学习练习.zip
11-08
本资源【HTML CSS 学习练习.zip】旨在帮助用户掌握...此外，本资源还提供了一些仿站项目，让用户在模仿中学习，进一步巩固所学知识。无论是初学者还是有一定基础的学习者，都可以通过这套练习提高自己的前端开发技能。
网页制作之学习CSS的理由
09-27
进一步，CSS提供了更精确的页面布局控制，如浮动、定位和响应式设计，让设计师能够根据屏幕尺寸和设备特性调整页面布局，确保在各种设备上的良好显示效果。 最后，CSS有助于搜索引擎优化（SEO）。当内容和样式分离...
Web前端第二次作业
nixiaoge的博客
11-05 383
作业要求：制作带有下拉悬停菜单的导航栏。
CSS如何改变滚动条的颜色样式粗细？
zhangxueyou2223的博客
11-07 246
默认滚动条很丑怎么办？如何改版滚动条的粗细，颜色，让它更美观？CSS如何改变滚动条的粗细？干货来了 🧨🧨🧨 完结，撒花~ ，记得收藏 ~
【css】overflow: hidden效果
-凌凌漆-的博客
11-07 186
【代码】【css】overflow: hidden效果。
CSS教程（二）- CSS选择器
最新发布
Oblning的博客
11-10 829
css选择器，标签选择器，ID选择器，类选择器，通用选择器，群组选择器，子代选择器，后代选择器，伪类选择器，focus，hover，activate
理解Web概念与HTML-CSS基础学习
在掌握了HTML的基本结构和语法后，可以进一步学习CSS，用于美化和布局页面，以及JavaScript，用于实现页面的交互效果。在B/S架构下，学习静态资源（HTML、CSS和JavaScript）是理解和开发动态资源（如jsp/servlet等）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值