1-css选择器
2017-06-08 12:53
351 查看
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样式的位置一定在外部式的后面。
相关文章推荐
- css选择器集体声明
- css选择器优先级
- CSS选择器种类及介绍
- css选择器总览图
- HTML5实战与剖析之CSS选择器——querySelectorAll()
- 30个最常用css选择器解析
- CSS选择器相关知识
- CSS选择器
- CSS选择器无法找到td
- [Selenium]中使用css选择器进行元素定位
- css选择器优先级全解析
- 一道关于CSS选择器优先级的题
- CSS选择器中的空格的不同作用
- DB-DAY1 css选择器的特殊用法
- 详解CSS选择器、优先级与匹配原理
- 详解CSS选择器、优先级与匹配原理
- CSS选择器的优先级
- css选择器(selector) xPath的选择器
- css选择器顺序的小技巧
- CSS学习笔记----CSS选择器