css选择器:
ID选择器 #idName{} 选择id为idName的元素
类选择器 .className 选择所有class为className的元素
元素选择器 p 选择所有的p标签
复合选择器:
div.b1 选择所有class为b的div元素
复合选择器:
p,#idName,.className 选择所有p标签,id为idName的元素,class为className的元素
通用选择器:
* 选择所有的元素
后代选择器:
.c1 .c2 选择.c1元素内的所有.c2元素
伪类/伪元素:
a:link 正常链接的样式
a:visited 访问过的链接的样式
a:hover 鼠标在上面的链接的样式
a:active 鼠标正在点击时链接的样式
其它:
获取焦点: p:focus: 取得焦点的p元素,p省略为所有元素
指定元素前: p:before 在指定元素的前面添加内容,p省略为所有元素
指定元素后: p:after 在指定元素的后面添加内容,p省略为所有元素
选中的元素: p:selection 选中的元素的样式,,p省略为所有元素
其它选择器:
首字母 p:first-letter p标签的首字母
首行 p:first-line p标签的首行
属性选择器:
p[属性名] 选择包含属性名的所有p标签,p省略为所有元素
p[属性名="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值完全相同
p[属性名~="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值中的一个
p[属性名|="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,"属性值-"开头或完全包含"属性值"
p[属性名^="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值开头
p[属性名$="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值结尾
p[属性名*="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值包含在中间
子元素选择器:
父元素 > 子元素 选择父元素中的子元素
<div>
<p>第一个元素</p>
<h>第二个元素</h>
<span>第三个元素</span>
<span>第四个元素</span>
</div>
:first-child
:last-child
:nth-child
p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素;
h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;
span:first-child 匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素;
:first-child 匹配到的是p元素,因为在这里div的第一个子元素就是p。
:first-of-type
:last-of-type
:nth-of-type
p:first-of-type 匹配到的是p元素,因为p是div的所有为p的子元素中的第一个,事实上这里也只有一个为p的子元素;
h1:first-of-type 匹配到的是h1元素,因为h1是div的所有为h1的子元素中的第一个,事实上这里也只有一个为h1的子元素;
span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素,匹配到的是第一个。
:first-of-type 匹配到的是p元素
兄弟选择器
兄弟元素 + 兄弟元素{} 选择后一个兄弟元素
兄弟元素 ~ 兄弟元素{} 选择后面所有兄弟元素
否定选择器:
p:not(.not){} 所有除了.not的p元素
选择器的权重:
内联样式:权重是 1000
id选择器:权重是 100
类、属性、伪类选择器:权重是 10
元素选择器:权重是 1
通配符:权重是 0
样式的优先级:
内联式:直接写在html标签中
嵌入式:写在<head/>标签的<style type="text/css"/> 标签中
外部式:写在外部文件中,通过<link href="style.css" rel="stylesheet" type="text/css" />引用
内联式 > 嵌入式 > 外部式,但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。
ID选择器 #idName{} 选择id为idName的元素
类选择器 .className 选择所有class为className的元素
元素选择器 p 选择所有的p标签
复合选择器:
div.b1 选择所有class为b的div元素
复合选择器:
p,#idName,.className 选择所有p标签,id为idName的元素,class为className的元素
通用选择器:
* 选择所有的元素
后代选择器:
.c1 .c2 选择.c1元素内的所有.c2元素
伪类/伪元素:
a:link 正常链接的样式
a:visited 访问过的链接的样式
a:hover 鼠标在上面的链接的样式
a:active 鼠标正在点击时链接的样式
其它:
获取焦点: p:focus: 取得焦点的p元素,p省略为所有元素
指定元素前: p:before 在指定元素的前面添加内容,p省略为所有元素
指定元素后: p:after 在指定元素的后面添加内容,p省略为所有元素
选中的元素: p:selection 选中的元素的样式,,p省略为所有元素
其它选择器:
首字母 p:first-letter p标签的首字母
首行 p:first-line p标签的首行
属性选择器:
p[属性名] 选择包含属性名的所有p标签,p省略为所有元素
p[属性名="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值完全相同
p[属性名~="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值中的一个
p[属性名|="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,"属性值-"开头或完全包含"属性值"
p[属性名^="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值开头
p[属性名$="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值结尾
p[属性名*="属性值"] 选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值包含在中间
子元素选择器:
父元素 > 子元素 选择父元素中的子元素
<div>
<p>第一个元素</p>
<h>第二个元素</h>
<span>第三个元素</span>
<span>第四个元素</span>
</div>
:first-child
:last-child
:nth-child
p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素;
h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;
span:first-child 匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素;
:first-child 匹配到的是p元素,因为在这里div的第一个子元素就是p。
:first-of-type
:last-of-type
:nth-of-type
p:first-of-type 匹配到的是p元素,因为p是div的所有为p的子元素中的第一个,事实上这里也只有一个为p的子元素;
h1:first-of-type 匹配到的是h1元素,因为h1是div的所有为h1的子元素中的第一个,事实上这里也只有一个为h1的子元素;
span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素,匹配到的是第一个。
:first-of-type 匹配到的是p元素
兄弟选择器
兄弟元素 + 兄弟元素{} 选择后一个兄弟元素
兄弟元素 ~ 兄弟元素{} 选择后面所有兄弟元素
否定选择器:
p:not(.not){} 所有除了.not的p元素
选择器的权重:
内联样式:权重是 1000
id选择器:权重是 100
类、属性、伪类选择器:权重是 10
元素选择器:权重是 1
通配符:权重是 0
样式的优先级:
内联式:直接写在html标签中
嵌入式:写在<head/>标签的<style type="text/css"/> 标签中
外部式:写在外部文件中,通过<link href="style.css" rel="stylesheet" type="text/css" />引用
内联式 > 嵌入式 > 外部式,但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。