每天都把自己学习的内容分享给大家，大家是不是很感动呀？虽然我也是一个小白，不会用高深的语言描述html和css的具体功能，但还是希望大家一起学习，有所收获。当当当~~~，下面就步入正题了，大家做好笔记吆！
1.行内样式：style="声明1；声明2；"
2.内部样式表：在和head中加如<style></style>
3.外部样式表：<link href="style.css" rel="stylesheet" type="text/css" />
属性：rel="stylesheet"：使用外部样式表
type="text/css"：文件类型
优先级：行内>内部>外部（就近原则）
基本选择器：
标签选择器：标签名{声明1；}
类选择器：.类名（标签里class得值）{声明1；}
ID选择器：#+标签里id得值{声明1；}
优先级：ID选择器>类选择器>标签选择器
层次选择器：
选择器 类型 功能描述
E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子类选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
其实通俗的说，body相当于“爷爷”，下面有“父亲”和“父亲的兄弟姐妹”，此时“父亲”和“父亲的兄弟姐妹”相当于“爷爷”的子类，“我”是“父亲”的子类。且“父亲”和“父亲的兄弟姐妹”是同一级别的，他么属于通用兄弟。“父亲的兄弟姐妹”是“父亲”的相邻兄弟。“父亲”、“父亲的兄弟姐妹、”“我”及“我的兄弟姐妹”也是“爷爷”后代。其他选择器的理解和此类似。这样不知道有没有帮助到大家理解选择器。
结构伪类选择器：
选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F，
（n可以是1、2、3），关键字为even、odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
属性选择器：
选择器 功能描述
E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，
换句话说，字符串val与属性值中的任意位置相匹配
层次选择器的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<link href="1.css" type="text/css" rel="stylesheet">
<style>
p,ul{
border: solid 1px red;
}
/*后代选择器*/
/* body p{
background: red;
}*/
/*子选择器*/
/* body>p{
background: red;
}*/
/*相邻选择器*/
/* #first+p{
background: red;
}*/
/*通用选择器*/
#first~p{
background: red;
}
</style>
</head>
<body>
<p id="first">1</p>
<p>2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
</html>
不同的属性实现不同的效果，我们分别实现一下
1.后代选择器
body p{
background: red;
} /*后代选择器*/
后代选择器效果图
2.子选择器
body>p{
background: red;
}
/*子选择器*/
子选择器效果图
3.相邻选择器
#first+p{
background: red;
}
/*相邻选择器*/
相邻选择器效果图
4.通用选择器
#first~p{
background: red;
}/*通用选择器*/
通用选择器效果图
结构伪类选择器的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
li:first-child {
background-color: yellow;
}
/*第一个*/
li:last-child {
background-color: teal;
}
/*最后一个*/
li:nth-child(3) {
background-color: royalblue;
}
/*第三个，索引从1开始*/
/*li:nth-last-child(3) {
background-color: silver;
}*/
/*倒数第三个*/
/*li:nth-child(even) {
background-color: blueviolet;
}*/
/*偶数2、4、6*/
/*li:nth-last-child(even) {
background-color: darkorange;
}*/
/*倒数偶数1、3、5，即奇数*/
</style>
<body>
<ul>
<li>1</li>
<li>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>
</body>
<html/>
结构伪类选择器效果图
网友评论