前端基础：CSS样式选择器
前端基础：CSS样式选择器
CSS概述
CSS是Cascading Style Sheets的简称，中文意思是：层叠样式表，对html标签的渲染和布局。CSS规则由两个主要的部分组成：1.选择器；2.一条或多条声明；如下所示：
selector {
property: value;
property: value;
property: value;
property: value;
...
}
例如：
h1 {color:red; font-size: 14px;}
CSS的四种使用方式
1.行内式
行内式是在标签的style属性中设定CSS样式，这种方式没有体现出CSS的优势，不推荐使用：
<body>
<p>Paragraph One</p>
<p style="background: red">Paragraph Two</p>
<!--第一种：行内式-->
<p style="color: crimson;">Paragraph Three</p>
</body>
2.内嵌式
内嵌式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签中，格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第二种方式：内嵌式-->
<style>
Paragraph{
color: black;
background-color: burlywood;
}
</style>
</head>
3.链接式
创建common.css文件，专门用来存放样式，如下所示：
在对应的html文件中，将common.css文件引入即可：
4.导入式
将独立的.css文件应用到html文件中，导入式使用CSS规则引入外部CSS文件，<style>标签也是写在<head>标签中，其语法为：
注意：：导入式会在整个网页加载完后才会加载CSS文件，因此会产生一个问题，如果网页比较大则会先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式的一个固有缺陷，使用链接式时与导入式不同的是，它会以网页文件主体加载前加载CSS文件，因此显示出来的网页从一开始就是携带样式效果的，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点，推荐大家使用链接式。
注意：标签的嵌套规则
- 1.块级标签可以包含行内标签或者某些块级标签，但行内标签不能包含块级标签，只能包含其它行内标签；
- 2.有几个特殊的块级标签只能包含行内标签，不能包含块级标签，如：h1-h6、p标签、dt；
- 3.li内可以包含div；块级标签与块级标签并列、行内标签与行内标签并列；
CSS选择器
1.选择器基础
选择器指明了"{}"中的样式的作用对象，也就是样式作用于网页中的元素：
- 1.通用元素选择器*：所有的标签都被选中；
- 2.标签选择器：匹配所有p标签的样式p {color: red}；
- 3.id选择器：匹配指定id的标签 #p {color:red}；
- 4.class选择器：匹配指定class的标签 .c1 {color:red}，可以多选div.c1 {color:red}；
实例如下：可以对块级标签设置长度和高度，不能对行内标签设置长度和高度(它只会适应内容的大小)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 标签选择器，所有div标签都被选中 */
div{
font-family: 华文楷体;
}
/* id选择器：给id=c2的设置样式，id一般不常用(因为id不能重复) */
#n1{
background-color: blueviolet;
font-size: medium;
}
/* class选择器：给class=c1的设置样式 */
.c1{
color: red;
}
/* 或者 */
p.c1{
color: blueviolet;
}
/* 通用元素选择器 */
*{
background-color: burlywood;
font-size: large;
}
/* 注意CSS中的注释与html中的不同 */
</style>
</head>
<body>
<div id="n2">
<div id="n1">
<p>Hello World!</p>
<div class="c1">Hello CSS!</div>
</div>
<p>好好学习！</p>
</div>
<span>天天向上！</span>
<p>paragraph</p>
<div class="c1">
<p class="c2">世界，你好！</p>
<h5>我是h5标签！</h5>
</div>
</body>
</html>
2.组合选择器
1.后代选择器 (不分层级，只让p标签变色) .c2 p{color:red}
2.子代选择器（只在儿子层找） .c2>p{color:red}
3.多元素选择器：同时匹配所有指定的元素 .div,p{color:red}
或者
.c2 .c3,.c2~.c3{
color: red;
background-color: green;
font-size: 15px;
}
不常用
3.毗邻选择器（紧挨着，找相邻的,只找下面的，不找上面的）.c2+p{color:red}
4.兄弟选择器：同一级别的，离得很近的.c2~p{color:red}
5.多元素选择器： .c2 .c3,.c2~ .c3{ color:red }
说明：
.a1 .a2, .a1~p{
color: blue;
font-size: 15px;
background-color: red;
}
#下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用
.a1 .a2{
color: blue;
font-size: 15px;
background-color: red;
}
.a1~p{
color: blue;
font-size: 15px;
background-color: red;
}
如下实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
/* 后代选择器(部分层级)：选择所有类为c1下面的p标签 */
.c1 p{
background-color: black;
}
/* 子代选择器 */
.c2>p{
color: crimson;
}
/* 毗邻选择器 */
.c3+p{
background-color: aquamarine;
}
/* 兄弟选择器：同一级别，离得很近 */
.c3~p{
background-color: blueviolet;
}
/* 多元素选择器：同时匹配所有指定的元素 */
.div,p{
background-color: red;
}
.c1 .c2,a1~p{
color: blue;
font-size: 20px;
background-color: green;
}
/* 下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用 */
/*.a1 .a2{*/
/*color: blue;*/
/*font-size: 15px;*/
/*background-color: red;*/
/*}*/
/*.a1~p{*/
/*color: blue;*/
/*font-size: 15px;*/
/*background-color: red;*/
/*}*/
</style>
</head>
<body>
<p>Welcome to the world of css!</p>
<div class="c1">
<div class="c2">
<p id="s1">生活不止有眼前的苟且</p>
<div class="c2">
<p>还有诗和远方</p>
</div>
</div>
<p>好好学习，天天向上！</p>
<h1 class="c3">Class One!</h1>
<h2>Class Two!</h2>
</div>
<div class="c1">
<em>牛儿还在山坡吃草</em>
<div class="c2">
<p>放牛的却不知道哪儿去了</p>
<b>王二小®</b>
</div>
</div>
<h5>民族英雄</h5>
<p>英雄</p>
</body>
</html>
3.属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
比如“[cheacked]”，以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
common.css
/*1.匹配所有hello属性的，并且只是在div标签的*/
div[hello]{
color: yellowgreen;
}
/*2.匹配所有hello=world的并且只是在div标签的*/
div[hello=world]{
color: aqua;
}
/*上面的优先级和下面的优先级本应该是一样的*/
/*应该显示下面的，但是，由于上面查找的范围
比下面的范围广，所以它会把上面的也显示了。*/
/*3.匹配所有属性为hello，并且具有多个空格分割的值，*/
/*其中一个只等于world的*/
div[hello~=world]{
color: blueviolet;
}
/*4.匹配属性值以指定值开头的每个元素，
并且是在div标签里的*/
div[hello^=w]{
background-color: aquamarine;
}
div[egon^=w]{
background-color: aquamarine;
}
/*5.匹配属性值以指定值结尾的每个元素 */
div[eric$=a]{
background-color: blueviolet;
}
/*6.匹配属性值中包含指定值的每个元素 */
div[eric*=a]{
background-color: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<link rel="stylesheet" href="common.css">
</head>
<body>
<div>
<div hello="world">世界，你好</div>
<div hello="world">你好！</div>
<div eric="world">Eric</div>
<div hello="practice">你是谁？</div>
</div>
</body>
</html>
4.伪类
anchor伪类：专用于控制链接的显示效果
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
如下实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
/* 没访问之前 */
a:link{
color: blue;
}
/* 鼠标放在链接上的状态 */
a:hover{
color: chartreuse;
}
/* 访问过后 */
a:visited{
color: red;
}
/* 鼠标点击的时候 */
a:active{
color: aqua;
}
/* 在p标签属性为c2的后面加上内容 */
p.c2:after{
content: 'Hello world!';
color: chartreuse;
}
/* 在所有的p标签的前面加上内容 */
p:before{
content: '我是谁？';
color: chartreuse;
}
span{
background-color: aqua;
width: 100px;
height: 50px;
/* span标签是行内标签，对其设置高度和长度不会起作用；它是
跟着文本内容进行大小变化*/
}
</style>
</head>
<body>
<p>我爱北京天安门！</p>
<p class="c2">我爱北京天安门！</p>
<p class="c3">我爱北京天安门！</p>
<a href="" id="c1">北京天安门</a>
<span>天安门</span>
</body>
</html>
before after伪类
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例：p:before{content:"hello";color:red;display: block;}
5.CSS优先级和继承
- CSS的继承：继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如：一个body定义了的颜色值也会应用到段落文本中；
body{color:red;} <p>Hello world</p>
这段文字都继承了由body{color:red;}样式定义的颜色，然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0：
p{color:green}
我们发现只需要给p加个颜色值就能覆盖掉它集成的样式颜色，由此可见：任何显示声明的规则都可以覆盖其继承的样式。此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限的，有些属性不能被继承，如：border、margin、padding、background等。
div {
border:1px solid #222
}
<div>Hello<p>world</p> </div>
- CSS的优先级：所谓优先级，即是指CSS样式在浏览器中被解析的先后顺序，样式表中的特殊性描述了不同规则的权重，它的基本规则是：
1.内联样式表的权重最高 style="- - - - - 1000"；
2.统计选择符中的id属性 #id - - - - - - - - 100；
3.统计选择符中的class属性 .class - - - - - - 10；
4.统计选择符中的html标签名 p - - - - - - - - -1；
按这些规则将数字串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到后的顺序逐位比较：
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。
2、有!important声明的规则高于一切。
3、如果!important声明冲突，则比较优先权。
4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
继承实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的继承</title>
<style>
/* 给body的所有内容加上样式 */
body{
color: crimson;
border: 2px solid;
border-color: aqua;
}
/* 子类有设置样式就用子类的样式，没有就继承父类的 */
p{
color: red;
}
#s2{
color: blue;
}
/* 不能被继承，它会用自己的边框，而不会用父类的边框 */
p{
border: 5px solid;
}
</style>
</head>
<body>
<div class="c1" id="s1">
<div class="c2" id="s2">
<div class="c3" id="s3">海上生明月</div>
<p>天涯共此时</p>
</div>
</div>
<p>举杯邀明月</p>
<p>对影成三人</p>
</body>
</html>
