使用CSS技术【美化网页（二）】

最新推荐文章于 2024-06-12 20:14:43 发布

Alika-snowr

最新推荐文章于 2024-06-12 20:14:43 发布

阅读量2k

点赞数 43

分类专栏： Web应用开发文章标签： css css3 前端 html

本文链接：https://blog.csdn.net/2301_81982769/article/details/136043599

版权

Web应用开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

3.CSS复合选择器

每个选择器都有它的作用范围。前面介绍了3种基本的选择器，它们的作用范围都是一个单独的集合。复合选择器就是两个或多个基本选择器通过不同方式组合而成的选择器。

3.1.交集选择器

交集选择器是由两个选择器直接连接构成的，其结果是选中两个各自作用范围的交集。其中第一个必须是标记选择器第二个必须是类选择器或者ID选择器。

tagName.className{

           property:value;
}
/*下面给交集选择器的定义*/
div.class1{
       color:red;
       font-size:10px;
       font-weight:bold;
}

交集选择器将选中同时满足前后二者定义的元素也就是前者定义的标记类型并且指定了后者的类型或ID的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: blue;
            font-size: 9px;
        }
        .class1{
            font-size: 12px;
        }
        div.class1{
            color: red;
            font-size: 12px;
            font-weight: bold;
        }
        
    </style>
</head>
<body>
<div>正常div标记，蓝色。9px</div>
<p class="class1">类选择器，12px</p>
<div class="class1">交集选择器，红色，加粗,10px</div>
</body>
</html>

示例中第一行文本的样式由<div>标记来定义,第二行文本的样式由class1类型选择器定义,第三行文本是他们的交集由交集选择器来定义。显示的是：红色，粗体，10px大小。

3.2.并集选择器

并集选择器就是对多个选择器进行集体声明，多个选择器之间用逗号隔开每一个选择器可以是任何类型的选择器。

selector1,selector2,...{
   property:value;
}
/*下面给并集选择器的定义*/
p,td,li{
        line-height:20px;
        color:red;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p{
            color: blue;
            font-size: 9px;
        }
        div.class1,#id1{
            color: red;
            font-size: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>正常div标记，蓝色。9px</div>
<p >p标记，和div标记相同</p>
<div class="class1">红色，加粗,10px</div>
<span id="id1">红色，加粗,10px</span>
</body>
</html>

运行效果：

代码中首先通过并集选择器声明div、p等元素的样式，这些样式格式相同均为：蓝色、10px；另一组并集选择器声明div.class1、#id1等元素的样式，均为：红色、粗体、10px。

3.3.后代选择器

在CSS选择器中，还可以通过嵌套的方式对特殊位置的HTML标记进行控制。例如，当<div>与</div>之间包含<b>标签时，就可以使用后代选择器定义出现在<div>标记中的<b>标记的格式.后代选择器的写法是：把外层的标记写在前面，内层的标记写在后面直接用空格隔开。

selector1 selector2{
   property:value;
}
/*两个选择器直接用空格隔开，并且selector2是selector1包含的对象。*/


.class1 b{
       color:#060;
       font-weight:800;
}

上面的选择器应用于类标签<class1>里面包含的<b>标签。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-family: 楷体;
            font-size: 12px;
            font-weight: bold;
        }
        div li{
            margin: 0px;
            padding: 5px;
            list-style: none;/*隐藏默认列表符号*/
        }
        div li a {
            text-decoration: none;/*取消超链接下划线*/
        }
    </style>
</head>
<body>
<div><a href="#"> 请选择下列选择器</a>
<ul>
    <li><a href="#">交集选择器</a> </li>
    <li><a href="#">并集选择器</a> </li>
    <li><a href="#">后代选择器</a> </li>
    <li><a href="#">子选择器</a> </li>
    <li><a href="#">相邻选择器</a> </li>
</ul>
</div>
</body>
</html>

运行效果：

3.4.子选择器

子选择器用于选中标记的直接后代，它的定义符号是 > 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div>p{
           font-family: 楷体;
           color: hotpink;
       }

    </style>
</head>
<body>
<div>
    <p>本行应用了子选择器,楷体 ,粉色 </p>
    <em>
        <p>本行不是div的直接后代子选择器无效 </p>
    </em>
</div>
</body>
</html>

运行结果：

显示结果的第一行显示为是因为<p>是<div>的直接后代，而第二行显示结果与子选择器无关这是因为<p>并不是<div>标记的直接后代。

3.5.相邻选择器

相邻选择器的定义符号是+，可以选中紧跟在他后面的一个兄弟元素（这两个元素具有共同的父元素。)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div+p{
            font-family: 楷体;
            color: red;
        }
    </style>
</head>
<body>
<div>第一行</div>
<p>本行应用相邻选择器红色楷体</p>
<p>本行不与div相邻相邻选择器无效</p>
***************************************************************
<div>第五行</div>
本行无标记，不影响应用相邻选择器 
<p>本行应用相邻选择器红色楷体</p>
</body>
</html>

运行效果：

第一段落标记紧跟在div之后因此会被选中；在最后一个div元素后尽管紧接着的是一段文字，但那些文字不属于任何标记，因此紧随这些文字之后的第一个p元素也会被选中。如果希望紧跟在h1后面的任何元素都变成红色楷体可以使用：

h1+*{
     font-family:楷体;
     color:red;
}

3.6.伪类选择器

伪类选择器是在CSS中已经定义的选择器，而不是由用户自行定义的。它可以分为结构伪类选择器和UI伪类选择器两种。

