CSS基础-选择器
CSS
CCS是层叠样式表（Cascading Style Sheets）的缩写
2.1 CSS引入方式
-
内联样式表：卸载标签的开始标记中，其作用范围仅限当前元素
<h1 style="color:red">红色标题</h1>2.内部样式表：写在网页的
<head>标签内，，写在<title>标签后，用<style>标签包含，其作用范围仅限当前网页<style> h1{ colo:red } </style> -
外部样式表：写在网页的
<head>标签内，，写在<title>标签后，使用<link>标记引入代码，引入的是一个外部样式表（新建一个Stylesheet.css文件，用于写样式）的文件链接<link rel="styelsheet" href="样式表的地址"/>
2.2层叠
层叠次序：
1. 浏览器缺省设置（最低优先权）
2. 外部样式表
3. 内部样式表(2.3优先权相等，取决于两个的位置，后面的会覆盖前面的)
4. 内联样式 （最低优先权）
2.3 CSS基础语法规则
CSS规则由选择器和声明（一条或多条）两部分组成
选择器{<br>
声明1;<br>
声明2;<br>
...<br>
声明n;<br>
}
例：
p{
color:red;
}
注意：
①选择器：通常是需要改变样式的HTML元素
②每条声明有一个属性和一个属性值组成，每条声明由分号;结束
常用相对长度单位有：px,%,em,rem（em,rem多用于手机页面）
2.4 选择器
2.4.1 选择器分类
1.元素选择器
通常是某个HTML元素，比如p,h1,em,a甚至可以是html本身
2. 类选择器
在使用类选择器之前，需修改具体的文档标记，以便类选择器正常工作
<p class="text">示例一</p>
<h1 class="text">示例二</h1>
-
同一个class名可应用在多个HTML标签上
.text{ font-size:10px; } <p><h1>字体均变为10px -
类选择器也可以结合元素选择器使用
p.text{color:blue}（注意p与.与text间不能有空格） 只将<p>颜色变为蓝色 -
一个元素可以有多个类选择器
<p class="text text2"></p> （text与text2间用空格隔开）
3. ID选择器
#into{color:red;}
<p id="into">段落</p>
类似于类选择器，有一定区别：
①同一个名字的ID选择器在同一个HTML文档中，只能使用一次
②一个元素只能有一个ID选择器
4. 属性选择器
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器
例:希望给包含title属性的所有元素添加宽度为1px的实线红色边框，可以写作：
[title]{border:1px solid red}
<a href="#" title="a">点击</a>
<img sre="" title="logo"/>
也可以只对包含title属性的a标签添加样式，写作
a[title]{border:1px solid red}
5. 伪类选择器：
结构：选择器：伪类选择器{属性：值}
1. 锚伪类选择器：
a:link{color: } 未访问的链接
a:visited{color: } 已访问的链接
a:hover{color: } 鼠标移动到链接上
a:active{color: } 选中的链接（鼠标点中的时候）
注意：四个效果均实现需，a:hover必须在a:linka和a:visited之后，a:active必须在a:hover之后
2. ：focus伪类选择器：在元素获得焦点时向元素添加样式
input:focus{
background-color:yellow;
}
<input type="text">
效果：鼠标点击输入框时，输入框背景变为黄色
应用于有焦点的元素，除了输入框外，a标签也有焦点
3. :first-child伪类选择器：选择元素的第一个子元素
例：p:first-child{color:red;}
<div>
<p>第一个p元素</p>
<p>第二个p元素</p>
</div>
"第一个p元素变红"
4.:last-child伪类选择器：选择元素的最后一个子元素
5. :nth-child(n)伪类选择器：选择元素的任意一个子元素，n为数字
6. 伪元素选择器
结构：选择器：伪元素{属性：值}
1. :firsr-line伪元素选择器：向文本的首行设置样式
p:first-line{color:red}
效果：<p>第一行字符变为红色，且变红数量随窗口大小而改变
2.:first-letter伪元素选择器：向文本的第一个字符设置样式
注意：：first-line和：first-letter只能用于块元素
3.:before伪元素选择器：在元素之前添加内容
p:before{
content:"";
}
注意：content必须有
4.:after伪元素选择器：在元素之后添加内容
7. 选择器分组
-
让多个不同的元素拥有相同的属性
例：h2,p{color:red;}每个元素间用逗号连接，不论什么选择器都可以
-
通配选择器（是一个*）：把页面所有元素分在一组，对所有元素都有效，可以和任何元素匹配
*{color：red;}
8. 包含选择器
也叫“后代选择器”，可以选择作为某元素后代的元素
例：div p{color:red;}
<div>
<p>这是一个p标签</p>
</div>
效果：只有<div>里的<p>标签变为红色
注意：
①父元素和之元素之间用一个空格隔开
②两个元素间的层次建个可以使无限的，只要在父元素里均可以被选中
9. 子元素选择器
只能选中子元素
例：div>span{color:red;}
<div>
<p>
<span>这是一个span标签</span>
</p>
<span>这也是一个span标签</span>
</div>
效果：只有“这也是一个span标签”变红
注意：
①父元素和子元素之间用>隔开
②只会选中父元素之后的子元素，不会选中子元素之后的子元素
10. 兄弟选择器
div+p{background:red;}//后面相邻的一个<p>即②变红
div~p{background:red;}//后面的所有<p>，即②③变红
<div>我是第一个</div> ①
<div>我是第一个</div> ②
<div>我是第一个</div> ③
注意：
①两个兄弟元素间用加号+或波浪号~连接
②加号+只能选中后面相邻的一个元素，波浪号可以选中后面所有元素
