收藏
批改状态：未批改
老师批语：
1，标签选择器，权重最高，直接修改样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <ul> <p style="background-color: green">001</p> <li style="background-color: blueviolet">003</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
2，类选择器，同一个类统一样式管理，只对有类标签的内容进行样式约束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test{
background-color: blueviolet;
}
</style>
</head>
<body>
<ul>
<p class="test">001</p>
<li class="test">003</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3，id选择器，同一个页面内只能用一次id，对同一个id内所有元素进行样式约束，多元素公用要用类class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test1{
background-color: blueviolet;
}
</style>
</head>
<body>
<ul id="test1">
<p >001</p>
<li >003</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4，块+空格+标签，对于指定的块进行样式的约束：ul p【无序列表内p标签样式】 ul li【无序列表li标签样式】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul p{
background-color: blueviolet;
}
</style>
</head>
<body>
<ul >
<p >001</p>
<li >003</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{
background-color: blueviolet;
}
</style>
</head>
<body>
<ul >
<p >001</p>
<li >003</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5，正则属性选择器使用为块[特定值]，例如对无须表格内id为test的样式约束为ul[id="test"]{}【不能加空格，加空格是后代选择器】，如果选择器id筛选条件或其他条件为空，则只要标签内有id或其他属性的内容都会被约束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li[id="test"]{
background-color: green;
}
</style>
</head>
<body>
<ul >
<p >001</p>
<li id="test">003</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6，群组选择器可以理解为既满足xx条件又满足xx条件，基本格式是用“,”分隔开，比如#test,.test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test,.test1{
background-color: green;
}
</style>
</head>
<body>
<ul id="test">
<p class="test1" >001</p>
<li >003</li>
</ul>
<ul >
<p class="test1" >001</p>
<li >003</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
7，相邻选择器，顾名思义就是挨着的，用“+”进行选择，不能作用到内部，比如用#test类选择器，紧挨着的ul内部有p标签和li标签，如果用#test + p或#test + li是不起作用的，#test + ul才起作用。相邻ul也可以用*表示，表示任何相邻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test + ul{
background-color: green;
}
</style>
</head>
<body>
<ul id="test">
<p >001</p>
<li >003</li>
</ul>
<ul >
<p >001</p>
<li >003</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
8，兄弟选择器，用“~”表示，是兄弟就要一起浪么？测试效果为同级别内的其他元素样式进行约束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test{
background-color: lightyellow;
}
.test ~ *{
background-color: green;
}
</style>
</head>
<body>
<ul >
<p class="test">001</p>
<li >003</li>
<p >002</p>
<li >004</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
9，伪类选择器，块+空格冒号+first-child/last-child，第一个孩子（-。-）/老嘎达。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul :first-child{
background-color: lightcoral;
}
ul :last-child{
background-color: lightcoral;
}
</style>
</head>
<body>
<ul >
<p >001</p>
<li >003</li>
<p >002</p>
<li >004</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
10，孩子太多不好选肿么办呢？就用nth，后边加数字就是从头开始的第几个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul :nth-child(3){
background-color: lightcoral;
}
ul :nth-last-child(3){
background-color: lightcoral;
}
</style>
</head>
<body>
<ul >
<p >001</p>
<li >003</li>
<p >002</p>
<li >004</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
11，如果限定了类型，就要用类型+空格+类型+冒号+（first/last/nth-first/nth-last）-of-type则更为规范一些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul p:first-of-type{
background-color: lightcoral;
}
ul p:nth-last-of-type(1){
background-color: lightcoral;
}
</style>
</head>
<body>
<ul >
<p >001</p>
<li >003</li>
<p >002</p>
<li >004</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
