css的选择器能够快速获取到相对应的标签，其中最为常用的是id、class、标签、以及伪类选择器
1.全部选择器：在生成html文档之后，html文档会有自动生成的margin和padding，这时候就需要用到全部选择器‘*’去除；
2.标签选择器：通过标签元素进行选择，可多选；
3.层级选择器：也叫后代选择器，选择该标签元素后代中所有的标签元素；
4.id选择器：通过设置id属性进行选择，选择方式‘#id名’，如果同时设置两个id名，只会选择前面的一个；
5.class选择器：通过设置class属性进行选择，选择方式‘.class名’，可多选；
6.属性选择器：对当前标签元素下的属性进行css样式设置时用到，最常见的地方如input[type=""]；
7.群组选择器：同时进行多个样式修改，每个选择器用“,”隔开；
8.相邻选择器：修改当前选择器后面的第一个元素的css样式时用到，设置方式是“当前选择器 + * ”；
9.兄弟选择器：修改当前选择器并且是同一级别后面的所有元素的css样式，设置方式是“当前选择器 ~ * ”；
10.伪类子元素选择器：
first-child 修改当前元素下第一个子元素
last-child 修改当前元素下最后一个子元素
nth-child(i) 修改当前元素下任意一个元素，i从零开始
nth-last-child(i) 修改当前元素下从后往前数的任意一个元素，i从零开始
11.伪类类型选择器：
first-of-type 修改当前第一个元素
last-of-type 修改当前最后一个元素
nth-of-type(i) 修改当前任意一个元素，i可以为任何值
enabled 修改表单中处于激活状态元素的css样式
checked + * 修改当前选中按钮对应的文字时用到
focus 当前表单被选中触发
hover 鼠标经过时触发
invalid 当表单输入的内容与type不符时启用，常用在错误提醒时
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常用选择器</title>
<style>
/*全部选择器*/
* {
margin: 0;
padding: 0;
}
/*标签选择器*/
ul {
list-style: none;
border: solid lightblue 2px;
width: 550px;
height: 50px;
}
/*层级选择器*/
ul li {
float: left;
width: 40px;
height: 40px;
background-color: aquamarine;
border-radius: 50%;
margin: 5px;
line-height: 40px;
text-align: center;
}
/*id选择器*/
#bg-blue {
background-color: lightblue-;
}
/*class选择器*/
.bg-yellow {
background-color: yellow;
}
/*属性选择器*/
li[id="bg-blue"] {
border: solid red 1px;
}
/*群组选择器*/
#bg-blue,.bg-yellow {
border: double black 2px;
}
/*相邻选择器*/
.bg-yellow + * {
background-color:blanchedalmond ;
}
/*兄弟选择器*/
.bg-yellow ~ * {
background-color: blu-eviolet;
}
/*伪类：子元素选择器*/
ul :first-child {
background-color: red ;
}
ul :last-child {
background-color: blue ;
}
ul :nth-child(odd) {
background-color: lightpink;
}
ul :nth-last-child(3) {
background-color: cornflowerblue;
}
/*伪类：类型选择器*/
ul li:last-of-type {
background-color: darkred;
}
ul li:first-of-type {
background-color: blueviolet;
}
/*选中每个div下的第二个元素*/
div :nth-child(2) {
background-color: aquamarine;
}
p:nth-of-type(2) {
background-color: crimson;
}
form :enabled {
background-color: bisque;
}
form :checked + * {
color: red;
}
form :focus {
background-color: aquamarine;
}
button:hover {
background-color: black;
color: white;
width: 50px;
height: 30px;
}
form :invalid {
color: red
}
</style>
</head>
<body>
<ul>
<li id="bg-blue">1</li>
<li class="bg-yellow">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div>
<p>html</p>
<li>css</li>
<p>javascript</p>
</div>
<div>
<p>php</p>
<li>python</li>
</div>
<form action="">
<label for="email">email:</label>
<input type="email" id="email">
<br>
<label for="password">password:</label>
<input type="password" id="password">
<br>
<input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
<input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>
<br>
<button>登陆</button>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
