CSS选择器| 1. | ***** | 通用元素选择器，匹配任何元素 | | 2. | E

基本选择器

序号	选择器	含义
1.	*	通用元素选择器，匹配任何元素
2.	E	标签选择器，匹配所有使用E标签的元素
3.	.info	class选择器，匹配所有class属性中包含info的元素
4.	#footer	id选择器，匹配所有id属性等于footer的元素

组合选择器

序号	选择器	含义
5.	E,F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
6.	E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
7.	E > F	子元素选择器，匹配所有E元素的子元素F
8.	E + F	毗邻元素选择器，匹配下一个紧随E元素的同级元素F
9	E~F	匹配任何在E元素后的同级F元素

后代元素：就是元素内的下层所有元素(儿子+孙子)

子元素：就是元素内的下一层元素(儿子) 紧随: 就是F元素必须是E元素的下一个同级元素

<ul>//父元素
 <li>//子元素，后代元素
 	<a href="www.baidu.com">fshdj</a>//后代元素
 </li>
</ul>

div p {  color: #f00; } // 后代元素选择器,匹配所有div元素下的p元素
#nav li { display: inline; } // 后代元素选择器,匹配id为#nav的元素下的所有li元素
div > strong { color: #f00; } // 子元素选择器,匹配div元素下一层中的strong元素
p + a { color: #f00; } // 毗邻元素,匹配p元素的下一个毗邻元素a
p, a { color: #f00; } // 多元素选择器,匹配所有的p，a元素

属性选择器

序号	选择器	含义
10.	E[att]	匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如"[checked]"。以下同。）
11.	E[att=val]	匹配所有att属性等于"val"的E元素
12.	E[att~=val]	匹配att属性是多个空格分隔的值且其中一个值等于"val"的所有元素。(部分属性值匹配)
13.	E[att\|=val]	匹配att属性等于val或是由多个连字符分隔（如hyphen-separated）的值且以"val"开头的元素。主要用于lang属性，比如"en"、"en-us"、"en-gb"等等

<style>
    /*
     	匹配所有lang属性=en|以是以en开头的值的元素。
    */
    *[lang|="en"]{
        color:red;
    }
</style>
<body>
    <p lang="en">Hello</p><!--匹配-->
    <p lang="en-us">Greetings!</p><!--匹配-->
    <p lang="en-au">G'day!</p><!--匹配-->
    <p lang="fr">Bonjour!</p>
    <p lang="cy-en">Jrooana!</p>
</body>

字符串匹配属性选择器

序号选择器含义
1 [att^="def"] 匹配att属性以def开头的元素
2 [att$="def"] 匹配att属性以def结尾的元素
3 [att*="def"] 匹配att属性中包含def的元素

序号	选择器	含义
1	[att^="def"]	匹配att属性以def开头的元素
2	[att$="def"]	匹配att属性以def结尾的元素
3	[att*="def"]	匹配att属性中包含def的元素

伪类选择器(伪类与伪元素的区别)

序号	选择器	含义
14.	E:first-child	匹配父元素的第一个子元素
15.	E:link	匹配所有未被点击的链接
16.	E:visited	匹配所有已被点击的链接
17.	E:active	匹配鼠标已经其上按下、还没有释放的E元素
17.	E:hover	匹配鼠标悬停其上的E元素
18.	E:focus	匹配获得当前焦点的E元素
19.	E:lang(c)	匹配lang属性等于c的E元素

与用户界面有关的伪类:(表单)

序号	选择器	含义
28.	E:enabled	匹配表单中激活的元素
29.	E:disabled	匹配表单中禁用的元素
30.	E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
31.	E::selection	匹配用户当前选中的元素

input[type="text"]:disabled { background:#ddd; }

结构性伪类

表示E节点是不是其父节点下的最后一个/最后一种E类型的节点，是其对应的css才生效。

如：

last-child
last-of-type
nth-last-child(1)
nth-last-of-type(1)

序号	选择器	含义
32.	E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
33.	E:nth-child(n)	匹配E元素的父元素的第n个子元素，第一个编号为1
34.	E:nth-last-child(n)	匹配E元素的父元素的倒数第n个子元素，第一个编号为1
35.	E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种E标签的元素
36.	E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
37.	E:last-child	当E元素的父元素的最后一个子元素是E元素时生效，等同于:nth-last-child(1)
38.	E:first-of-type	当父元素下使用同种标签的第一个子元素是E元素时匹配，等同于:nth-of-type(1)
39.	E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
40.	E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child、:last-child或 :nth-child(1)、:nth-last-child(1)
41.	E:only-of-type	匹配父元素下只有一个子元素使用的标签，等同于:first-of-type 、:last-of-type或 :nth-of-type(1)、:nth-last-of-type(1)
42.	E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

<style>
    /*
        当.test标签的对应其父标签下的最后一个p类型是不是.test对应的元素,是才设为红色
    	这里会设为red
    */
    .test:last-of-type{ color:red;}
    /*不包含任何子元素的p元素,这里没有*/
    p:empty { background:#ff0; }
</style>
<body>
    <div>
        <p class="test">aaaaa</p>
        <a>zzzz</a>
    </div>
</body>

反选伪类

序号	选择器	含义
43.	E:not(s)	匹配不符合当前选择器的任何元素

/*
 E:not(s){Rules}匹配不含有s选择符的元素E
*/
:not(.class3)/*不包含.class3的元素*/
/*选择含有子元素的pre元素，其中:empty选择匹配没有子元素的元素*/
pre:not(:empty)
/*选择不包含类名为abc的p元素*/
p:not(.abc){
  color:#f00;
}

target伪类

CSS3新特性,能够让CSS接受接收到用户的点击事件,并接受反馈。

当URL末尾的#hash锚点值该表时,会根据hash值匹配对应带有target伪类的id值

实现当URL锚点改变(发生点击事件)时,不同元素的css样式改变

<style>
 /* 一开始两个div全设为none*/  
    #hash1,#hash2{
        display:none;
    }
    /*当hash值为hash1时,将id为hash1的css设为block*/
    #hash1:target{
        display:block;
    }
     /*当hash值为hash2时,将id为hash2的css设为block*/
    #hash2:target{
        display:block
    }
</style>
<body>
    <div>
        <a href="#hash1">hash1</a>
        <a href="#hash2">hash2</a>
    </div>
    <div id="hash1">
        显示hash1
    </div>
    <div id="hash1">
        显示hash2
    </div>
</body>

序号	选择器	含义
44.	E:target	匹配文档中特定"id"点击后的效果

伪元素选择器

序号	选择器	含义
20.	E::first-line	匹配E元素的第一行
21.	E::first-letter	匹配E元素的第一个字母
22.	E::before	在E元素之前插入生成的内容
23.	E::after	在E元素之后插入生成的内容

p::first-line { font-weight:bold; color;#600; }
a:link:after { content: " (" attr(href) ") "; }

样式优先级:内联>ID选择器>类选择器(伪类,属性)>标签选择器(伪元素)

计算算法:

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器 出现的次数;
C 的值等于 类选择器 和 属性选择器 和 伪类选择器 出现的总次数;
D 的值等于 标签选择器 和 伪元素 出现的总次数。

/*
依照算法可以算出,
        内联=0-->A=0
        ID选择器#nav-global-->b=1
        类选择 .navOlink ->c=1
        标签选择器ul，li,a   ->d=3
比较的时候，从左到右依次比较，较大者胜出，相等比下一个，全选等按照先后顺序确定优先级
*/
#nav-global>ul>li>a.nav0link{  }

特殊情况:

当用到!important时，外部样式可以覆盖内联样式。

但除了覆盖内联样式，尽量不要使用!important，也不要在内联样式中使用!important,否则此样式不能被覆盖了。

CSS选择器