css高級選擇器有哪些

css進階選擇器有：1、後代選擇器，定義的時候用空格隔開，語法「E F{}」；2、交集選擇器，用「.」隔開，語法「E.F{ }」；3、並集選擇器，用逗號隔開，語法「E,F{}」；4、偽類選擇器；5、下一個兄弟選擇器；6、屬性選擇器。

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

CSS選擇器：就是指定CSS要作用的標籤，那個標籤的名稱就是選擇器。意為：選擇哪個容器。

CSS的選擇器分為兩大類：基本選擇題和擴充選擇器。

基本選擇器：

標籤選擇器：針對一類標籤 ID選擇器：針對某一個特定的標籤使用 #類別選擇器：針對你想要的所有標籤使用 通用選擇器（通配符）：針對所有的標籤都適用（不建議使用） 進階選擇器：

後代選擇器：用空格隔開

交集選擇器：用 . 隔開

並集選擇器（分組選擇器）：用逗號隔開

偽類選擇器

下一個兄弟選擇器

屬性選擇器 #1、後代選擇器: 定義的時候用空格隔開 對於

E F 這種格式，表示所有屬於E元素後代的F元素，有這個樣式。空格就表示後代。

後代選擇器，就是一種平衡：共通性、特性的平衡。當要把某部分的所有的什麼，進行樣式改變，就要想到後代選擇器。

後代選擇器，描述的是祖先結構。

看定義可能有點難理解，我們來看範例吧。

範例1： .div1 p{ color:red; } 空格就表示後代。 .p1 p 表示 .p1 的後代所有的

p 。

這裡強調一下：這兩個標籤不一定是連續緊鄰的，只要保持一個後代的關聯即可。也就是說，選擇的是後代，不一定是兒子。

範例： h3 b i{ color:red ; } 上方程式碼的意思是說：定義了 標籤中的 標籤中的

標籤的樣式。 同理：h3和b和i標籤不一定是連續緊鄰的，只要維持一個後代的關聯即可。

效果：

或還有下面這種寫法：

上面的這種寫法， 標籤和

標籤並不是緊鄰的，但他們保持著一種後代關係。

還有下面這種寫法：（含類別選擇器、id選擇器都是可以的）

#我們在開頭說了： 後代選擇器，描述的是一種祖先結構 #。我們舉例來說明這句話：

Document div div p{ color: red; } .div2{...} .div3{...} .div4{...} 我是什么颜色？

上面css中的 p p p

，也能讓文字的顏色變紅。透過瀏覽器的審查元素，我們可以看到p元素的祖先列表：

# 講到這裡，我們再提一個sublime的快捷鍵。 在sublime輸入 p#haha ，按下tab鍵後，會產生

。 在sublime中輸入 p.haha ，按下tab鍵後，會產生

。 2、交集選擇器

來看下面這張圖就明白了：

###### h3.special{ color:red; } 选择的元素要求同时满足两个条件：必须是h3标签，然后必须是special标签。

只能在h3标签中使用它：

css 注意，交集选择器没有空格。所以，没有空格的 p.red （交集选择器）和有空格的 p .red （后代选择器）不是一个意思。

交集选择器可以连续交：（一般不要这么写）

h3.special.zhongyao{ color:red; } 上面这种写法，是 IE7 开始兼容的，IE6 不兼容。

交集选择器，我们一般都是以标签名开头，比如 p.haha 比如 p.special 。

3、并集选择器：定义的时候用逗号隔开 三种基本选择器都可以放进来。

举例：

p,h1,#mytitle,.one/*定义了一个并集选择器，带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/{ color:red; }

4、伪类选择器 对于 标签，其对应几种不同的状态：

link ：超链接点击之前 visited ：超链接点击之后 focus ：是某个标签获得焦点的时候（比如某个输入框获得焦点） hover ：鼠标放到某个标签上的时候 active ：点击某个标签没有松鼠标时 CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：

静态伪类：只能用于超链接 动态伪类：针对所有标签都适用 下面来分别讲一下这两种伪类选择器。

（1）静态伪类：

用于以下两个状态（ 只能使用于超链接 ）：

link ：超链接点击之前 visited ：超链接点击之后 举个例子：

/*伪类选择器：静态伪类 */ a:link /*(针对所有利用href属性的)超链接(不包括锚点)点击之前是红色*/{

color:red; } a:visited/*让超链接点击之后是绿色*/{ color:green; }

问：既然 a{} 定义了超链接的属性， a:link{} 定义了超链接点击之前的属性，那这两个有啥区别呢？ 答：

a{} 和 a:link{} 的区别：

a{} 定义的样式针对所有的超链接(包括锚点) a:link{} 定义的样式针对所有写了href属性的超链接(不包括锚点) （2）动态伪类:

用于以下几种状态（适用于所有的标签）：

focus（聚焦，点击某个文本框后输入文字，可以定义文本框和文字的属性） ：是某个标签获得焦点的时候（比如某个输入框获得焦点） hover（盘旋，鼠标停留在上面） ：鼠标放到某个标签上的时候 active（长按状态） ：点击某个标签没有松鼠标时 举个例子：

/* 伪类选择器：动态伪类*/ input:focus/*让input文本框获取焦点时：边框：#FF6F3D这种橙色；文字：绿色；背景色：#6a6a6a这种灰色*/{ border:3px solid #FF6F3D; color:white; background-color:#6a6a6a; } label:hover/*鼠标放在label标签上时显示蓝色*/{ color:blue; } label:active/*点击label标签鼠标没有松开时显示红色*/{ color:red; }

css大神 利用这个 hover 属性，我们同样对表格做一个样式的设置：

表格举例：

Document /*整个表格的样式*/ table{ width: 300px; height: 200px; border: 1px solid blue; /*border-collapse属性：对表格的线进行折叠*/ border-collapse: collapse; } /*鼠标悬停时，让当前行显示#868686这种灰色*/ table tr:hover{ background: #868686; } /*每个单元格的样式*/ table td{ border:1px solid red; } 效果如下：

另外，介绍一下子代选择器：用符号 > 表示

IE7开始兼容，IE6不兼容:

div>p{ color:red; } p的儿子p。和p的后代p的截然不同。

能够选择：

我是div的儿子

不能选择：

我是div的重孙子

（3）序选择器

IE8开始兼容；IE6、7都不兼容

设置无序列表 中的第一个 为红色：

ul li:first-child{ color:red; } 设置无序列表 中的最后一个 为红色：

ul li:last-child{ color:blue; } 序选择器还有更复杂的用法。

由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

项目 项目 项目 项目 项目 项目 项目 项目 项目 项目 用类选择器来选择第一个或者最后一个：

ul li.first{ color:red; } ul li.last{ color:blue; } 5、下一个兄弟选择器 IE7开始兼容，IE6不兼容。

+ 表示选择下一个兄弟

h3+p{ color:red; } 上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。

我是一个标题 我是一个段落

我是一个段落

我是一个标题 我是一个段落

我是一个段落

我是一个标题 我是一个段落

我是一个段落

我是一个标题 效果如下：

这种选择器作用不大。

6、属性选择器 好处：将id属性和class属性选择器结合

格式有两种分别是：

标签元素名[属性名]{}

标签元素名[属性名=属性值] 注意：class*=""为*=并且带引号 属性选择器中常用的几个 正则表达式 通配符：

=绝对等于唯一（适合id）

*=包含（适合class）

^=以这个元素开头

$=以这个元素结尾 举例图：

学习视频分享： css视频教程

css高級選擇器有哪些

相關文章