.选择器._.选择器和#选择器-CSDN博客

本文链接：https://blog.csdn.net/Pangdaojie/article/details/121540573

1.基本选择器：

标签选择器	h1{ }
ID选择器	#one{ }
类选择器	.twe{ }
通用选择器	*{ }

选择器的优先级：id > 类 > 标签 > 通配符

2.包含选择器：

子代选择器	获取的某个标签的第一级子标签
后代选择器	获取某个标签内的所有子标签
分组选择器	可以给多个标签加上样式，通过“，”隔开


/* 子代选择器 */
/* .list>ul{
color: green;
}*/
/* 后代选择器 */
/* .list li{
color: red;
}*/
/* 分组选择器 */
h2,.list,#list{
color: blue;
}
<body>
<h2>这是一个标签</h2>
<p id="list">这是一个段落</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</ul>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
<li>这是列表9</li>
</div>

3.属性选择器：

<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/* 选中某个标签的某个属性 */
div[title]{
color: red;
}
/* 确切的等于 */
input[type="text"]{
background: pink;
}
/* 某个属性含有某个值 */
input[type*="e"]{
background: red;
}
/* 某个属性以什么开始 */
input[type^="e"]{
background: green;
}
/* 某个属性以什么结束 */
input[type$="rl"]{
background: blue;
}
/* 表示下一个标签 */
.msg + {
color: red;
}
/* 属性名称等于某个值 */
[title="这是一个标题"]{
color: yellow;
}
</style>
</head>
<body>
<div title="one">这是一个div</div>
<p class="two">这是一个段落</p>
<input type="text" id="" class="" value="张三">
<input type="url" id="" class="" value="李四">
<input type="email" id="" class="" value="王五">
<div class="msg">这是第二个div</div>
<div title="这是一个标题">这是第三个div</div>
<p id="msg1">这是第二个段落</p>
</body>

效果如下：

4.伪类选择器：

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，使用的是冒号:表示的

link	超链接点击之前的样式
visited	链接被访问之后
hover	悬停，鼠标放到标签上的样式
active	被激活的时候，鼠标点击的时候，但是不松手的时候
focus	某个标签获得焦点的时候

<style type="text/css">
/* 让超链接点击之前是红色 */
a:link{
color: red;
}
/* 让超链接点击之后是绿色 */
a:visited{
color: green;
}
/* 让鼠标悬停的时，放到标签上变成粉色 */
a:hover{
color: pink;
}
/* 让鼠标点击链接不松手的时候橙色 */
a:active{
color: orange;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点击我</a>
</body>

超链接的顺序是一定的，不可以改变，他们的顺序 :link :visited :hover :active