CSS初始：CSS的概念、样式、优势和选择器

最新推荐文章于 2023-09-05 13:39:31 发布

三木诶

最新推荐文章于 2023-09-05 13:39:31 发布

阅读量233

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_60022003/article/details/118554118

版权

CSS的概念：

CSS是一种文件样式的计算机语言（它的全称为：“层叠样式表 Cascading Style Sheets”）它作用在于定义HTML内容在浏览器的显示样式。

CSS的样式：优先级：行内>内部>外部（链接，导入）

行内样式：写在标签里的（style="声明样式"）

<p style="color: red;">行内样式</p>

内部样式：写在head内，<style type="text/css">
选择器{声明样式}
</style>

<style type="text/css">
		
</style>

链接样式：写在.CSS文件；<link rel="stylesheet" type="test/css" href="css文件的位置"/>

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

导入样式：写在CSS文件里@import url("css文件位置");

@import url("global.css");

CSS的优势：

内容与表分开
内容容易修改
页面布局更加灵活
减少代码量，增加浏览速度
容易寻找相关的位置

CSS的选择器：

基本选择器：优先级：ID>类选择器>标签选择器

1、标签选择器：

<style type="text/css">
           p{
               color: red;
           }
       </style>
   </head>
   <body>
       <p>标签选择器</p>
   </body>

2、类选择器

<style type="text/css">
.lei{
               color: red;
           }
       </style>
   </head>
   <body>
       <p class="lei">类选择器</p>
   </body>

3、ID选择器

<style type="text/css">
           #id{
               color: red;
           }
       </style>
   </head>
   <body>
       <div id="id">ID选择器</div>

层次选择器：

1、后代选择器：父元素有关联的所有元素
2、相邻兄弟选择器：指定的子元素就近的后面同级元素
3、子选择器：父元素的子元素
4、通用兄弟：指定的子元素后所有的同级元素

伪类选择器：

P:first-child：找出第一个元素是否是P，是的话就会声明效果

<style type="text/css">
			p:first-child{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
	</body>

P:last-child：找出最后一个元素是否为P，是的话就会声明效果

<style type="text/css">
			p:last-child{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
	</body>

P:nth-child(n)：找出指定的第N个元素是否为P，是的话就会声明效果

<style type="text/css">
			p:nth-child(2){
				color: red;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
	</body>

P：first-of-type：找出类型再看位置

<style type="text/css">
			p:first-of-type{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
	</body>

P：last-of-type：找出类型再看位置

<style type="text/css">
			p:last-of-type{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
	</body>

P：nth-of-type（n）：找到类型，再看n的位置

<style type="text/css">
			p:nth-of-type(3){
				color: red;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
	</body>

属性选择器：

P[属性]：对应的属性有效果

<style type="text/css">
			p[class]{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="">1</p>
		<p class="">2</p>
		<p class="">3</p>
		<p class="">4</p>
	</body>

P[属性="属性值"]：对应的属性的值一致

<style type="text/css">
			p[class="p1"]{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="p1">1</p>
		<p class="p1">2</p>
		<p class="">3</p>
		<p class="">4</p>
	</body>

P[属性^="属性值"]：对应属性的值开头的字符有效果

<style type="text/css">
			p[class^="c1"]{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="a1">1</p>
		<p class="l1">2</p>
		<p class="p1">3</p>
		<p class="c1">4</p>
	</body>

P[属性$="属性值"]：对应属性的值结尾的字符有效果

<style type="text/css">
			p[class$="3"]{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="a1">1</p>
		<p class="a2">2</p>
		<p class="a3">3</p>
		<p class="a4">4</p>
	</body>

P[属性*="属性值"]：对应属性的值任意存在的字符有效果

<style type="text/css">
			p[class*="1"]{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="a1">1</p>
		<p class="b1">2</p>
		<p class="c1">3</p>
		<p class="d1">4</p>
	</body>

三木诶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS初始：CSS的概念、样式、优势和选择器

CSS的概念：CSS是一种文件样式的计算机语言（它的全称为：“层叠样式表 Cascading Style Sheets”）它作用在于定义HTML内容在浏览器的显示样式。CSS的样式：优先级：行内>内部>外部（链接，导入）行内样式：写在标签里的（style="声明样式"）<p style="color: red;">行内样式</p>内部样式：写在head内，<style type="text/css"> ...
复制链接

扫一扫