选择器

选择器
     简单选择器
     伪元素选择器
     组合选择器
 
标签选择器
     p{color:blue;}
 
类选择器
     .special{color:blue;}
多个组合
.className
- .
- 字母,数字,-,_
- className必须以字母开头
- 区分大小写
- 出现多次
 
id选择器
     #ban {color:blue;}
#id
- #
- 字母,数字,-,_
-id必须以字母开头
-区分大小写
-只出现一次
 
通配符选择器
*{color}
所有的元素
 
属性选择器
<input disabled type=“text” value=“张三”>
[disabled]{background-color:#eee;}
 
属性选择器 - [att=val]
[type=button]{color:blue;}
id选择器,类选择器就是属性选择器的特例#nav{} = [id=nav]{}
 
属性选择器 - [att ~= val]
<h2 class=“title sports”>title</h2>
<p class=“sports”>content</p>
[class~=sports]{color:blue}
类似于模糊匹配 空格之间使用模糊匹配
 
属性选择器 - [att |= val]
<p lang=“en”>hello</p>
<p lang=“en-us”>greeting!</p>
[lang |= en] { }
全文的模糊匹配
 
属性选择器 - [att ^= val]
[href ^= “#”] { }
以什么开头的
 
属性选择器 - [att $= val]
以什么结尾的
 
属性选择器 - [att *= val]
包含什么值
 
伪类选择器
a:link {}
a:visited {}
a:hover {}
a:active {}
 
enabled
disabled
checked
 
伪类选择器
li:first-child{}
li:last-child{}
li:nth-child(type){}  type : even、odd、3n+1
li:nth-last-child(type){}
 
:only-child{}
 
:first-of-type{}  //第一个这种类型的元素
:last-of-type{}  //
:nth-of-type(type){}
:nth-last-of-type(type){}
 
:only-of-type{}
 
:empty   选择没有子元素的标签
:root    跟标签
:not() 不包含
:target 锚点
:lang() language的值
 
简单选择器
tag{}
.className{}
#id{}
*{}
[att]{}
:link{}
组合选择器
将简单选择器进行组合
img[src$=jpg]{}
 
 
其他选择器
伪元素选择器
::first-letter{}
内容的第一个字符变大
 
::first-line{}
 
::before{
     content:’before’;
}
 
::after{
     content:’after’;
}
 
 
::selection{
     color:red;
     background-color:#ccc;
}
 
组合选择器
后代选择器子代选择权
.main h2{}
.main>h2{}
兄弟选择器
h2+p{}
选中了h2和p
通用兄弟选择器
h2~p{}
h2和之后的p
选择器分组
h1,h2,h3{}
 
继承
body{
     font-family:””;
}
继承属性
- color
- font
- text-align
- list-style
- ...
自动继承
 
非继承属性
- background
- border
- position
- ...
 
在文档中如何查看该属性是否是可以继承
在文档中有一个inherited属性,看是否是yes还是no
 
CSS优先级
计算方法
- a = 行内样式 (1000)
- b = ID选择器的数量 (100)
- c = 类、伪类和属性选择器的数量 (10)
- d = 标签选择器和伪元素选择器的数量 (1)
 
 
选择器 a b c d value
h1 0 0 0 1 1
p > em 0 0 0 2 2
style:”" 1 0 0 0 1000
.comment p 0 0 1 1 11
div#content 0 1 0 1 101
a:link 0 0 1 1 11
 
 
CSS层叠
相同的属性会覆盖
- 优先级
- 后面覆盖前面
不同的属性会合并
 
CSS改变优先级
- 改变先后顺序
- 提升选择器优先级
- !important
     color: blue !important;
 
个人认为:提升选择器优先级是最好的改变优先级的方法
 
选择器兼容性说明:
本节中所讲的选择器,主流的浏览器基本都支持,IE低版本有较多的兼容问题,具体可查看该页面。http://www.quirksmode.org/css/selectors/
 
 
 
posted @ 2016-08-01 23:22  Kuckboy_shan  阅读(146)  评论(0编辑  收藏  举报