1、元素选择器
- 又称为类型选择器（type selector）
- 文档的元素就是最基本的选择器。
- 设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
<style>
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
2、ID选择器
- 允许以一种独立于文档元素的方式来指定样式。
- 前面有一个 # 号 -，也称为棋盘号或井号。
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
#identity1{
font-size: 100px;
color: red;
}
#identity2{
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<p1 id="identity1">哈哈哈哈哈哈</p1>
<p2 id="identity2">呵呵呵呵呵呵</p2>
</body>
- 每个元素都可以设置id属性
- 同一个界面id的名称不能重复
- 编写元素属性时候id前面必须加上要加
# - id的名称只能由字母/数据、下划线组成
- id名称不能以数字开头
- id不能是html的标签名称：
ah1imginput - id前段开发一般都是留给js使用，不用于设置样式
3、类选择器
- 类选择器允许以一种独立于文档元素的方式来指定样式。
- 根据类名称找到对应的标签，设置属性指定样式。
<head>
<meta charset="UTF-8">
<title>类选择器-例1</title>
<style>
.pp{
font-family: italic;
color: darkmagenta;
}
</style>
</head>
<body>
<p3 class="pp">嘿嘿呵呵呵呵</p3>
</body>
-
class名称可以重复 - 编写时要加上
. - 命名规范跟id选择器一样
- 专门给标签设置，这个跟ID选择器不一样
- 可以同时绑定多个标签
- 多类选择器
- 例如：给一个特定的元素同时标记为重（important）和警告（warning）
<head>
<meta charset="UTF-8">
<title>类选择器-例1</title>
<style>
.important{
color: darkmagenta;
}
.warning{
color: green;
}
.important.warning{
color: beige;
}
</style>
</head>
<body>
<p class="important warning">嘿嘿呵呵呵呵</p>
<p class="warning">哈哈哈哈哈哈哈</p>
<p class="important">哈哈哈哈哈哈哈</p>
-
class=“类名1”“类名3”“类名3”...可以放n个类名 -
importantwarning两个词的顺序无关紧要，写成warning important也可以。
<head>
<meta charset="UTF-8">
<title>两个类选择器</title>
<style>
.colorR{
color: red;
}
.size30{
font-size: 30px;
}
.line{
text-decoration: underline;
}
</style>
</head>
<body>
<p class="colorR size30">第一个</p>
<p class="size30 line">第二个</p>
<p class="colorR line">第三个</p>
</body>
4、后代选择器
- 后代选择器（descendant selector）又称为包含选择器。
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
div p1 em{
color: yellow;
}
</style>
</head>
<body>
<div>
<P1>赤橙<em>黄</em>绿青蓝紫-黄出来</P1>
<p2></em>赤</em>橙黄绿青蓝紫-赤出来</p2>
</div>
</body>
- 去
div找到p1再找到em - 两个元素之间的层次间隔可以是无限的
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
5、子元素选择器
子元素选择器（Child selector），只选择某个元素的子元素，而不是选择任意的后代元素，只要子一代的子元素。
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style>
p1 >redR{
color: red;
}
</style>
</head>
<body>
<p1><redR>子辈红一代</redR>---孙辈红二代----曾孙辈红三代</p1>
<p1><em>子辈红一代---</redR>孙辈红二代</redR></em>----曾孙辈红三代</p1>
</body>
子选择器使用了大于号（子结合符，两边可以有空白符，这是可选的。因此，以下写法都没有问题：
p1 > redR
p1> redR
p1 >redR
p1>redR
-
从右向左读，选择器 p1 > redR 可以解释为“选择作为 p1 元素子元素的所有 redR 元素”。
-
结合后代选择器和子选择器
table1.company1 tdh > pp
- 上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个
tdh元素本身从table1元素继承，该table1元素有一个包含company1的class属性。如下：
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style>
table1.company1 tdh > pp{
color: red;
}
</style>
</head>
<body>
<table1 class="company1">黄色<tdh>黑色<pp>红红红红</pp>白色</tdh>紫色</table1>
<table1>黄色<tdh1>黑色<pp>红红红红</pp>白色</tdh1>紫色</table1>
<table1 class="company1"><pp>黄色<tdh>黑色红红红红白色</tdh></pp>紫色</table1>
</body>
6、相邻兄弟选择器
- 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
- 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
- 与子结合符一样，相邻兄弟结合符旁边可以有空白符。
h1 + p {margin-top:50px;}
- 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”，增加紧接在 h1 元素后出现的段落的上边距。
<style>
h1+p{
color: red;
}
<h1>呵呵呵呵</h1>
<p>嘿嘿嘿嘿嘿嘿</p>
<p>嘿嘿嘿嘿嘿嘿</p>
<h1>哈哈哈哈哈哈</h1>
<p>嘿嘿嘿嘿嘿嘿2</p>
<p>嘿嘿嘿嘿嘿嘿2</p>
- 紧跟
<h1>后面的第一个<p>的都是红色，此处改成把第二个<h1>改成<h2>则不行
h3~p{
color: blueviolet;
}
<h3>哼哼哼哼3</h3>
<a href="#">我是超链接</a>
<p>嘿嘿嘿嘿嘿嘿3</p>
<p>嘿嘿嘿嘿嘿嘿3</p>
<h4>哼哼哼哼4</h4>
<p>嘿嘿嘿嘿嘿嘿4</p>
<p>嘿嘿嘿嘿嘿嘿4</p>
- 此处只要是
<h3>后面只要是<p>都会被选择
7、序选择器
<head>
<meta charset="UTF-8">
<title>序选择器</title>
<style>
p:first-child{
color: red;
}
</style>
</head>
<body>
<p>哈哈哈哈哈1</p><!--第一级别-->
<p>哈哈哈哈哈2</p>
<div>
<p>哈哈哈哈哈3</p><!--div的第一级别-->
<p>哈哈哈哈哈4</p>
<p>哈哈哈哈哈5</p>
</div>
- p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
6、伪元素选择器
- 给指定标签内容前面添加一个子元素
标签名称::before{
属性名称:值;
}
- 给指定标签内容后面添加一个子元素
标签名称::after{
属性名称:值;
} -
visibility:hidden隐藏添加的子元素 -
display:block指定添加的子元素显示模式
0241D7FF-2FA2-49EF-AD55-7B9807B6F55A.png
网友评论