CSS选择器

1.CSS选择器

1.1 元素选择器: 
html {color:black;}  
说明：以元素名称选择指定元素

1.2 分组选择器
/* 不分组*/ 
h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;} 
/* 分组 */ 
h1, h2, h3, h4, h5, h6 {color:blue;}
说明：将任意多个选择器分组在一起，选择器之间用逗号分隔

1.3 ID选择器
<h1 id="intro”>this is intro</h1>
#intro { font-weight:bold; }
说明：#元素ID值，来选择HTML中某个指定的元素
因为是ID，所以可以在所属HTML中唯一确定一个元素.注意ID值大小写敏感

1.4 类选择器
<h1 class="important"> This is very important. </h1> 
.important {color:red;}
<h1 class=“important big”>This is very important.</h1>
.big{font-size:48px;}
说明：.类名，类名前面加上点号
类选择器选中HTML所有class属性值匹配的元素
多类选择：在html元素的class中，可以填写多个类名，用空格分隔，那么将在该元素上层叠显示这些类的样式

***** 优先级：
style > ID选择器 > class选择器 > 元素选择器

1.5 伪类选择器
a:link {color: #FF0000} 未访问的链接 
a:visited {color: #00FF00} 已访问的链接   
a:hover {color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接
input:focus{border：1px;} 拥有键盘输入焦点的元素
ul:first-child{color:red;} 元素的第一个子元素

1.6 伪元素选择器
p:first-letter { color:#ff0000;} :first-letter，第一个字符
p:first-line { color:#ff0000; }  :first-line，第一行
h1:before { content:url(beep.wav); } :before，之前
h1:after { content:url(beep.wav); } :after，之后

1.7 属性选择器
a[href] {color:red;}          匹配有href属性的a标签元素
a[href][title] {color:red;}  匹配有href和title属性的a标签元素
a[href=‘www.baidu.com’]{color:red;} 匹配href属性值为百度的a标签元素
a[href~=‘baidu’]{color:red;}    匹配href属性值包含baidu整词的
a[href|=‘www’]{color:red;}    匹配href属性值以www整词开头的
a[href^=‘www’]{color:red;} 匹配href属性值以www开头的
a[href$=‘com’]{color:red;} 匹配href属性值以com结尾的
a[href*=‘www’]{color:red;} 匹配href属性值包含www的

1.8 后代选择器 （关联选择器）
h1 em {color:red;}
说明：h1中的em元素
1.9 子元素选择器
h1 > strong {color:red;}
说明：h1中直接的strong元素
1.0 相邻兄弟选择器
h1 + p {margin-top:50px;}
说明：紧接在h1后的p元素