首页 > 代码库 > CSS基础-选择器
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="http://www.mamicode.com/样式表的地址"/>
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="http://www.mamicode.com/#" 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> ③
注意:
①两个兄弟元素间用加号+或波浪号~连接
②加号+只能选中后面相邻的一个元素,波浪号可以选中后面所有元素
CSS基础-选择器