css语法--选择器

最新推荐文章于 2022-11-18 20:16:30 发布

走_心

最新推荐文章于 2022-11-18 20:16:30 发布

阅读量679

点赞数

分类专栏：【前端学习】文章标签： css 选择器

本文链接：https://blog.csdn.net/tianchenglin/article/details/41624745

版权

【前端学习】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

//html选择器
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
    <title>HTML选择器</title>
		 <style type="text/css">
		     p{color:red;font-weight:bold}//下列所有带p标记的都为这个样式
	     </style>
 </head>
 <body>
    <p>这是一个段落.</p>
 </body>
</html>

//ID选择器--只能在文档中出现一次
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
    <title>ID选择器</title>
		 <style type="text/css">
		     #test{color:red;font-weight:bold}
	     </style>
 </head>
 <body>
    <p id=test>这是一个段落.</p>
 </body>
</html>

//类选择器--可在文档中出现多次
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
    <title>ID选择器</title>
		 <style type="text/css">
		     .test{color:red;font-weight:bold}
	     </style>
 </head>
 <body>
    <p class=test>这是一个段落.</p>
 </body>
</html>

//属性选择器
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
    <title>属性选择器</title>
		 <style type="text/css">
		     [align="center"]{color:blue}
			 [name~="t"]{color:red}
			 [name|="t1"]{color:green}
	     </style>
 </head>
 <body>
    <p align="center">这是一个段落.</p>
	<p align="center" name=”t t1“>这是一个段落.</p>
	<p align="center" name="t-t1">这是一个段落.</p>
 </body>
</html>