CSS层叠样式选择器归纳

常用选择器

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设计指南（第二版）

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

CSS层叠样式选择器归纳相关推荐

利用pagespeed插件优化网站css层叠样式文件
"不务正业"的google最近发布了pagespeed插件和apache 2专有的mod_pagespeed页面优化模块:pagespeed插件目前仅有firefox版的,该插件要 ...
css层叠样式的使用,CSS层叠样式表——使用CSS样式的方法
使用CSS样式的方式 1 HTML 声明标签 1.1 定义和用法声明必须是HTML文档的第一行,位于标签之前. 声明不是HTML标签,它是指示web浏览器关于页面使用哪个HTML版本进行编写的指 ...
海量数据预处理实战----CSS网页样式
目录 CSS网页样式--选择器实验目的实验原理实验步骤 CSS引入方式和优先级实验总结 CSS网页样式--常用样式实验目的实验原理 1.文本样式 2.文字样式 3.链接样式 ...
可以对同一个html元素定义不同的样式,CSS的多种选择器的使用.ppt
什么是样式选择器是样式选择器当定义一条样式规则时必须指定受这条样式规则作用的网页元素在一条规则中定义的网页元素就是选择器也就是选择该样式规则作用于的网页元素选择器有标签就用选择器选择符就是赋予内部或外 ...
css层叠引入方式有,前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器一丶CSS简介叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
【CSS】CSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )
文章目录一.CSS 层叠性 1.样式层叠冲突 2.样式层叠不冲突一.CSS 层叠性 1.样式层叠冲突 CSS 层叠性 : 为标签设置多种 CSS 样式 , 会出现 CSS 样式叠加的情况 , ...
HTML、CSS综合02——css，样式表，选择器、盒子模型
回顾复习什么是标签:标签由<tagName>开始,到</tagName>结束. xml的标签基本都是自定义的 html的标签,基本都是规定好的.(可以使用自定义标签)浏览器对 ...
html的css样式中表示后代选择器,html添加css——样式选择器
如何给html添加样式.两种方法:css 1.新创建一个css样式表,与原html同目录,而后经过link标签连接.如:(link标签是一个void元素,无结束标签.)html 2.直接在html源码 ...
html中选择样式,html中css三种常见的样式选择器 zz
1:标签选择器标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 p{font:"宋体"; color:#FF0000} 我现在表现的是 ...

CSS层叠样式选择器归纳

CSS层叠样式选择器归纳相关推荐

最新文章

热门文章