web/css_sduty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(css): 新增选择器

Browse Source 
1、伪类选择器
2、伪元素选择器
3、选择器优先级
This commit is contained in:
zhuyijun 2024-08-25 14:09:40 +08:00
parent e8b663df48
commit 96aa6f59ba
11 changed files with 283 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
02_样式表的优先级/index.css → 02_CSS样式表的优先级/index.css
View File

0
02_样式表的优先级/优先级.html → 02_CSS样式表的优先级/优先级.html
View File

0
04_代码风格/代码风格.html → 04_CSS代码风格/代码风格.html
View File

2
06_CSS复合选择器/10_伪类选择器_结构伪类3.html → 06_CSS复合选择器/11_伪类选择器_结构伪类3 copy.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10_伪类选择器_结构伪类3</title>
<title>11_伪类选择器_结构伪类3</title>
<style>
/* 选中div中倒数第n个的儿子元素（按照所有兄弟计算） --看结构1 */
/* div>p:nth-last-child(3) {

34
06_CSS复合选择器/12_伪类选择器_否定伪类 copy.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12_伪类选择器_否定伪类</title>
<style>
/* 选择的是div的儿子p元素，但是排除类名为fail的元素 */
/* div>p:not(.fail) {
color: red;
} */
/* 选择的是div的儿子p元素，但是要排除title属性以“你要加油”开头的*/
/* div>p:not([title^="你要加油"]) {
color: red;
} */
div>p:not(:first-child) {
color: red;
}
</style>
</head>
<body>
<div>
<p>张三: 98分</p>
<p>李四: 88分</p>
<p>王五: 78分</p>
<p>赵六: 68分</p>
<p class="fail" title="你要加油啊! 孙七">孙七: 58分</p>
<p class="fail" title="你要加油啊! 老八">老八: 48分</p>
</div>
</body>
</html>

37
06_CSS复合选择器/13_伪类选择器_UI伪类 copy.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13_伪类选择器_UI伪类</title>
<style>
/* 选择的是勾选的复选框或单选框按钮 */
input:checked {
height: 100px;
width: 100px;
}
/* 选择的是被禁用的input元素 */
input:disabled {
background-color: gray;
}
/* 选择的是可以的input元素 */
input:enabled {
background-color: green;
}
</style>
</head>
<body>
<div>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
</div>
</body>
</html>

41
06_CSS复合选择器/14_伪类选择器_目标伪类 copy.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14_伪类选择器_目标伪类</title>
<style>
div {
background-color: gray;
height: 300px;
}
div:target {
background-color: green;
}
</style>
</head>
<body>
<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>
<a href="#four">去看第4个</a>
<a href="#five">去看第5个</a>
<a href="#six">去看第6个</a>
<div id="one">第1个</div>
<br>
<div id="two">第2个</div>
<br>
<div id="three">第3个</div>
<br>
<div id="four">第4个</div>
<br>
<div id="five">第5个</div>
<br>
<div id="six">第6个</div>
<br>
</body>
</html>

27
06_CSS复合选择器/15_伪类选择器_语言伪类.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15_伪类选择器_语言伪类</title>
<style>
div:lang(en) {
color: red;
}
div:lang(zh-CN) {
color: green;
}
</style>
</head>
<body>
<div>博客</div>
<div lang="en">blog</div>
<p>前端</p>
<span>你好</span>
</body>
</html>

59
06_CSS复合选择器/16_伪元数选择器.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>16_伪元数选择器</title>
<style>
/* 什么是伪元数？- 像元素但不是元素（element），是元素中的一些特殊位置 */
/* 选中的是div中的第一个文字 */
div::first-letter {
color: red;
font-size: 20px;
}
/* 选中的是div中第一行的文字 */
div::first-line {
background-color: yellow;
}
div::selection {
background-color: green;
color: orange;
}
/* 选中的是input元素中的提示文字 */
input::placeholder {
color: skyblue;
}
/* 选中的是p元素最开始的位置，随后创建一个子元素 */
p::before {
content: "￥";
}
/* 选中的是p元素最后的位置，随后创建一个子元素 */
p::after {
content: ".00";
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore deleniti laboriosam quisquam sunt suscipit
obcaecati cumque quod, mollitia, voluptatem dolorum cum necessitatibus culpa recusandae atque magni maxime.
Quaerat sunt labore debitis dolore dolores velit voluptatem, harum tempora accusamus ducimus illo deserunt iure
iusto? Tenetur velit corrupti, vel eius dolore totam ut ad earum repudiandae, aperiam est. Fuga sapiente
necessitatibus doloremque!</div>
<input type="text" placeholder="请输入你的用户名">
<p>700</p>
<p>700</p>
<p>700</p>
<p>700</p>
<p>700</p>
</body>
</html>

37
07_CSS选择器优先级/01_选择器优先级_简单 copy.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器优先级_简单</title>
<style>
/* 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 统配选择器 */
#zyjblogs {
color: skyblue;
}
h2 {
color: orange;
}
.slogan {
color: green;
}
h2 {
color: red;
}
* {
color: purple;
font-size: 50px;
}
</style>
</head>
<body>
<h2 class="slogan" id="zyjblogs">让天下没有难学的技术</h2>
</body>
</html>

47
07_CSS选择器优先级/02_选择器优先级_详细.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_选择器优先级_详细</title>
<style>
/**
格式: (a,b,c)
a: ID选择器
b: 类、伪类、属性选择器的个数
c: 元素、伪元素 选择器的个数
*/
#zyjblogs {
color: orange;
}
.container span.slogan {
color: red;
}
div>p>span:nth-child(1) {
color: green;
}
/* div>p>span:first-child {
color: blue;
} */
.slogan {
color: pink !important;
}
</style>
</head>
<body>
<div class="container">
<p>
<span id="zyjblogs" class="slogan" style="color: blue;">让天下没有难学的技术！</span>
<span>欢迎来学习css</span>
</p>
</div>
</body>
</html>