选择器

元素（标签）选择器

 组合选择器: h1,p{color:red}

结合标签选择器

 h1.xiaodi {color:red;}

多类选择器

 class="xiaodi background"

链接多个类选择器

 .xiaodi.background{color:red; background-color:black}

id选择器

 声明：#important{}
属性：id="important
注意：⼀个id选择器的属性值在html⽂档中只能出现⼀次，避免写js获取id时出现混淆

通配符选择器*
后代选择器

 h1 p{color:red;}

⼦元素选择器

 div>span{font-size:900}

相邻选择器（兄弟）

 h1+p{background-color:pink;}

代码案例

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* div,p,h1{
      color: red;
    } */
    /* p.xiaodi{
      color: yellow;
    } */
    /* .background.xiaodi{
      color: red;
      background-color: black;
    } */
    /* #xiaodi{
      color: red;
    } */
    /* * {
      margin: 0;
      padding: 0;
    } */
    /* h1 p{
      color:green
    } */
    /* h1>p {
      color: red;
    } */
    li+li{
      color: red;
    }
  </style>
</head>
 
<body>
  <!-- <div>小滴课堂</div>
  <p>有很多的课程</p>
  <h1>前端</h1> -->
  <!-- <p class="xiaodi">有很多的课程</p> -->
  <!-- <div id="xiaodi">小滴课堂</div> -->
  <!-- <div>小滴课堂</div> -->
  <!-- <h1>
    <p>
      <p>小滴课堂</p>
    </p>
  </h1> -->
  <!-- <h1>
    <p>
      <p>小滴课程</p>
    </p>
  </h1>
  <p>有很多的课程</p> -->
  <ul>
    <li>前端</li>
    <li>后端</li>
    <li>测试</li>
  </ul>
  <ol>
    <li>电脑</li>
    <li>键盘</li>
    <li>鼠标</li>
  </ol>
</body>
 
</html>

posted @ 2022-08-31 06:48 DogLeftover 阅读(27) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 特殊选择器

· CSS的层叠与选择器优先级

· CSS选择器相关

· css选择器

· css选择器详解

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

历史上的今天：
2021-08-31 vue开发：前端项目模板

选择器

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	声明：#important{}
	属性：id="important
	注意：⼀个id选择器的属性值在html⽂档中只能出现⼀次，避免写js获取id时出现混淆

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	/* div,p,h1{
	color: red;
	} */
	/* p.xiaodi{
	color: yellow;
	} */
	/* .background.xiaodi{
	color: red;
	background-color: black;
	} */
	/* #xiaodi{
	color: red;
	} */
	/* * {
	margin: 0;
	padding: 0;
	} */
	/* h1 p{
	color:green
	} */
	/* h1>p {
	color: red;
	} */
	li+li{
	color: red;
	}
	</style>
	</head>

	<body>
	<!-- <div>小滴课堂</div>
	<p>有很多的课程</p>
	<h1>前端</h1> -->
	<!-- <p class="xiaodi">有很多的课程</p> -->
	<!-- <div id="xiaodi">小滴课堂</div> -->
	<!-- <div>小滴课堂</div> -->
	<!-- <h1>
	<p>
	<p>小滴课堂</p>
	</p>
	</h1> -->
	<!-- <h1>
	<p>
	<p>小滴课程</p>
	</p>
	</h1>
	<p>有很多的课程</p> -->
	<ul>
	<li>前端</li>
	<li>后端</li>
	<li>测试</li>
	</ul>
	<ol>
	<li>电脑</li>
	<li>键盘</li>
	<li>鼠标</li>
	</ol>
	</body>

	</html>