css样式连接与选择器
作为一名后端开发工程师，也需要掌握一些基本的前端语音，CSS中一些基本的语法也要能够读懂，明白其作用。整理了一些CSS最基本的功能语法和知识点如下
(1)CSS样式的连接
样式：修饰页面/标签
样式的效果为就近原则：当内联样式，内部样式块对象，外部样式表同时作用于同一个标签时，谁离标签近就显示谁的效果
内联样式：内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性
示例代码：
<p style="color:#f00">这一行的字体颜色将显示为红色</p>
内部样式块对象：在HTML文档的head标记里插入一个style块对象。
示例代码：
<style>
body{background:#fff;color:#000;}
p{font-size:14px;}
</style>
外部样式表：先建立外部样式表文件*.css，然后使用HTML的link对象。
①，import引用
示例代码：
<head>
<meta charset="UTF-8">
<title>CSS案例</title>
<!--如何将CSS文件引用到HTML中-->
<style>
@import url("css/TestDemo.css");
</style>
</head>
②，link引用
示例代码：
<link rel="stylesheet" href="*.css" />
(2)基本选择器
注意：选择器优先级，内联》ID选择器》伪类=属性选择器=类选择器》元素选择器【p】》通用选择器(*)》继承的样式
①标签选择器
②类选择器
③id选择器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--标签选择器：用标签作为样式选择器
类选择器：用类作为样式选择器，以.开头，后面写类选择器的名称
注意：文件的名称和类的名称不要以数字开头
id选择器：用id作为样式选择器，以#开头，后面写id选择器的名称
-->
<style>
/*标签选择器*/
p{
color: blue;
}
/*类选择器*/
.text{
color: yellow;
}
/*id选择器*/
#text2{
color: pink;
}
</style>
</head>
<body>
<p>日照香炉生紫烟</p>
<p class="text">遥看瀑布挂前川</p>
<p id="text2">飞流直下三千尺</p>
<p>疑是银河落九天</p>
</body>
</html>
id选择器有些地方只能用一次，有些地方可以多次使用(不建议多个标签使用同一个id)。
尽可能的用class，除非极特殊的情况可以用id
(3)高级选择器
1，层级选择器
包括：后代选择器，子选择器，相邻兄弟选择器(很少用)，通用兄弟选择器(很少用)
①后代选择器：E F 选择E元素后的子类元素F(子类不仅包括直接子类，还有间接子类)
示例代码：
/*后代选择器*/
body p{
background: orange;
}
②子选择器：E>F 选择E元素后的子类元素F(仅仅是直接子类)
示例代码：
/*子代选择器*/
body>p{
background: orange;
}
③相邻兄弟选择器：E+F 选择紧跟在E元素后面的F元素，它们有一个相同的父级元素，即E,F同级，且F紧跟着E后面
示例代码：
/*相邻兄弟选择器*/
.active+p{
background: orange;
}
④通用兄弟选择器：
示例代码：E~F 选择E元素后面的所有兄弟元素F，它们有一个相同的父级元素，且所有F在E后面
/*通用兄弟选择器*/
.active~p{
background: orange;
}
2，结构伪类选择器
注意：p:nth-child(n)，n可以换成关于n的表达式，n会=0，1，2，3… 如p:nth-child(2n-1)，即可以选择所有奇数的子类
E F：first-child
E F：last-child
E F：nth-child E的子类中，第n个元素，且这个元素是F，那么生效
E F：first-of-type
E F：last-of-type
E F：nth-of-type E的子类中，第n个F元素生效
示例代码：
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #0000FF;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #8A2BE2;
}
/*body下面的第2个p元素*/
p:nth-child(2){
background: red;
}
/*body下面的第1个p元素*/
p:nth-child(1){
background: #DAA520;
}
p:nth-of-type(3){
background: #FF0000;
}
</style>
3，属性选择器
注意：属性选择器也有优先级，E[attr=val]比E[attr^=val]高
① E[attr] 用来选择有某个属性的元素，无论属性值是什么。
注意：可以设置同时有多个属性时，才会生效。 E[attr1][attr2]
示例代码：
/*存在id属性的a标签*/
a[id] {
background: yellow;
}
②E[attr=val] 用来选择有某个属性，且属性值为设置的值的元素
示例代码:
a[id=first]{
background: #FF0000;
}
③E[attr^=val] 用来选择有某个属性，且属性值以设置的值开头的元素
示例代码：
a[class^=links]{
background:aquamarine;
}
④E[attr$=val] 用来选择有某个属性，且属性值以设置的值结尾的元素
示例代码：
a[class$=links]{
background:aquamarine;
}
⑤E[attr=val]* 用来选择有某个属性，且属性值中包含设置的值的元素
示例代码：
a[class*=links]{
background:aquamarine;
}
4，交集，并集选择器
①交集选择器(一般标签名在前，类名在后)：E.F 选择E,F为同一个标签的不同属性，如E是标签名，F是类名
示例代码:
/*交集选择器*/
p.active{ //.active.p or p..active 都不行
background: orange;
}
......
<p class="active">1</p>
②并集选择器: E,F 选择E元素或者F元素
示例代码：
/*并集选择器*/
p,.active{
background: orange;
}
......
<p>1</p>
<h1 class="active">2</h1>
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
