选择器
目录
Ⅰ、基础选择器:
1、标签选择器(元素选择器)
根据标签名来选中指定元素
语法格式:标签名 {属性: 属性值;}
把某一类全部标签选出
eg.
p{
color: red;
}
2、类选择器
class可重复使用,可利用class属性为元素分组
①.类名{属性: 属性值}
后面谁想用谁调用class类
口诀:样式点定义,结构类调用,一个或多个,开发最常用
eg.
.red {color: red;}
<div class="red">
②多类名
一个class里可写多个类名,用空格隔开
eg.
<div class="red abc"></div>
两个class,red和abc
3、id选择器
根据id的属性值选中一个元素
语法:#id名 {属性: 属性值;}
后面谁想用谁加id=“ xxx”
样式#定义,结构id调用,只能调用一次,别人不能调用
eg.
#pink {color: pink;}
<div id="pink">
4、通配符选择器
选中页面中所有元素
* {属性: 属性值;}
不需要调用,自动给所有元素使用样式
特殊情况才用
Ⅱ、复合选择器
1、交集选择器
选中同时符合多个条件的元素
语法:选择器1选择器2选择器n {样式声明;}
注意:
如果有元素选择器,必须使用元素选择器开头
2、并集选择器
同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器n{样式声明;}
注意:
①可选择多组标签,同时为他们定义相同样式
②英文逗号隔开
③任何形式的选择器都可作为并集选择器的一部分。
Ⅲ、关系选择器
1、后代元素选择器(包含选择器)
选中指定元素内的指定后代元素
语法:祖先 后代 {样式声明}
选择元素1里的所有元素2(后代元素)
①元素1和2中间必须有空格
②元素1父级,元素2可以是子级,儿子孙子层层往下找就行
③元素1和元素2可以是任意基础选择器
2、子元素选择器(亲儿子选择器)
选择作为某元素的最近一级子元素(选中指定父元素的指定子元素)
语法:父元素>子元素{样式声明}
3、兄弟元素选择器
①选择下一个兄弟(必须是紧挨的)
语法:前一个 + 后一个{样式声明}
②选择下边的所有兄弟
语法:兄 ~ 弟{样式声明}
Ⅳ、属性选择器
1、[属性名]
选中含有指定属性的元素
eg.
p[title]{
color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p >123456</p>
(前两个变色)
2、[属性名=属性值]
选择含有指定属性和属性值的元素
eg.
p[title=abc]{
color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p>123456</p>
(第一个变色)
3、[属性名^=属性值]
选择属性值以指定值开头的元素
eg.
p[title^=abc]{
color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p title="hello">123456</p>
(前两个变色)
4、[属性名$=属性值]
选择属性值以指定值结尾的元素
eg.
p[title$=abc]{
color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p title="helloabc">123456</p>
(一三变色)
5、[属性名*=属性值]
选择属性值中含有某值的元素
eg.
p[title$=abc]{
color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p title="helloabc">123456</p>
(三个都变色)
Ⅴ、伪类选择器
用冒号表示,用于向某些选择器添加特殊效果,如给链接添加特殊效果,或选择第一个第n个元素。
伪类表示特殊的状态
1、选定元素
①:first-child第一个子元素
②:last-child最后一个子元素
③:nth-child()选中第n个子元素
特殊值:
n 第n个 n范围0到∞ 全选中
2n 或even 表示选中偶数位元素
2n+1或odd 表示选中奇数位元素
eg.
ul > li:nth-child(1){
color:red;
}
<ul>
<li>1</li>
<li>2</li>
</ul>
(括号里写几,就是第几个)
注:以上,必须是所有子元素的排序(所有子元素第一个不是li就不变色)
④:first-of-type
⑤:last-of-type
⑥:nth-of-type
注:以上三个和上边功能类似,但他们在相同类型里排序(所有li第一个变色)
2、:not()否定伪类
将符合条件的元素从选择器中去除
eg.
ul > li:not(:nth-child(2)){
color:red;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
(除了第二个都变色)
3、链接伪类选择器
a:link选择所有未被访问的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接(鼠标按下未弹起的链接)
为保证有效果,要按顺序来LVHA(love hate)
给链接要单独指定样式。
写法:
/*a标签选择器 所有链接*/
a {
color: gray;
}
/*:hover链接伪类 鼠标经过*/
a:hover {
color: red;
}
注:
hover、active也可用于其他元素,其他两个只能用于a
xxx:hover
4、伪元素选择器
伪元素表示特殊的位置
伪元素使用::开头
①::first-letter 表示第一个字母
②::first-line 表示第一行
③::selection 表示选中的内容
④::before 表示元素的开始
⑤::after 表示元素的最后
注:④⑤必须结合content属性使用
eg
.news-list li::before {
content:'■'
}
意思是给news-list的所有li前加内容■
5、:focus伪类选择器
用于选取获得焦点的表单元素,只有<input>表单能用
eg.
input:focus {
background-color:yellow;
}
(选中的表单框会改变样式)
Ⅵ、三大特性
1、层叠性
相同选择器:样式冲突,就近原则(后面的覆盖前面);样式不冲突,不层叠
2、继承性
子标签会继承父标签的某些样式(与文字,颜色相关的text-,font-,line-,color),可简化代码
行高继承:font:12px/24px ‘Microsoft YaHei’;(斜杠后面的是行高)
还有一种写法:font:12px/1.5 Microsoft YaHei;(1.5是所有子元素是当前元素文字大小的1.5倍)
①行高可以跟单位也可以不跟单位。
②如果子元素没有设置行高,则会继承父元素的行高1.5
③子元素的行高是当前子元素的文字大小*1.5
3、优先级(权重)
同时有多个选择器,有优先级
①选择器相同执行层叠性
②选择器不同,根据选择器权重
继承或* 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style=“” 1,0,0,0
!important重要的 无穷大∞
③注意:
等级判断从左到右
通配符和继承权重为0,标签选择器1,类(伪类)选择器10,id选择器100,行内样式表为1000,!important无穷大
***继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0
④权重叠加
权重不会进位,有四个数组成