html中有哪些选择器（HTML选择器和JS基础）
html中有哪些选择器（HTML选择器和JS基础）/*通用选择器 当前选择元素向下所有的兄弟元素 */ .active~p{ background: slateblue; } 123456结果图：通用选择器/*子代选择器 一代 儿子*/ body > p { background: yellow; } 1234结果图：相邻兄弟选择器.active p{ background: palegreen; } 123结果图：
今天学习了HTML的选择器和JavaScript的基础知识。
今日学习内容1、HTML选择器层次选择器
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
12345678910111213141516
后代选择器
/*
后代选择器
某个元素的后面 祖爷爷 爷爷 爸爸 你
*/
body p{
background: red;
}
1234567
结果图：
子代选择器
/*子代选择器 一代 儿子*/
body > p {
background: yellow;
}
1234
结果图：
相邻兄弟选择器
.active p{
background: palegreen;
}
123
结果图：
通用选择器
/*通用选择器
当前选择元素向下所有的兄弟元素
*/
.active~p{
background: slateblue;
}
123456
结果图：
/*
ul的最后一个子元素，不使用我们的class和id选择器
*/
ul li:last-child{
background: palegreen;
}
123456
/*ul的第一个子元素，不使用我们的class和id选择器*/
ul li:first-child{
background: red;
}
1234
/*
选中p1:定位父元素，选择当前的p的第一个选择
选择当前p元素的父级元素 选择父级元素的第一个，并且是当前元素才生效，顺序
*/
p:nth-child(2){
background: yellowgreen;
}
1234567
/*选择父元素下的p元素的第二个类型*/
p:nth-of-type(2){
background: red;
}
1234
/*鼠标悬浮颜色*/
h1:hover{
background: yellow;
}
1234属性选择器
<p class="demo">
<a href="https://www.baidu.com" class="link item first" id="first">1</a>
<a href="" class="link item active" id="test">2</a>
<a href="image/123.html" class="link item active">3</a>
<a href="image/123.png" class="link item">4</a>
<a href="image/123.jpg" class="link item">5</a>
<a href="adc" class="link item">6</a>
<a href="/a.jpg" class="link item">7</a>
<a href="abc.doc" class="link item">8</a>
<a href="abcd.doc" class="link item last">9</a>
</p>
<style>
.demo a{
float:left;
display: block;
height: 50px;
width: 50px;
border‐radius: 10px;
background: yellow;
text‐align: center;
color: red;
text‐decoration: none;
margin‐right: 5px;
font:bold 20px/50px Arial;
}
</style>
/*
属性选择器：属性名=属性值（正则表达式）
a[]{
}
*/
a[id]{
background: red;
}
a[id=first]{
background: yellowgreen;
}
/*
class中有link的元素的
*=:包含等于
=：绝对等于
*/
a[class*="link"]{
background: fuchsia;
}
/*选中href中的以https开头的元素*/
a[href^=https]{
background: slateblue;
}
/*选中href中的以png结尾的元素*/
a[href$=png]{
background: #4158D0;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
因为我是学习JAVA的，所有HTML的学习到这里就告一段落了，之后就靠我们自己从其他渠道获取HTML知识。
JavaScript
一、为啥美化网页：1.有效的传递页面的信息
2.美化页面，页面的漂亮，才能吸引用户
3.凸显主题
4.提高我们的用户的体验
重点突出的文字，使用span标起来:
结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
text-align:排班，居中
text-decoration
overline：上划线
line_through中划线
underline下划线
*/
h1{
color: red;
text-align: center;
}
.p1{
text-indent: 1em;
text-decoration: underline;
}
/*
行高和块高度一样，就可以上下居中
height:300px
line-height:300px
*/
.p2{
background: red;
height: 300px;
line-height: 300px;
}
</style>
</head>
<body>
<h1>文章</h1>
<p class="p1">
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
</p>
<p class="p2">
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一
个站点中的多个页面使用了同一套 CSS样式表，而某些页面中的某些元素想使用其他样式，就可以
针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，
在浏览器中看到的将是最后面设置的样式效果。
</p>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
效果图：
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮类的颜色*/
a:hover{
color: red;
font-size: 50px;
}
/*鼠标按住没有释放的颜色*/
a:active{
color: blue;
font-size: large;
}
/*
参数：
阴影的颜色
水平偏移
垂直偏移
阴影半径
*/
#price{
text-shadow: blue 10px 0px 10px;
}
</style>
123456789101112131415161718192021222324252627二、JS概念
JavaScript介绍：
Js这门语言主要是完成页面的数据验证，一次它运行在客户端，需要运行浏览器来解析执行我们的js代码，原来他的名字LiveScript，为了吸引更多的java程序员去使用，更名为javaScript
Js是弱类型，java是强类型。
特点：
1/交互性(它可以做的就是信息的动态交互)
2/安全性（不能直接访问本地磁盘）
3/跨平台（只要是可以解释js的浏览器都可以执行，和平台没关系）
什么是变量？变量就是存方法某些值的内存的命名。
Js的变量类型：
数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
Js中的特殊的值：
Undefined未定义：所有的js变量未赋予初始值的时候，默认都是Undefined
Null：空值
NaN：全称not a number 非数字 非数值
Js中的定义变量的格式：
Var 变量名;
var 变量名=值;
等号：==等于是简单的做字面值的比较
全等号：===除了比较字面值之外，还会比较两个变量的数据类型
逻辑运算：
且运算：&&
或运算：||
取反运算：！
在js当中，所有的变量都可以作为boolean的变量去使用
0，null，undefined，””（空串）都认为是false
&&且运算:
第一种情况：
当表达式全为真的时候，返回最后一个表达式的值
第二种情况：
在表达式中，有一个为假的时候，返回第一个为假的表达式的值
||或运算：
第一种情况：
当表达式全为假的时候，返回最后一个表达式的值
第二中情况：
只有一个表达式为真，就会返回第一个为真的表达式的值
并且&&和||都是有一个短路效果的，
当这个&&或者||有了结果了，后面的表达式就不再执行。
Js中的数组定义：
格式：
Var 数组名=[]; //空数组
Var 数组名=[1 ”abc” true]; //定义数组的同时给它赋值
原文链接：https://blog.csdn.net/lxt118518/article/details/109103351?utm_medium=distribute.pc_category.none-task-blog-hot-1.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-1.nonecase&request_id=
作者：巴黎最后的探戈舞步
