温馨提示
接下来关于前端的学习全部以代码展示，其他内容还是叙述和代码结合，方便彼此的练习，不能只看不敲，我用的前端编译器是vscode，建议大家下载一个zeal文档离线查看器，大部分的语言的服务器都在国外，访问速度慢，国内的可能有数据更新不及时所以下载一个zeal想学什么下载了直接在本地就可以打开不仅提高自学能力也可以提高英语阅读水平
vscode里面有很多插件(中文插件等)以及自动补齐，快捷键等功能比其他前端编译器更加方便
zeal文档查看器，不用通过浏览器加载文档，直接将文档下载到本地阅读，学习语言必备的软件，方便你了解每一门语言，没事多看看，也可以增加自己对想学语言的理解
上述软件自行百度下载，如果不会，留言我发你们，坚持就会有收获，成效不是一朝一夕就看的见的，持之以恒才是王道
1、关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 为div的子元素span设置为字体颜色为红色
（为div直接包含的span标签设置为一个字体颜色）
子元素选择器
- 作用：选中父元素的指定子元素
- 语法：父元素 > 子元素
*/
/* div.box > span{
color: red;
div > span >span{
color:red;
}
} */
/* 后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先后代 */
/* div span{
color: red;
} */
/* 兄弟元素选择器
+作用：选择下一个兄弟,选择紧挨的下一个，如果挨着的不是则选不上
语法：前一个 + 下一个
~作用：选择下边的所有兄弟元素*/
p + span{
color:red
}
</style>
</head>
<body>
<!--
父元素
- 直接包含子元素的元素叫做父元素
子元素
- 直接被父元素包括的元素是子元素
祖先元素(有可能有很多)
- 直接或间接包含后代的元素叫做祖先元素
- 一个元素的父元素也是它的祖先元素
后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
兄弟元素
- 拥有相同元素的父元素
-->
<div class="box">
我是一个div元素
<p>我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div中的span元素</span>
</div>
<div>
<span>我是2号</span>
</div>
</body>
</html>
2、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* [属性名]选择含有指定属性的元素 */
/* [属性名=属性值]选择含有指定属性和属性值的元素 属性值不能用数字，否则无法找到
[属性名^=属性值]选择属性值以指定值开头的元素
[属性名$=属性值]选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有指定值的元素
*/
/* p[title] */
/* p[title=a] */
/* p[title^=a] */
/* p[title$=a] */
p[title*=a]
{
color: red;
}
</style>
</head>
<body>
<p title="a">何来人间惊鸿客</p>
<p title="ab">只是尘世一俗人</p>
<p title="3">最是人间留不住</p>
<p >朱颜辞镜花辞树</p>
</body>
</html>
3、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 将ul里的第一个li设置为红色 */
/* ul>li.first{
color: red;
} */
/* 为了自动选择第一个li标签就引出了伪类选择器
（不存在的类：比如第一个子元素、被点击的元素、鼠标移入的元素）
伪类的特点 以冒号：开头
:first-child:总可以确保找到第一个子元素
:last-child:总可以确保最后一个子元素被找到
所有的伪类都是根据所有的子元素进行排序,尤其是上述两种伪类使用的时候特别要注意
:nth-cjile():选中第n个元素，如果写n则表示全选，不写表示啥都不选
范围：1-n
2n表示 2、4、6等元素，even表示相同的意思
2n+1表示选中所有奇数项，odd表示相同的意思
*/
/*
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似,只不过他们是和同类型的元素排序
:not()否定伪类-将符合条件的元素从选择器中去除
*/
/* ul > li:first-child */
/* ul > li:last-child */
/* ul > li:nth-child(odd)
{
color: red;
} */
ul>li:not(:nth-child(3))
{
color: red;
}
</style>
</head>
<body>
<ul>
<span>one</span>
<li class="first">1</li>
<li>2</li>
<span>two</span>
<li>3</li>
<li>4</li>
<li>5</li>
<span>two</span>
</ul>
</body>
</html>
4、超链接的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* .red{
color: red;
} */
/*
:link 用来表示没访问过的链接(正常的链接)
:visited 用来表示访问过的链接
由于隐私的原因所以:visited只能修改链接的颜色,字体大小等都无法修改
*/
a:link{
font-size: 50px;
color: red;
}
a:visited{
/* font-size: 50px;没用 */
/* :hover 用来表示鼠标移入的状态 */
/* :active 用来表示鼠标点击只能写在所有的链接伪类的后面才会生效*/
color: orange;
}
a:hover{
color: red;
font-size: 50px;
}
a:active
{
color: yellowgreen;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">访问过的链接</a>
<br>
<br>
<!-- <a class="red" href="https:www.baidu123.com">没有访问过的链接</a> -->
<a href="https:www.hao123.com">没有访问过的链接</a>
</body>
</html>
5、伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 20px;
}
/* 首字母下沉的效果 */
/* span{
font-size: 50px;
} */
/* 伪元素表示页面中一些特殊的并不真实的存在元素(特殊的位置,比如首字母,特殊的一行) */
/* 伪元素使用双冒号开头::
::first-letter 表示第一个字母
:::first-line 表示第一行
::selection 表示选中的内容
::before 元素开始的位置
::after 表示元素的最后
q标签的短引用的""就是通过before和after加的
::before和::after必须结合content使用 content的内容是通过css加的,是选不中的*/
p::first-letter
{
font-size: 50px;
}
p::first-line
{
background-color: yellow;
}
p::selection
{
background-color: greenyellow;
}
div::after
{
content:'haha';
color: red;
}
div::before
{
content:'ss';
color: red;
}
</style>
</head>
<body>
<div>hello how are you</div>
<!-- <p>
<span>L</span>orem ipsum dolor sit amet consectetur adipisicing elit. Sed, quo quos mollitia necessitatibus facilis quis? Sit cupiditate fuga libero officia, porro sed incidunt, facilis reiciendis nesciunt delectus ullam autem quidem.
</p> -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, quo quos mollitia necessitatibus facilis quis? Sit cupiditate fuga libero officia, porro sed incidunt, facilis reiciendis nesciunt delectus ullam autem quidem.
</p>
</body>
</html>
3274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
