选择器 #

基本选择器 #

标签选择器 #

直接使用元素标签进行选择

  p { color:red; }
   /* 权重1 */

类选择器 #

通过元素的类名，来选择元素，一个元素可以有多个类名，都代表这个元素类名是元素 class 属性中的属性值，例如

   .sum{}  // 此选择器的权重为10

id 选择器 #

通过元素的 id 名，来选择元素，类名是元素 id 属性中的属性值，例如

   #sum{}   // 此选择器的权重为100

通配符选择器 #

通过*选择全部元素，包括根元素

   *{}   // 权重小于1，可以被覆盖

复杂选择器 #

并集选择器 #

你可以对选择器进行分组，这样，被分组的选择器就可以分享想相同的声明。用逗号被需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6{
	color:green;
}

交集选择器 #

两种属性同属一个元素的时候，我们可以使用交集选择器来进行元素的准确选择 可以更精准的找到我们需要的标签在 class 名或者 id 名前面加上标签名缩小查找的范围

注意：标签名和 class/id 名中没有空格隔开

<p class='name1 name2' id='id1'></p>

p.name1{}
p#id1{}
.name1.name2{}

派生（后代）选择器 #

• 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁，用空格隔开列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器
• 后台选择器尽量不要超过 3 个，没有必要把每一个层级都写出来，只需要写出关键节点即可

<ol>
	<li>
  	<strong>我是斜体字。这个因为strong元素位于li元素内。</strong>
  </li>
</ol>

li strong{
  font-style:italic;
  font-weight:normal;
}

子代选择器 #

与后代选择器相比，子元素选择器只有选择作为某元素子元素，符号为大括号

h1 > strong {color:red;}

<h1>This is<strong>very</strong> important.</h1>

相邻兄弟选择器 #

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素

h1+p{
	margin-top:50px;
}

属性选择器 #

对带有指定属性的 html 元素设置样式 权重 10 可以为拥有指定 html 元素设置样式，而不仅限于 class 和 id 属性 下面的例子为 title 属性的所有元素设置样式

[title]{color:red;}

属性和值选择器 下面的例子为 title='wjw'的所有元素设置样式

[title=wjw]{color:red;}

设置表单的样式

input[type='text']{width:150px;display:block;background:yellow}

伪装选择器 #

请列举你所知道的 css3 中新增的选择器？

• a:link{color:#ff000}  // 未访问的链接
• a:visited{color::#ff000} // 已访问的链接
• a:hover{color:#ff000} // 鼠标移动到链接上
• a:active{color:#ff000} // 选定的链接 input:focus 获取光标

css 选择器有哪些，css3 新增伪类有哪些？

结构选择器 #

:nth-child(n) 第几个元素 从 1 开始设置
:nth-child(2n) 偶数元素 从 0 开始设置
:nth-child(2n+1) 奇数元素
:nth-of-type(n) 某个元素下同种类型中的第几个子元素
:first-child -> nth-child(1)
:first-of-type->nth-of-type(1)
:last-child
:last-of-type
:only-child 仅有一个子元素
:only-of-type 同种类型的子元素只有一个
:empty 满足条件的

否定选择器 #

:not()

属性选择器 #

E[attr=val]
E[attr|=val] 只能等于 val 或只能以 val- 开头
E[attr*=val] 包含 val 字符串
E[attr~=val] 属性值有多个，其中一个是 val
E[attr^=val] 以 val 开头
E[attr$=val] 以 val 结尾

目标伪类选择器 #

:target 用来匹配 url 指向的目标元素
存在 url 指向该匹配元素时，样式效果才会生效

伪元素 #

:first-line 匹配第一行文本
:first-letter 匹配第一首字符
:before 和 after DOM 元素前后插入额外的内容