CSS引入样式与选择器

最新推荐文章于 2024-07-16 17:18:30 发布

Aries_Stark

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量59

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/Aries_Stark/article/details/117632633

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

- 引入样式
- 选择器

#引入样式
##行内
##内嵌
##外链
##导入
#选择器
##基本选择器
##包含选择器
##属性选择器
##伪类选择器
##伪属性选择器

引入样式

行内样式

<h1 style="color:red">行内</h1>

内嵌样式

<style type="text/css">
	    h1{
	    	color: blue
	    }
	</style>

外链样式

<link rel="stylesheet" type="text/css" href="css.css">

导入样式

<style type="text/css">head@import url(css.css)</style>

四种样式就近优先

选择器

**
基本选择器
id选择器（根据id属性获取）优先级最高
#idname{}
类选择器（class属性获取）优先级第二
.classname{}
标签选择器（根据标签名获取）优先级第三
div{}
通用选择器（通配符* 给所有都加）优先级最低
*{}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<style type="text/css">
	*{
		color: green
	} /*通用选择器*/
	div{
		color: purple
	}
	/*标签选择器*/
	#first{
		color: red
	}
	/*id选择器*/
	.class1{
		color: yellow
	}
	/*class选择器*/
	</style>
</head>
<body>
	<div id="first" class="class1">DIV</div>
	<diV>DIV2.0</div>
	<div class="class1">DIV3.0</div>
	<h1>H1</h1>
	<hr>
</body>
</html>

在这里插入图片描述
包含选择器
子代选择器（获取某个标签里的一级子标签使用空格来分隔）
后代选择器（获取某个标签里的所有子标签使用>来分隔）
分组选择器（逗号选择器使用,来分隔）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>包含选择器</title>
	<style type="text/css">
        div.user>ul{
        	border-style: solid;
        	border-color: green;
        }
	    /*子代选择器*/
	    .user li{
	    	border-style: solid;
        	border-color: yellow;
	    }
	    /*后代选择器*/
	    .class1,div,#first{
	    	border-style: solid;
        	border-color: blue;
	    }
	    /*分组选择器*/
	</style>
</head>
<body>
	<div id="first" class="class1">DIV</div>
	<div>DIV2.0</div>
	<div class="class1">DIV3.0</div>
	<h1>H1</h1>
	<hr>
	<div class="user">
		<ul>
			<li>数据1</li>
			<li>数据2</li>
			<li>数据3</li>
		</ul>
		<li>数据4</li>
		<li>数据5</li>
		<li>数据6</li>
	</div>
</body>
</html>

在这里插入图片描述
属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	.container[class]{
		color: blue;
	}
	div[title]{
		color: yellow;
	}
	input[type*="e"]{
		color: green;
	}
	/*确切到某一个值*/
	input[type^="e"]{
		color: green;
	}
	/*以什么为开始*/
	input[type$="rl"]{
		color: green;
	}
	/*以什么为结束*/
	.msg+p{
		color: red;
	}
	/*表示下一个标签*/
	[title="标题"]{
		color: purple;
	}
	/*属性名称可以等于某一个值 注意优先级以免被覆盖*/
	</style>
</head>
<body>
	<div class="container">DIV</div>
	<div title="标题">DIV2.0</div>
	<input type="text" name="" id="" value="AA">
	<input type="email" name="" id="" value="BB">
	<input type="url" name="" id="" value="CC">
	<hr>
	<div class="msg">DIV3.0</div>
	<p id="msg2">P</p>
</body>
</html>

在这里插入图片描述

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">

	    a:link{
	    	color: blue;
	    }
	    /*链接*/
	    a:visited{
	    	color: red;
	    }
	    /*已访问*/
	    a:hover{
	    	color: green;
	    }
	    /*悬停*/
        a:active{
	    	color: yellow;
	    }
	    /*点击*/
	</style>
</head>
<body>
	<a href="https://www.bilibili.com/">cilck</a>
</body>
</html>

已访问

伪元素选择器
::before（:before css2中版本直接加样式）必须写content取值为样式加在前
::after（:after css2中版本直接加样式）必须写content取值为样式加在后

Aries_Stark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS引入样式与选择器

文章目录引入样式选择器#引入样式##行内##内嵌##外链##导入#选择器##基本选择器##包含选择器##属性选择器##伪类选择器##伪属性选择器**引入样式**行内样式<h1 style="color:red">行内</h1>内嵌样式<style type="text/css"> h1{ color: blue } </style>外链样式<link rel="styleshe
复制链接

扫一扫