常用选择器

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

p { color:black; }

h1 { font-weight:bold; }

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

标签 1 标签 2 {声明}

<body>

<article>

  <h1>Contextual selectors are <em>very</em> selective</h1>

  <p>This example shows how to target a <em>specific</em> tag.</p>

</article>

<aside>

 <p>Contextual selectors are <em>very</em> useful!</p>

</aside>

</body>
article p {font-weight:bold;}

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

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

<h2 class="moreInfo"> You Click Look More Infomation......</h2>
.moreInfo {

   color:red;

}

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

<nav id="mainMenu">

<ul>

      <li><a href="#">Yin</a></li>

      <li><a href="#">Yang</a></li>

</ul>

</nav>
#mainmenu a {color:orange;}

 伪类与伪元素选择器

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

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

 通用选择器

* {

     margin:0;

     padding:0;

}

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

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

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

<ul id="mainNav">

	<li><a href="/Home/">Home</a></li>

	<li>

	     <a href="/services/">Services</a>

	     <ul>

		 <li><a href="/services/design/">Design</a></li>

		 <li><a href="/services/devlopment/">Devlopment</a></li>

		 <li><a href="/services/consultancy/">Consultancy</a></li>

	     </ul>

	</li>

	<li><a href="/Home/">Home</a></li>

	<li><a href="/concact/">Concact</a></li>

</ul>

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

#mainNav>li {

	padding-left: 20px;

}

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

<h2>You Click Look More Infomation......update....update....</h2>

<p>This paragraph simply takes on the browser's default paragraph style.</p>

h2相邻p标签应用样式

h2 + p {

        font-size: 1.4em;

	font-weight: bold;

	color: #777;

}

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

<a title="noflollow" href="#none">有rel属性设定</a>

<a href="#none">无rel属性</a>

只会选择有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设计指南 （第二版）

CSS层叠样式选择器归纳的更多相关文章

  1. css层叠样式优先级总结

    虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难 ...

  2. css笔记06：层叠样式选择器

    1. (1)HTML文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  3. css层叠样式初学

    一.css简介 1.层叠样式表:叠加效果,不同css对同一html修饰,冲突部分,优先级高作用,不冲突部分,共同作用 2.css作用 (1)修饰html (2)替代了标签自身的颜色,字号等属性,提高复 ...

  4. CSS层叠样式

    为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部 ...

  5. 学习前端第二天之css层叠样式

    一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体    ( 可直接跟 ...

  6. CSS 层叠及样式表来源

    Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...

  7. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  8. CSS语法、选择器、继承、层叠

    行内样式(内联样式) <h1 style="color:red;font-size:20px;">css行内样式</h1> 内部样式表(嵌入样式) < ...

  9. CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

    CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...

随机推荐

  1. log file sync

    Recently, our application system has updated one app. I receive a email of complain the db server ch ...

  2. umount nfs状态为busy的处理方法

    umountall状态为busy的系统: 以下四种情况,文件系统都会显示:umount: file_system_name busy 1 A program is accessing a file o ...

  3. PHP判断日期是不是今天 判断日期是否为当天

    <?php /** * PHP判断一个日期是不是今天 * 琼台博客 */ echo '<meta charset="utf-8" />'; // 拟设一个日期 $ ...

  4. C#.Net 如何动态加载与卸载程序集（.dll或者.exe）1----C#中动态加载和卸载DLL

    我们知道在C++中加载和卸载DLL是一件很容易的事,LoadLibrary和FreeLibrary让你能够轻易的在程序中加载DLL,然后在任何地方卸载. 在C#中我们也能使用Assembly.Load ...

  5. PLSQL Developer调试 存储过程和触发器

    1． 打开PL/SQL Developer如果 在机器上安装了PL/SQL Developer的话,打开PL/SQL Developer界面输入 用户名,密码和host名字,这个跟在程序中web.co ...

  6. [原]Unity3D深入浅出 - GUI控件

    Unity的GUI类提供了丰富的界面控件,通过组合这些控件,完成和用户交互的界面. Lable:绘制文本和图片 Box:绘制一个图形框 Button:绘制一个响应单击事件的按钮 RepeatButto ...

  7. jquery 图片无缝切换

    想要和园友分享一下学习jquery的经验.总结,更希望园友提出点建议. 第一次写,有不好的地方请多多见谅! 文笔有限,很多时候不知道怎么来描述,唉.硬伤啊!!那只好多做了,贴代码... ok,废话少说 ...

  8. 【转】 实现 Cocos2d-x 全局定时器

    转自:http://www.tairan.com/archives/3998 cocos2d-x 中有自己的定时器实现,一般用法是在场景,层等内部实现,定时器的生命周期随着它们的消亡而消亡,就运行周期 ...

  9. SharePoint中修改密码的WEB Part之终极版:即可以修改AD，又可以修改本机用户密码的Web Part!!

    转:http://www.cnblogs.com/dosboy/archive/2007/08/01/838859.html 在网上查了那么多SharePoint密码修改的第三方开发,都有问题.总结下 ...

  10. Ubuntu上搭建Watir-Webdriver与Cucumber环境

    本文主要演示如何在Ubuntu上搭建Watir-Webdriver与Cucumber环境,用于自动化测试. 1. Ubuntu环境 A. 安装 因为我的工作机是Windows,所以采用虚拟机的方式使用 ...