第六章 选择器——确定样式的作用范围
1.元素选择器-div
元素选择器通过元素名来选择作用范围
例子:
p{ font-size: 200%; /*将字体放大一倍*/}
2.类选择器-.class
元素选择器可以很方便的选中页面中的对应元素,但其选择范围太大,容易误伤到其他元素,这时就可以加上一个属性为class="solid"的来选择某些元素
除此之外类选择器可以和元素选择器一起使用,这就是层叠样式的好处
例子:
<style>
p{ background:lightgray; /*背景色:亮灰色*/ }
.solid{ border: 2px solid #000; }
.dashed{ border: 2px dashed black; }
</style>
<p class="solid">我是第一段</p>
<p class="solid">我是第二段</p>
<p class="dashed">我是第三段</p>
<p class="dashed">我是第四段</p>
class中也不是只能定义一个类,它可以包含多个类,且与类的顺序无关,也就是说class=“a b”和class =“b a”是一样的
3.ID选择器-#id
有时我们需要再也缪按中精准选择一个元素,而无论是元素选择器还是类选择器,都是为批量选择而设计的,显然并不适合精准选择,这时ID选择器的应用就出现了。
使用ID选择器需要注意:
- ID选择器用于精确选择,一个HTML页面不允许出现相同的id
- 一个元素只能拥有一个id,比如id=“a b”这是不被允许的
- ID的选择器的权重要比元素选择器和类选择器权重高得多
- ID选择器中的ID大小写时敏感的,所以要保证大小写一致
4.属性选择器——[prop=value]
属性选择器的几大功能:
- 1.属性选择器*=... 可以用来判断属性值是否包含了某些字符,例子:[href*="wiki"]
- 2.属性选择器^=... 可以选中所有属性以某段字符开始的元素
- 3.属性选择器$=... 可以选中所有属性值以某段字符结束的元素
- 4.~=只在意被空格分割的属性值
- 5.|=只在意被-分割的属性值
5.全局选择器——*
*{ border: 2px solid #000; } /*所有可见元素全都会被选中 */ body *{ } /*选中body下面所有后代元素 */
style中的写法要明确
<style> .a代表指向class为a的标签 //这是使用类选择器的语法
a 代表<a>标签元素 //这是使用元素选择器的语法
#c代表id为'c'的元素且id唯一 //这是使用ID选择器的语法
[href]{ /*选中所有拥有href属性的元素 */ } [href="http://......"]{ /*选中href属性等于'http://.......'的元素*/ }
*{ }//这是全局选择器的语法
body *{ }
</style>
选择器组合使用:
<style>
a,p,div{color:gray;} //元素选择器批量设置相同样式
</style>
<style>
.highlight.bordered{ font-size: 200%; //用这种方式来同时选中类选择器中多个类的元素 }
</style>
<p class="highlight bordered">我是第三段</p>
后代选择
<style>
footer span{ border: 2px solid #000; //通过这种方式来选中<footer>中的<span>元素 }
</style>
<footer>
<span>C</span>
<span>D</span>
</footer>
子选择
<div id="grandpa">
我是爷爷
<div>
<div>
我是爸爸
</div>
<div>
我是儿子
</div>
</div>
<div>
<div>
我是爸爸
</div>
<div>
我是儿子
</div>
</div>
</div>
<style> #grandpa >
div{ border: 2px solid #000; //使用这种方式来选中id 下面的<div>元素 }
</style>
相邻兄弟选择
<span id="me">我</span>
<span>弟弟</span>
<span>弟弟</span>
<style>
#me + span {
border: 2px solid #000; //使用这种方式可以选中id为me下面的第一个<span>元素
}
</style>
通用兄弟选择
<span id="me">我</span>
<span>弟弟</span>
<span>弟弟</span>
<style>
#me ~ span {
border: 2px solid #000; //使用这种方式可以选中id为me下面的所有的<span>元素
}
</style>
伪类:伪类选择器,在已有元素上检测状态并动态地添加样式
语法:某元素:某状态{}
在光标悬停时设置样式 a:hover{ }
:active 激活 :focus 聚焦 :checked 勾选 :disabled 禁用 :enabled 可用 :empty 空值 //伪类有很多种,这里只写其中一小部分
伪元素:简化书写,方便快捷,便于维护
语法:某元素::某状态{}
::before 前缀元素
::after 后缀元素
::first-line 首行
::first-letter 首字
::placeholder 空白占位
::selection 选择范围