第三次讨论班

最新推荐文章于 2024-04-09 12:15:29 发布

飞行日记@

最新推荐文章于 2024-04-09 12:15:29 发布

阅读量99

点赞数

文章标签： visual studio code

本文链接：https://blog.csdn.net/weixin_52039976/article/details/124226082

版权

本文详细介绍了CSS中的高级选择器，包括后代选择器、子代选择器和并集选择器，并展示了它们在实际代码中的应用。此外，还深入探讨了伪类选择器，如链接伪类和通用伪类，以及如何使用它们来控制元素的不同状态。同时，文章还涵盖了背景颜色、背景图片、阴影效果的设置方法，提供了丰富的代码示例，帮助读者更好地理解和掌握CSS的这些高级特性。

摘要由CSDN通过智能技术生成

一、CSS高级选择器

1.后代选择器

用来选择后代元素，特征是选择子孙后代，符号为空格。

    <div>
        <p>段落 1。 在 div 中。</p>
        <p>段落 2。 在 div 中。
            <p>我是div的孙子p</p>
        </p>
    </div>
    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>

div p {
    background-color: yellow;
}

2.子代选择器

选择最近一级元素，特征是只选最近的一级元素，符号为>

    <h1>Welcome to My Homepage</h1>
    <div>
        <h2>My name is Donald</h2>
        <p>I live in Duckburg.</p>
    </div>

    <div>
        <span><p>I will not be styled.</p></span>
    </div>

    <p>My best friend is Mickey.</p>

 div>p
{
	background-color:yellow;
}

3.并集选择器

选择某些相同样式的元素，特征是用于集体声名，符号为逗号。

    <h1>Welcome to My Homepage</h1>

    <div>
        <p>My name is Donald.</p>
        <p>I live in Duckburg.</p>
    </div>

    <p>My best friend is Mickey.</p>

 h1,div p {
    background-color: yellow;
}
相当于
h1{
 background-color: yellow;
}
+
div p{
 background-color: yellow;
}

二、伪类选择器

1.链接伪类选择器

选择不同状态的的链接。a:link,a:hover;a:active,a:visited

:link向未访问的链接添加特殊的样式

:hover在鼠标移到链接上时添加的特殊样式。

:active向活动的链接添加特殊的样式

:visited向访问过的链接添加特殊的样式。

 <p>将鼠标移上并点击此链接: <a href="http://www.runoob.com/">runoob.com</a></p>

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

注意点：

1.一般这几个先后位置不发生变化

2.链接本来有自己的颜色，假如在body里边有a标签设置body{color:red} 链接是不会改变颜色的

需要设置a:link{

Color:red;

}

2.其他伪类选择器

1.：focus选择器

选择获得光标，跟表单相关。input:focus

FOCUS伪类选择器(一般是input表单标签才能使用)
Input:focus{
Background-color:yellow; {当鼠标聚焦在那个框中时变颜色}
}

2:nth-child(n)

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制，n 可以是一个数字，一个关键字，或者一个公式.


<body>
    <p>
        将鼠标移上并点击此链接: <a href="http://www.runoob.com/">runoob.com</a>
    </p>
    <input type="text" placeholder="请输入密码" />

      <ul>
        <li></li>
        <li></li>
        <p>我是p</p>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

li:nth-child(2n) {
    background-color: rgb(148, 168, 198);
}

p:nth-child(3) {
    color: aquamarine;
    background-color: rgb(80, 27, 27)
}

注意点：nth-child(n)标签前的标签应该是父元素第n个子元素。

3.：before ：after

:after 给元素动态创建最后一个子元素 :before 给元素动态创建第一个子元素

 p:before
{ 
	content:"Read this -";
	background-color:yellow;
	color:red;
	font-weight:bold;
}

p:after
{ 
    content:"- Remember this";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

选择器的权重

ID选择器 > 类名选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器

四.背景

1.背景颜色（透明）

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

/* 背景默认为透明 */

/* 背景颜色透明度设计 */ 越小透明度越高

background-color: rgba(144, 36, 36,0.5);

2.背景图片

(1)bgi


#bgc {
    width: 200px;
    height: 200px;
    background-image: url('https://tva3.sinaimg.cn/large/008bVENCly1h1ilnz6r9tj32801e00vu.jpg');
}

其中x,y可以为length 像素

也可以是 top center bottom left right等方位名词

(2)bgr

如果你不想让图像平铺，你可以使用 background-repeat 属性:

#bgc {
    margin-top: 20px;
    width: 100%;
    height: 400px;
    background-image: url('http://static.runoob.com/images/mix/gradient2.png');
    /* background-repeat: repeat-x; */
    /* background-repeat: no-repeat; */
    background-repeat:repeat-y;
    background-color: rgb(144, 36, 36);
}

(3)bgp

背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

   background-position: right top;

(4)bga 滚动还是固定

 /* background-attachment: scroll; */
    /* background-attachment: fixed; */

五.阴影

1.盒子阴影

1、属性值规则
如果只给出两个值, 那么这两个值将会被当作水平阴影、垂直阴影来解释。
如果给出了第三个值，那么第三个值将会被当作模糊距离解释。
如果给出了第四个值, 那么第四个值将会被当作阴影尺寸来解释。
可选，inset关键字。
可选，颜色值

语法

Box-shadow:h-shadow v-shadow blur spread color inset;

h-shaow: 必需，水平阴影的位置，可以负值。阴影在x轴上的距离

v-shadow:垂直阴影的位置。 阴影在y轴上的距离

blur:可选，模糊距离 越大影子越模糊

spread：可选，阴影的尺寸 影子的大小

inset：将外部阴影变为内部阴影。

效果：本来没有影子，鼠标经过时有阴影

Div：hover{

Box-shadow:h-shadow v-shadow blur spread color inset;

}

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

div {
width: 100px;
height: 100px;
background-color: #ccc;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .5);
}

2.文字阴影

text-shadow: 颜色 X轴偏移量 Y轴偏移量模糊大小;
text-shadow: black 10px 10px 10px;

多个阴影
text-shadow: 颜色 X轴偏移量 Y轴偏移量模糊大小,颜色 X轴偏移量 Y轴偏移量模糊大小;
text-shadow: black 10px 10px 10px,blue 20px 20px 20px;

	<head>
		<meta charset="UTF-8">
		<title>文字阴影</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				position: relative;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 400px;
				margin: 10% auto;
				font: 50px/200px "微软雅黑";
				
				/* 设置文字颜色为白色 */
				color: #FFF;
				
				/* 设置文字阴影 */
				text-shadow: black 1px 1px 10px;
/* 设置文字颜色 */
color: pink;
				
/* 设置文字阴影 */
text-shadow: yellowgreen 10px 10px 10px,orange 20px 20px 10px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			I LOVE U
		</div>
	</body>

飞行日记@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第三次讨论班

前端第三次讨论班的内容及安排一、讨论班时间时间暂定于下周六（4月23号）上午九点至十点。时间冲突请与前端人员联系。二、内容及范围CSS高级选择器伪类选择器背景、阴影、圆角边框。三、要求预习博客于本周五（4月22日）晚八点前上传卓音博客，设置好分类请大家复习之前所学内容，讨论班会点名同学回答问题。...
复制链接

扫一扫