09-12CSS设置样式、CSS选择器、伪元素_style里怎么些伪元素样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_42061334/article/details/108703408

一、CSS的基本使用方式与CSS基本选择器

搜索按钮是图标字体
在这里插入图片描述

通过style标签设置样式	style标签与CSS文件写后面的优先级较高
通过style属性设置样式	element.style 优先级最高
通过CSS文件设置样式	style标签与CSS文件写后面的优先级较高

注意：
1、直接在style上写的内容优先级最高。同样的选择器，谁在后面谁的优先级比较高。
2、选择器的优先级在其余情况下，继承的样式<浏览器模式的样式<标签样式<class样式<id样式<style属性样式。
3、优先级的提高：
a.important：可以在属性后面加！important将属性优先级提到最高（最快速）,不能过度使用important，都加了就按原本的优先级。
b.CSS选择器复杂程度提高优先级：
在这里插入图片描述 4、越具体越复杂的选择器优先级越高

（1）通过style标签设置样式
在这里插入图片描述

在这里插入图片描述
（2）通过style属性设置样式

（3）通过CSS文件设置样式
在这里插入图片描述

在这里插入图片描述

二、CSS常用选择器

1、属性选择器：
[属性名称] 单独选择某个元素
[属性名称=属性的值] 选择这个属性具体的某个值的元素
在这里插入图片描述
2、子元素选择器
第几个子元素语法：元素:nth-child(1)
最后一个子元素语法：元素:last-child

在这里插入图片描述
3、直接选择子元素
.parent div{}
.parent>div{} 直接选择子元素child

在这里插入图片描述
4、选择某个元素后面的元素
+（n个）div{ }

5、选择某个元素后面的多个元素
~div{ }

在这里插入图片描述

三、伪元素

伪元素：通过CSS创建假的元素
例子：聊天框的小尖尖（不能创建div，因为是方形的），所以用伪元素，创建一个内容来设置它的样式。
在这里插入图片描述
1、创建伪元素：
:before，在元素内部创建1个最前面假的子元素
:after，在元素内部创建1个最后面假的子元素
注意：
（1）创建伪元素的时候，content属性必须写！
（2）伪元素默认是行元素，没有宽高，要把它设置为行块元素才能显示出来。display: inline-block;

2、定位
父元素中写position：relative；相对定位
子元素中写position：absolute；绝对定位
left：左减右加
top：上减下加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.chat{
				width: 350px;
				line-height: 80px;
				padding: 30px;
				font-size: 50px;
				background: lawngreen;
				margin: 0 auto;
				/*圆角化*/
				border-radius: 30px;
				/*父元素相对定位relative*/
				position: relative;
			}
			.chat:after{
				/*content: ""必须写*/
				content: "";
				/*默认行元素（不会占据一整行）要设置
				行块元素才能显示出来。*/
				display: inline-block;
				width: 0px;
				height: 0px;
				background: transparent;
				border-top: 15px solid transparent;
				border-bottom: 15px solid transparent;
				border-left: 20px solid  lawngreen;
				border-right: 20px solid transparent;
				/*子元素绝对定位absolute*/
				position: absolute;
				left: 410px;
				top: 40px;
			}
		</style>
	</head>
	<body>
		<div class="chat">
			柠檬鱼，你好！
		</div>
	</body>
</html>

在这里插入图片描述