CSS选择器决定了样式规则适用于哪些
基本选择器
元素选择器
文档的元素就是最基本的选择器。如果设置HTML的样式,选择器通常将某个HTML元素,比如 p、h1、em、a,甚至可以是html本身:
html{color:black;}
h1{color:red;}
p{color:blue;}
所有与这些标记名匹配的元素,都将应用声明块中的规则。
类选择器
类选择器允许以一种独立的文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。
为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值:
html: <h1 class="F47"> css : .F47
所有class属性为指定类名的元素,都将应用声明块中的规则。
ID选择器
id选择器可以为标有id的HTML元素指定的样式。
id选择器以 # 来定义。
html:<p id="red">这个段落是红色</p> css:#red{color:red;}
HTML代码中,id属性为 red 的 p 元素内容在页面显示为红色。
属性id为指定值的元素,将应用声明块中的规则
在同一个HTML文档中,元素的id值必须唯一。
通配符选择器
在CSS中,一个星号(*
)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果。
*{color:red;}
并集选择器
格式: 选择器1,选择器2,...{ 属性:值; } 注意点: (1),选择器之间利用,连接 (2),选择器可以是标签名称,也可以是id、class名称
h1,h2,h3{color:red;}
层次选择器
子级选择器
只能选择作为某元素子元素的元素。
格式:父级元素名称 + “>” +子级元素名称 + {声明块}
如果不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子级选择器。
例如,如果选择只作为 h1 元素子元素的 strong 元素,可以这样写:
h1> strong{color:red;}
后代选择器
后代选择器又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。
如果只对 h1 元素中的 p 元素应用样式,可以这样写:
h1 p{color:red;}
兄弟选择器
只选中同级的标签 1,相邻兄弟兄弟选择 格式: 选择器1+选择器2{ 声明块}
注意点: (1),相邻选择器必须用+链接 (2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签
span p{color:red;}
通用选择器
只选中同级的标签,格式:选择器1+选择器2{ 声明块}
注意:选择A元素后的B元素,且位于A元素的所有B元素
span~p{color:red;}
伪类选择器
动态伪类选择器
未访问:例: a:link{color:red;} 鼠标悬停:a:hover{color:blue;} 鼠标点击:a active{color:green;} 鼠标点击后:a:visited{color:yellow;} 顺序: link—visited—hover—active (link和visited属于静态伪类选择器,只应用于超链接(a) hover和active属于动态伪类选择器,不仅限于超链接)
焦点
焦点(多用于输入框,链接,可以用到非a类标签 a:focus
语言伪类选择器
格式:元素名称+":lang"+(en/fr/cn)
结构伪类选择器
格式:元素名称{元素内容} 例:p{新年好}*10
格式: 元素名称+":nth-child(n)"{声明块} 例:p:nth-child(4){color:red} 表示选中HTML中的第四个p,文字颜色为红色
格式: 元素名称+":first-child"{声明块} 例:p:first-child{color:red} 表示选中HTML中的第一个p,文字颜色为红色
格式: 元素名称+":last-child"{声明块} 例:p:last-child{color:red} 表示选中HTML中的倒数第一个p(最后一个p),文字颜色为红色
格式: 元素名称+":nth-child(even)"{声明块} 例:p:nth-child(even){color:red} 表示选中HTML中的偶数项,文字颜色为红色
格式: 元素名称+":nth-child(odd)"{声明块} 例:p:nth-child(odd){color:red} 表示选中HTML中奇数项,文字颜色为红色
格式: 元素名称+":nth-last-child(n)"{声明块} 例:p:nth-last-child(n){color:red} 表示选中HTML中的倒数第N个p,文字颜色为红色
格式: 元素名称+":nth-of-type(n)"{声明块} 例:p:nth-of-type(n){color:red} 表示找类型为p的第N个元素,文字颜色为红色
格式: 元素名称+":first-of-type"{声明块} 例:p:first-of-type{color:red} 表示找类型为p的第1个元素,文字颜色为红色
格式: 元素名称+":last-of-type"{声明块} 例:p:last-of-type{color:red} 表示找类型为p的最后一个元素,文字颜色为红色
格式: 元素名称+":only-child"{声明块} 例:p:only-child{color:red} 表示只有一个p元素时样式才生效
格式: 元素名称+":empty"+{声明块} 例:p:empty{color:red} 表示p元素没有嵌套时样式才生效
格式: 元素名称+":only-of-type"{声明块} 例:p:onlyt-of-type{color:red} 表示只有一个p元素时样式才生效
否定伪类选择器
格式: 元素名+":after" 例:p+":after"或"::after" 表示在p元素后添加内容
格式: 元素名+":before" 例:p+":before"或"::before" 表示在p元素前添加内容
格式: 元素名+"::first-letter" 例:p+"::first-letter" 表示p标签中的第一个字进行样式改变
格式: 元素名+"::first-line" 例:p+"::first-line" 表示p标签中的第一行,进行样式改变
伪元素选择器
CSS 中的伪元素选择器:before 和:after,按照其官方的说法,是在被选中的元素的内容之前插入内容。根据最近几次的实践,我觉得所谓被选中的元素,需要是能包含其他元素的元素,比如<label>
,<p>
,<div>
,等,他们之中可以插入其他的元素,比如<p><input type="text" /></p>
,如果用p:before{content:"666";}
,就会在<input/>
元素前面插入“666”,相反,其他不能包含元素的元素则不能使用此功能,比如<input>
,css:input:before{content:"666";}
则没有用。