3.6.1.结构伪类选择器

结构伪类利用文档结构树实现元素过滤，也就是说通过文档结构的位置关系来匹配特定的元素，从而减少文档对class属性和ID属性的定义，使文档更加简洁。

1.基本结构伪类选择器

包括以下4种

:root	匹配文档的根元素
:not	对某个结构元素使用样式，但排除这个结构元素下面的子结构元素
:empty	指定当元素内容为空白时使用的样式
:target	对页面中某个target元素（该元素的ID被当作页面超链接来使用）指定样式，该样式只在用户单击了页面中的超链接并且跳转到target元素后起作用。

展示1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    :root{
      background-color: palevioletred;
    }
  </style>
</head>
<body>
<h1>新年快乐！</h1>
</body>
</html>

:root运行效果

展示2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body *:not(h1){
      background-color: yellow;
    }
  </style>
</head>
<body>
<h1>新年快乐！</h1>
<h2>龙年行大运</h2>
<h3>万事皆如意</h3>
</body>
</html>

:not运行效果

2.与元素位置有关的结构伪类选择器

包括以下4种

E: first-child	选择父元素的第一个匹配E的子元素
E:last-child	选择位于其父元素中最后一个位置，且匹配E的子元素
E:nth-child(n)	选择所有在其父元素中的第N个位置的匹配E的子元素
E:nth-last-child(n)	选择所有在其父元素中倒数第N个位置的匹配E的子元素

展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        tr:nth-child(odd){
            background-color: pink;
        }
        tr:nth-child(even){
            background-color: plum;
        }

    </style>
</head>
<body>
<h1>旅行列表</h1>
<table>
    <tr>
        <td>滕王阁 </td>
        <td>江南三大名楼之一,"西江第一楼"</td>
    </tr>
    <tr>
        <td>万寿宫  </td>
        <td> 千载万寿宫,半部豫章史</td>
    </tr>
    <tr>
        <td>八一起义纪念馆</td>
        <td>军旗升起的地方</td>
    </tr>
    <tr>
        <td>秋水广场 </td>
        <td>依“落霞与孤鹜齐飞，秋水共长天一色”而命名</td>
    </tr>
</table>
</body>
</html>

运行效果

3.6.2.UI伪类选择器

UI伪类选择器作用在标记的状态上。共有11种UI伪类选择器，常用的UI伪类选择器如下

E:enable	选择匹配E的所有可用UI元素
E:disable	选择匹配E的所有不可用UI元素
E:checked	选择匹配E的所有处于选中状态的UI元素
E: read-only	用来指定当元素处于只读状态时的样式
E:read-write	用来指定当元素处于非只读状态时的样式
E:hover	用来指定鼠标指针移动到元素上时元素所使用的样式
E:active	用来指定当元素被激活时使用的样式
E:focus	用来指定当元素所获得焦点时使用的样式

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:focus{
            background:palevioletred;
            font-family: "楷体";
            font-size: 12px;
        }
        div:first-child{
            color:deepskyblue;
            font-family: "宋体";
            font-size: 12px;
        }
    </style>
</head>
<body>
<div>
    fist-child伪类选择器示例：
    <div>本块是body的first-child </div>
    <strong>
        <div>本块是strong的first-child </div>
        <div>本行不是first-child </div>
    </strong>
    <p>
        :focus伪类选择其示例
    </p>
    <form name="form1" method="get">
        请输入姓名 :<input type="text" name="name">
    </form>
</div>
</body>
</html>

运行效果

以及点击文本框之后的效果：

这段代码的第一部分是对first-child的测试。第一个div元素是其父元素body的第一个子元素，以指定格式显示；第二个div元素是其父元素strong的第一个子元素，以指定格式显示；第三个Div元素并不是其父元素的第一个子元素所以未按指定格式显示。

3.7.伪元素选择器

在CSS中在css中伪元素选择器主要有first-letter、first-line、before和after 。之所以称这些选择器是伪元素选择器，是因为它们在效果上使文档增加了一个临时元素，属于一个“虚构元素”。

3.7.1.选择器:first-letter和:first-line

:first-letter用于选中元素内容的首字符。例如，使用它可以选中段落标记P中的第一个字母或中文字符。
:first-line用于选中元素中的首行文本。例如，使用它可以选中每个段落的首行而不考虑其他显示区域。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:first-letter{
            float: left;
            font-size: 2em;
        }
        div:first-line{
            font-family: "楷体";
            color: plum;
            line-height: 125%;
        }
    </style>
</head>
<body>
<div>于浩歌狂热之际中寒,<br>于天上看见深渊,<br>与一切眼中看见无所有,<br>于无所希望中得救。</div>
</body>
</html>

运行效果：

3.7.2.选择器:before和:after

:before和:after两个伪元素选择器必须配合content属性使用才有意义。它们的作用是在指定的标记内产生一个新的行内元素，该行内元素的内容由content属性中的内容指定。

:before选择器用于在某个元素之前插入内容
:after选择器用于在某个元素之后插入内容

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:after{
            content: "(好次☺!!买！！！)";
            font-size: 12px;
            color: plum;
        }
        p:before{
            content: "✔";
        }
    </style>
</head>
<body>
<h2>购物清单</h2>
<ul>
    <li>草莓</li>
    <li>蓝莓</li>
    <li>莓子</li>
</ul>
<h3>瓜</h3>
<p>冬瓜 </p>
<p>西瓜 </p>
<p>南瓜 </p>
<p>咕呱 </p>
</body>
</html>

运行效果：