CSS层叠样式选择器归纳

 常用选择器 

1.1 类型选择器:用来寻找特定类型的元素  标签 { 声明 }

p { color:black; }
h1 { font-weight:bold; }

1.2 后代选择器: 选择一个元素的所有后代，中间使用空格 

标签 1 标签 2 {声明}

  
Contextual selectors are very selective
  
This example shows how to target a specific tag.


 
Contextual selectors are very useful!

article p {font-weight:bold;}

article后代的 p元素才会应用字体加粗的样式 　

1.3 class选择器 标识具有相同特征的元素 .class名 { }

 You Click Look More Infomation......

.moreInfo {
   color:red;
}

1.4 ID选择器 页面中唯一地标识一个元素

      
Yin
      
Yang

#mainmenu a {color:orange;}

 伪类与伪元素选择器  

单冒号(:)称为伪类，伪类与类相似，不同在于并没有类会附加到标记中的标签上

双冒号(::)称为伪元素。伪类与伪元素官网，下图源自【CSS进阶】伪元素的妙用--单标签之美】

 通用选择器

* {
     margin:0;
     padding:0;
}

使用以上规则删除每个元素上默认的浏览器内边距与外边距，项目开发中不建议这么写！！

 高级选择器 【子选择器与相邻同胞选择器】

1.1 子选择器 >  只选择元素的直接后代

	
Home
	

	     Services
	     

		 
Design
		 
Devlopment
		 
Consultancy
	     
	
	
Home
	
Concact

只选择元素的ul#mainNav 直接后代li标签，而嵌套的li不受影响

#mainNav>li {
	padding-left: 20px;
}

1.2 相邻同胞选择器  X+Y { 声明 }  Y必须紧贴在X之后

You Click Look More Infomation......update....update....
This paragraph simply takes on the browser's default paragraph style.

h2相邻p标签应用样式

h2 + p {
        font-size: 1.4em;
	font-weight: bold;
	color: #777;
}

1.3 属性选择器 X[title]属性选择器 它只会选择有title属性的锚标签

有rel属性设定
无rel属性

只会选择有title属性的锚标签应用样式

a[title="noflollow"] {
    color: red;
}

更多选择符说明英文版  "The 30 CSS Selectors you Must Memorize"

中文翻译版 “30个你必须记住的CSS选择符”

作者：Avenstar

出处：http://www.cnblogs.com/zjf-1992/p/6261468.html

关于作者：专注于WEB前端开发

本文版权归作者所有,转载请标明原文链接。

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我不断的迭代！

支付宝

微信

【资料参考】

  精通CSS高级web标准解决方案（第二版）

  CSS设计指南 （第二版）

转载于:https://www.cnblogs.com/zjf-1992/p/6261468.html