山西农业大学20240923

Jia_dongyao

已于 2024-09-23 17:48:22 修改

阅读量686

点赞数 21

分类专栏：山西农业大学文章标签： css

于 2024-09-23 11:39:03 首次发布

本文链接：https://blog.csdn.net/2401_86991268/article/details/142448306

版权

山西农业大学专栏收录该内容

22 篇文章 2 订阅

订阅专栏

02-CSS

- - 一.CSS选择器

一.CSS选择器

选择器的作用就是在html中找到元素并且渲染它, 利用的是元素的名字

1.1 通用选择器(通配符)

选中页面中所有的元素
语法: *{ 样式声明; 样式声明;}
让所有的元素都应用此样式,但是使用 * 渲染效率极低,因为所有的元素都要渲染一遍, 一般很少使用
应用: *{margin:0;padding:0;} 所有的元素都清空内外边距

<head>
    <style>
        /*通配符:选中页面中所有的元素*/
        *{
            color:orange;
        }
    </style>
</head>
<body>
<!-- 通用选择器-->
    儿歌   --- 测试*可以选中body吗?--可以
    <div>在小小的花园里面</div>
    <p>挖呀挖呀挖</p>
    <h3>种小小的种子</h3>
    <span>开小小的花</span>
</body>

1.2 元素选择器(标签选择器)

使用html标签名作为选择器找到元素, 并且为元素渲染样式
特点: 所有该标签名的标签样式全部修改,无法精准定位某一个元素, 要为相同的元素名设置不同样是, 元素选择器做不到
应用: 定义页面中某一类元素的统一样式,可以使用元素选择器
div{样式声明;}
p{样式声明;}
权重值: 1

<head>
    <style>
        /*元素选择器*/
        p{
            color: blue;
        }
    </style>
</head>
<body>
<!-- 通用选择器-->
    儿歌   --- 测试*可以选中body吗?--可以
    <div>在小小的花园里面</div>
    <p>挖呀挖呀挖</p>
    <h3>种小小的种子</h3>
    <span>开小小的花</span>
    <div>在大大的花园里面</div>
    <p>挖呀挖呀挖</p>
</body>

1.3 ID选择器(专属定制, 精准定位)

通过元素的id属性作为选择器, 使用 #id 名查找到选择器, 该选择器具有唯一性,可以精准的定位某一个元素

很精准的定位到一个元素
权重值 100, 权重值高, 话语权也高, 不容易被其他选择器覆盖
每个页面不能有相同的id值, 复用性差
一般情况下, 不使用id选择器渲染元素(js中用的比较多)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*    id选择器 */
        #d1{
            color:red;
        }
    </style>
</head>
<body>
<!-- 通用选择器-->
    儿歌   --- 测试*可以选中body吗?--可以
    <div>在小小的花园里面</div>
    <p>挖呀挖呀挖</p>
    <h3>种小小的种子</h3>
    <span>开小小的花</span>
    <div id="d1">在大大的花园里面</div>
    <p>挖呀挖呀挖</p>
</body>
</html>

1.4 类选择器

在元素的开始标签中, 设置class属性, 具有相同class名的元素, 可以应用相同的样式

哪个元素需要该属性,就可以使用相同类的属性值, 方便
如果与其他类有不同的样式时, 可以再加一个类进行新样式的渲染
通过一个元素可以添加多个类属性值, 分别分类渲染
可以指定一个类型, 需要的元素拿来使用
.red{color:red}
注意: 点不要忘记写, 点和类名之间不能有空格

类选择器的权重值: 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
    /*    类选择器*/
        .d{
            color: aqua;
        }
        .bg{
            background-color: yellow;
        }
        .red{
            color:red;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<!-- 通用选择器-->
    儿歌   --- 测试*可以选中body吗?--可以
    <div class="d bg">在小小的花园里面</div>
    <p class="d">挖呀挖呀挖</p>
    <h3 class="d bg">种小小的种子</h3>
    <span class="red">开小小的花</span>
    <div id="d1" class="d">在大大的花园里面</div>
    <p class="red">挖呀挖呀挖</p>
</body>
</html>

1.5 群组选择器

多个"选择器(没有规定使用哪种选择器,所有选择器都可以)", 使用共同的样式, 可以将这些选择器用逗号隔开, 使用相同的样式

选择器1,选择器2,选择器3{
	样式声明;
}
相当于: 
选择器1{样式声明;}
选择器2{样式声明;}
选择器3{样式声明;}

从优化的角度看, 群组选择器比较好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*群组选择器*/
        div,.p1,#tit{
            color: red;
        }
        /*div{color: red;}*/
        /*p{color: red}*/
        /*h3 {color: red}*/
    </style>
</head>
<body>
<div>心怀大格局，过好小日子。</div>
<p class="p1">每一个终点，都是下一个起点。</p>
<h3 id="tit">正是因为那些暗淡浑浊的过去，才成就了此刻闪闪发光的自己。</h3>
</body>
</html>

1.6 关系型选择器

后代选择器

在一个祖先元素中, 选中其内部的后代元素, 可以由多种选择器搭配使用
通过父元素匹配后代元素
语法: 选择器选择器选择器 {样式声明}

.item .pic img{
     width: 238px;
}

子代选择器

子代选择器比后代选择器查找元素更加精准, 效率更高
写法: 父级>子级{样式声明}

/* 子代选择器*/
.item>.title>h5{
      color: red;
}

1.7 伪类选择器

伪类选择器是添加到选择器中的关键字, 指的是被选中的元素的状态

:active 激活 ; 指的是鼠标"点按住"当前元素范围时, 元素可以触发的状态, 改变的样式

.d1:active{
            color:red;
        }

:hover 悬停: 指的是鼠标"移入到"当前元素范围时, 元素可以触发的状态, 改变的样式

.d2:hover{
            color:pink;
        }

自带伪类选择器的元素
a元素"自带"伪类
a:link 超链接未被访问时的效果
a:visited 超链接被访问过后的效果

		a:link{ /*未被访问时*/
            color: red;
        }
        a:visited{ /*访问过后*/
            color: orange;
        }
        a:hover{ /*鼠标悬停时*/
            color: hotpink;
        }
        a:active{ /*元素被激活时*/
            color: aqua;
        }

注意: 伪类选择器是有顺序的:link>:visitied>:hover>:active

1.8 伪元素选择器

假的元素, 不是用标签包裹的元素

:before 在元素前面和 :after 在元素的后面, 添加元素,都不是实际的标签
content:"", 属性必须写, 但是值没有需要可以不写
注意: 在:before 和 :after 伪元素中可以单独对content字符串进行样式修饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        .price:before{
            content:"❤";
            color:red;
        }
        .price:after{
            content: "❤";
            color: red;
        }
    </style>
</head>
<body>
    <p class="price">6888.88</p>
</body>
</html>