css选择器详解

先都列出来再逐个进行详解

class 类选择器，

.intro	选择所有class="intro"的元素
<div class="border width height margin"></div>
.border{
  border: 1px solid red;
}
.width{
  width: 60px;
}
.height{
  height: 30px;
}
.margin{
  margin: 20px;
}

id id选择器具有唯一性

<div>
<div class="width height margin" id="background"></div>
<div class="border width height margin" id="background"></div>
  </div>
	#background{
	  background: red;
	}

	<div>
	    <div class="width height margin" id="background border"></div>
	    <div class="border width height margin" id="background"></div>
	  </div>
.border{
  border: 1px solid red;
}
.width{
  width: 60px;
}
.height{
  height: 30px;
}
.margin{
  margin: 20px;
}
#background{
  background: red;
}
这样写id绑定的样式类会失效

*

* 选择所有元素
在上个图的效果上给所有元素写样式
 *{
  margin: 0px;
  margin: 0px;
  background: black;
}

标签选择器element

div	选择所有<div>元素
div{
  width: 1000px;
  height: 200px;
}

这里会发现只有外层的宽度按照我们写的宽度1000px渲染了，这是因为css有自己的选择器优先级
！important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认
内联样式权值为1000
ID选择器权值为0100
类选择器权值为0010
标签选择器和伪元素选择器权值为0001
通用选择器（*），子选择器（>），相邻同胞选择器（+），权值为0000
div#demo a{color: red;} /*特殊性值：0,1,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
a{color: yellow;} /*特殊性值：0,0,0,1*/
div a{color: green;} /*特殊性值：0,0,0,2*/
权重相同，后面的样式会覆盖掉前面的
类名的先后顺序不影响样式，主要看权重和顺序。
权重相同的基础下，后面写的样式覆盖前面的对应的全部样式

	<a href="">第一条</a> <!--适用第1行规则-->
    <div class="demo">
      <input type="text" value="第二条" /><!--适用第4、5行规则，第4行优先级高-->
      <a href="">第三条</a><!--适用第2、3行规则，第3行优先级高-->
    </div>
    <div id="demo">
      <a href="">第四条</a><!--适用第6、7行规则，第7行优先级高-->
    </div>

    a{color: yellow;} /*特殊性值：0,0,0,1*/(只有标签)
	div a{color: green;} /*特殊性值：0,0,0,2*/（有两个标签所以特殊性值加1）
	.demo a{color: black;} /*特殊性值：0,0,1,1*/（类特殊性值是0010 + 特殊性值0001）
	.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/（类选择器0010 + 属性选择器0010 + 元素选择器0001）
	.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/（类选择器0010 + 属性选择器0010）
	#demo a{color: orange;} /*特殊性值：0,1,0,1*/（id选择器0100 + 元素选择器0001）
	div#demo a{color: red;} /*特殊性值：0,1,0,2*/（id选择器0100 + 元素选择器0001 + 元素选择器0001）

标签选择器element,element（0001）

div,p	选择所有<div>元素和<p>元素

标签选择器element element（0001）

div p	选择<div>元素里的所有<p>元素

标签选择器element>element

div>p	选择所有父级是 <div> 元素的 <p> 元素

标签选择器element+element

div+p	选择所有紧接着<div>元素之后的<p>元素

属性选择器[attribute]

[value]	选择所有带有value属性元素

[value]{
  background: black;
  color: yellow;
}

属性选择器[attribute=value]

[value=‘first’]选择所有使用value=‘first’的元素

[value='first']{
  background: red;
  color: yellow;
}

也可以根据文字编辑样式

属性选择器[attribute~=value]

[value~=first]	选择标题属性包含单词"first"的所有元素

	<div>
      <input value="first" />
      <input value="first" />
    </div>

属性选择器[attribute|=language]

[lang|=en]	选择 lang 属性以 en 为开头的所有元素

:link

a:link	选择所有未访问链接

:visited

a:visited	选择所有访问过的链接

:active

a:active	选择活动链接

:hover

a:hover	选择鼠标在链接上面时

:focus

input:focus	选择具有焦点的输入元素

:first-letter

p:first-letter	选择每一个<p>元素的第一个字母

:first-line

p:first-line	选择每一个<p>元素的第一行

:first-child

p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。

:before

p:before	在每个<p>元素之前插入内容

:after

p:after	在每个<p>元素之后插入内容

:lang(language)

p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素

element1~element2

p~ul	选择p元素之后的每一个ul元素

[attribute^=value]

a[src^="https"]	选择每一个src属性的值以"https"开头的元素

[attribute$=value]

a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素

[attribute*=value]

a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素

:first-of-type

p:first-of-type	选择每个p元素是其父级的第一个p元素

:last-of-type

p:last-of-type	选择每个p元素是其父级的最后一个p元素

:only-of-type

p:only-of-type	选择每个p元素是其父级的唯一p元素

:only-child

p:only-child	选择每个p元素是其父级的唯一子元素

:nth-child(n)

p:nth-child(2)	选择每个p元素是其父级的第二个子元素

:nth-last-child(n)

p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数

:nth-of-type(n)

p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素

:nth-last-of-type(n)

p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数

:last-child

p:last-child	选择每个p元素是其父级的最后一个子级

:root

:root	选择文档的根元素

:empty

p:empty	选择每个没有任何子级的p元素（包括文本节点）

:target

#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）

:enabled

input:enabled	选择每一个已启用的输入元素

:disabled

input:disabled	选择每一个禁用的输入元素

:checked

input:checked	选择每个选中的输入元素

:not(selector)

:not(p)	选择每个并非p元素的元素

::selection

::selection	匹配元素中被用户选中或处于高亮状态的部分

:out-of-range

:out-of-range	匹配值在指定区间之外的input元素

:in-range

:in-range	匹配值在指定区间之内的input元素

:read-write

:read-write	用于匹配可读及可写的元素	3

:read-only

:read-only	用于匹配设置 "readonly"（只读） 属性的元素

:optional

:optional	用于匹配可选的输入元素

:required

:required	用于匹配设置了 "required" 属性的元素

:valid

valid	用于匹配输入值为合法的元素

:invalid

:invalid	用于匹配输入值为非法的元素