选择器用于查找(或选取)想要设置样式的HTML元素,本文为学习选择器所做笔记,记录学习
//通配选择器
* {
属性名:属性值;
}
类选择器
.speak{ //speak为类,class="speak"
属性名:属性值;
}
id选择器
根据元素的id属性值,来精准选中某个元素,一个元素可以同时拥有id,和class属性,id属性值不能相同。
#id值{
属性名:属性值;
}
交集选择器
举例:
//选中类名为p标签的类名为beauty
p.beauty{
属性名:属性值;
}
//选中类名为rich和beauty的元素
.rich.beauty{
属性名:属性值;
}
并集选择器
语法:选择器1,选择器2{} //选择器之间用‘,’隔开
兄弟选择器
//选中div紧紧相邻的兄弟p元素,--相邻兄弟选择器
div+p{
}
//选中div后所有的兄弟p元素----通用兄弟选择器
div~p{
}
//属性选择器
1、[属性名] 选中具有某个属性,但属性值等于指定元素
2、[属性名="值"]选中包含某个属性,且属性值等于指定值的元素
3、[属性名^="值"]选中包含某个属性,且属性值是以指定值开头的元素
4、[属性名$="值"]选中包含某个属性,且属性值是以指定值结尾的元素
5、[属性名*="值"]选中包含某个属性,且属性值是包含指定值的元素
伪类选择器
动态伪类:
1、:link 超链接未被访问的状态
2、:visited超链被访问过的状态
3、:hover鼠标悬停在元素上的状态
4、:active元素激活的状态 //激活--按下鼠标不松开
5、:focus获取焦点的元素 //表单类元素才能使用
结构伪类:
1、:first-child 所有兄弟元素中的第一个
2、:last-child所有兄弟元素中得最后一个
3、:nth-child(n)所有兄弟元素中得第n个
4、:first-of-type 所有同类型兄弟元素中的第一个
5、:last-of-type 所有同类型兄弟元素中的最后一个
6、:nth-of-type(n) 所有同类型兄弟元素中的第n个
关于n的值:
1、0或不写:什么都选不中
2、n:选中所有子元素
3、1~正无穷整数:选中对应序号的子元素
4、2n或even:选中序号为偶数的子元素
5、2n+1或odd:选中序号为奇数的子元素
6、-n+3:选中的是前三个
结构伪类2:
1、:nth-last-child(n) 所有兄弟的倒数第n个
2、:nth-last-of-type(n) 所有同类兄弟元素中的倒数第n个
3、:only-child 选择没有兄弟的元素(独生子女)
4、:only-of-type 选择没有同类兄弟的元素
5、:root 根元素
6、:empty 内容为空元素(空格也算内容)
否定伪类:
:not(选择器) 排除满足括号中条件的元素
ui伪类:
1、:checked 被选中的复选框或单选按钮、
2、:enabled 可用的表单元素 (没有disabled属性)
3、:disabled 不可用的表单元素(有disabled属性)
目标伪类:
:target 选中锚点指向的元素
语言伪类:
:lang() 根据指定的语言选择元素(本质看lang属性的值)
例:
div:lang(en) 选中div中语言为英文的元素
伪元素选择器:
作用:选中元素中的一些特殊位置
::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框中的提示文字
::before 在元素最开始的位置,创建一个子元素,子元素必须用content属性指定内容
::after 在元素最后的位置,创建一个子元素,子元素必须用content属性指定内容
选择器优先级,格式:(a,b,c)
a:id选择器的个数
b:类,伪类,属性选择器的个数
c:元素,伪元素选择器的个数
特殊规则:
1、行内样式权重大于所有选择器样式
2、!important的权重,大于行内样式,大于所有选择器,权重最高
css三大特性
1、层叠性:如果发生样式冲突,那就会根据选择器优先级,进行样式的层叠
2、继承性:元素自动拥有其父元素或者祖先元素的某些样式,优先继承离得近的
3、优先级:可参考菜鸟教程CSS 样式优先级 | 菜鸟教程 (runoob.com)