css高级选择器有哪些

css高级选择器有：1、后代选择器，定义的时候用空格隔开，语法“E F{}”；2、交集选择器，用“.”隔开，语法“E.F{}”；3、并集选择器，用逗号隔开，语法“E,F{}”；4、伪类选择器；5、下一个兄弟选择器；6、属性选择器。

1、后代选择器: 定义的时候用空格隔开

对于E F这种格式，表示所有属于E元素后代的F元素，有这个样式。空格就表示后代。

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

后代选择器，描述的是祖先结构。

看定义可能有点难理解，我们来看例子吧。

举例1：

空格就表示后代。.p1 p 表示.p1的后代所有的p。

这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。

举例：

 
上方代码的意思是说：定义了
标签中的标签中的标签的样式。
 同理：h3和b和i标签不一定是连续紧挨着的，只要保持一个后代的关联即可。
效果：
我们在开头说了：后代选择器，描述的是一种祖先结构。我们举个例子来说明这句话：


    
    
    


    

        

            

                

                    
我是什么颜色？
                
            
        
    

上面css中的p p p，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p元素的祖先列表：
选择的元素要求同时满足两个条件：必须是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;
}
 答：
a{}和a:link{}的区别：
a{}定义的样式针对所有的超链接(包括锚点)
a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)
（2）动态伪类:
用于以下几种状态（适用于所有的标签）：
focus（聚焦，点击某个文本框后输入文字，可以定义文本框和文字的属性）：是某个标签获得焦点的时候（比如某个输入框获得焦点）
hover（盘旋，鼠标停留在上面）：鼠标放到某个标签上的时候
active（长按状态）：点击某个标签没有松鼠标时
举个例子：






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

 
  
  
  
  
  
  
  
 
 
 
  
 
 
效果如下：
另外，介绍一下子代选择器：用符号>表示
IE7开始兼容，IE6不兼容:
div>p{
	color:red;
}
p的儿子p。和p的后代p的截然不同。
能够选择：

		
我是div的儿子
不能选择：

		

			

				
我是div的重孙子
			
		
（3）序选择器
IE8开始兼容；IE6、7都不兼容
设置无序列表
中的第一个
为红色：
设置无序列表
中的最后一个
为红色：
ul li:last-child{
			color:blue;
}
序选择器还有更复杂的用法。
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

		
项目
		
项目
		
项目
		
项目
		
项目
		
项目
		
项目
		
项目
		
项目
		
项目
	
用类选择器来选择第一个或者最后一个：
ul li.first{
	color:red;
}
ul li.last{
	color:blue;
}
5、下一个兄弟选择器
IE7开始兼容，IE6不兼容。
 +表示选择下一个兄弟
上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。
  
我是一个标题
	
我是一个段落
	
我是一个段落
	
我是一个段落
	
我是一个标题
	
我是一个段落
	
我是一个段落
	
我是一个段落
	
我是一个标题
	
我是一个段落
	
我是一个段落
	
我是一个段落
	
我是一个标题
效果如下：
学习视频分享：css视频教程
以上就是css高级选择器有哪些的详细内容，更多请关注其它相关文章！