风清扬

导航

H5-CSS笔记（三） 高级特性之选择器Selector

本笔记来源于互联网

一、什么是选择器（Selector）

　　在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 有点类似于正则表达式中提到的pattern 。

二、选择器有哪大类 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css 选择器举例</title>
 6 </head>
 7 <style>
 8     /*通用选择器*/
 9     * {
10         margin: 0px;
11         padding: 0px;
12     }
13     /*元素选择器*/
14     ul {
15         list-style: circle;;
16     }
17     /*id 选择器*/
18     #header {
19         height: 200px;
20     }
21     /*类选择器*/
22     .intro {
23         float: right;
24     }
25 </style>
26 <body>
27     <div id="header">
28         <ul class="nav">
29             <li>基本选择器</li>
30             <li>层次选择器</li>
31             <li>伪类选择器</li>
32             <li>伪元素选择器</li>
33             <li>属性选择器</li>
34         </ul>
35     </div>
36     <div id="content">
37         <h3>css基本选择器</h3>
38         <ul class="intro">
39             <li>1</li>
40             <li>2</li>
41             <li>3</li>
42             <li>4</li>
43         </ul>
44     </div>
45     <div id="footer">
46          <p>我是底部我是底部！！！！</p>
47     </div>
48 </html>

1、基本选择器

　　1.1 通用选择器 *  ： 一般设置 margin，padding ： 0px，去掉浏览器的默认设置，达到精准排版目的

　　1.2 元素选择器 ul ： 也就是标签选择器。 设置其list 的分格为：circle 。 暂时失效

　　1.3 id 选择器 #header ：针对某一个标签进行设置

　　1.4 类选择器 intro ： 对一类标签进行设置

2、层次选择器

　　2.1 多个选择器 ，每个选择器用逗号分开

　　2.2 后代选择器 ，空格分开

　　2.3 直属子选择器，用> 分开

　　2.4 兄弟相邻元素选择器： + 分开 ，标签后的第一个同级标签

　　2.5 通用相邻选择器：~ 分开  ， 选择匹配元素后的所有同级元素

3、 伪类元素选择器

　　3.1 结构伪类选择器

3.1.1　　E:first-child~匹配E元素的第一个子元素

3.1.2　　E:last-child~匹配E元素的最后一个子元素

3.1.3　　E:root~匹配E元素所在文档的根元素

3.1.4　　E:nth-child(n)~匹配E元素的第n个子元素

3.1.5　　E:nth-last-child(n)匹配E元素的倒数第n个子元素

3.1.6　　E:nth-of-type(n)匹配父元素内具有指定类型的第n个E元素

3.1.7　　E:nth-last-of-type(n)匹配父元素内具有指定类型的倒数第n个E元素

3.1.8　　E:first-of-type匹配父元素内具有指定类型的第一个E元素

3.1.9　　E:last-of-type匹配父元素内具有指定类型的最后一个E元素

3.2.0　　E:only-child匹配父元素内只包含一个子元素，且该子元素匹配E元素

3.2.1　　E:only--ofchild匹配父元素内只包含一个同类型的子元素，且该子元素匹配E元素

3.2.2　　E:empty匹配没有子元素的元素，且该元素五任何文本节点

<style> 
.item1:first-child{ color: red; } 
.item1:nth-of-type(2){ background: blue; } 
</style> 
<div class="ct"> 
    <p class="item1">aa</p> 
    <h3 class="item1">bb</h3> 
    <h3 class="item1">ccc</h3> 
    <div class="item1">ddd</div>
</div>

 

　　3.2 动态伪类选择器

3.2.1　　E:link匹配未被访问过的超链接

3.2.2　　E:visited匹配被访问过的超链接

3.2.3　　E:active匹配鼠标已经其上按下、还没有释放的E元素

3.2.4　　E:hover匹配鼠标停留其上的E元素

3.2.5　　E:focus匹配获得焦点的E元素

　　3.3 语言伪类

　　　　3.3.1　　E:lang(language)匹配指定了lang属性且值为language的E元素

　　3.4 否定伪类

　　　　3.4.1　　E:not(F)

3、 伪类元素选择器

3.1 ::first-letter用来选择文本块的第一个字母

3.2 ::first-line用来选择元素的第一行文本

3.3 ::before和::after不是指存在标记中的内容，而是可以插入额外内容的位置，需要配合content属性使用

3.4 ::selection用来匹配突出显示的文本

4、 属性选择器

 

4.1 E[attr]~匹配所有具有属性attr的E元素

4.2 E[attr=val]~匹配具有属性attr，attr值为val的元素，val区分大小写

4.3 E[attr|=val]~匹配具有属性attr，attr值为val或以val-开始的元素

4.4 E[attr~=val]~匹配具有属性attr，attr值具有多个空格分隔、其中一个值等于value的元素4

4.5 E[attr*=val]~匹配具有属性attr，attr值的任意位置包含了val的元素

4.6 E[attr^=val]~匹配具有属性attr，attr值以val开头的任何字符串的元素

4.7 E[attr$=val]~匹配具有属性attr，attr值以val结尾的任何字符串

三、Selector 的优先级

从高到低的顺序分别是
  1. 在属性后面使用了!important会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素标签上的内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器自定义

三、Selector 受浏览器的版本支持的

　　如何检测我Css 样式在哪个版本支持呢？http://caniuse.com/ 这个网站

 

posted on 2017-09-22 14:56  卜戈的博客  阅读(334)  评论(0)    收藏  举报