笔记申明
重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时候开的一个专栏,
天天10分钟,重构你的前端学问系统,笔者重要整顿进修历程的一些要点笔记以及感悟,完全的能够到场winter的专栏进修【原文有winter的语音】,若有侵权请联络我,邮箱:kaimo313@foxmail.com。
一、弁言
本文讲一讲css挑选器的一些机制。
二、挑选器的基础意义
依据一些特性,选中元素树上的一批元素。
挑选器的构造分类
-
简朴挑选器
:针对某一特性推断是不是选中元素。 -
复合挑选器
:一连写在一同的简朴挑选器,针对元素本身特性挑选单个元素。 -
庞杂挑选器
:由“(空格)”“ >”“ ~”“ +”“ ||”等标记衔接的复合挑选器,依据父元素或许前序元素搜检单个元素。 -
挑选器列表
:由逗号分开的庞杂挑选器,示意“或”的关联。
三、简朴挑选器
3.1、范例挑选器和全部挑选器
svg 和 html
中都有 a
元素,若要想辨别挑选 svg 中的 a
和 html 中的 a
,就必须用带定名空间
的范例挑选器。
svg 元素在:
http://www.w3.org/2000/svg 定名空间之下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>namespace</title>
<style>
@namespace svg url(http://www.w3.org/2000/svg);
@namespace html url(http://www.w3.org/1999/xhtml);
svg|a {
stroke: hotpink;
stroke-width: 1;
}
html|a {
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<svg width="100" height="100"
viewBox="0 0 100 50" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example</desc>
<a xlink:href="http://www.w3.org">
<text y="100%">svgname</text>
</a>
</svg>
<br />
<a href="javascript:void 0;">htmlname</a>
</body>
</html>
如图所示:
3.2、id 挑选器与 class 挑选器
id
挑选器是
#
号背面追随
id
名,
class
挑选器是
.
背面追随
class
名。
#myid {
stroke: blue;
stroke-width: 1;
}
.myclass {
font-size: 40px
}
3.3、属性挑选器
四中形状
-
[att]
:直接在方括号中放入属性名,是搜检元素是不是具有这个属性。 -
[att=val]
:准确婚配,搜检一个元素属性的值是不是是 val。 -
[att~=val]
:多种婚配,搜检一个元素的值是不是是多少值之一。 -
[att|=val]
:开首婚配,搜检一个元素的值是不是是以 val 开首,背面内容不论。
四、伪类挑选器
4.1、树构造关联伪类挑选器
-
:root
:伪类示意树的根元素。 -
:empty
:伪类示意没有子节点的元素。 -
:nth-child
: -
:nth-last-child
:的区分仅仅是从后往前数。 -
:first-child :last-child
:离别示意第一个和末了一个元素。 -
:only-child
:选中唯一一个子元素。
4.2、链接与行动伪类挑选器
-
:any-link
:示意恣意的链接,包括a、area 和 link
标签都能够婚配到这个伪类。 -
:link
:示意未访问过的链接。 -
:visited
:示意已访问过的链接。 -
:hover
:示意鼠标悬停在上的元素。 -
:active
:示意正在激活这个元素。 -
:focus
:示意核心落在这个元素之上。 -
:target
:用于选中浏览器URL 的 hash
部份所指导的元素。
4.3、逻辑伪类挑选器
CSS 否认伪类 :not(X)
,是以一个简朴的以挑选器X为参数的功能性标记函数。它婚配不符合参数挑选器X形貌的元素。X不能包括别的一个否认挑选器。
概况链接
<p>我是一个段落。</p>
<p class="fancy">我悦目极了!</p>
<div>我不是一个段落。</div>
.fancy {
text-shadow: 2px 2px 3px gold;
}
/* 类名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
color: green;
}
/* 非 <p> 元素 */
body :not(p) {
text-decoration: underline;
}
/* 非 <div> 或 <span> 的元素 */
body :not(div):not(span) {
font-weight: bold;
}
/* 类名不是 `.crazy` or `.fancy` 的元素 */
/* 注重,此语法尚未被较好地支撑。 */
body :not(.crazy, .fancy) {
font-family: sans-serif;
}
结果如图:(能够翻开:https://codepen.io/pen/ 举行代码编写,检察结果)
4.4、别的伪类挑选器
国际化
:用于处置惩罚国际化和多语言题目。dir
lang
音频 / 视频
:用于辨别音视频播放状况。play
pause
时序
:用于配合读屏软件等时序性客户端的伪类。current
past
future
表格
:用于处置惩罚table
的列的伪类。nth-col
nth-last-col
个人总结
许多都没有用过_(:3」∠)_
。。。