html选择器的定义和使用,css之选择器

CSS(Cascading层叠 Style样式 sheets表)，是用来为网页添加样式的代码。

css选择器的作用是用于选中元素，以便为其添加样式

1.基础选择器

通用元素选择器(*)，通常用于取消浏览器自带的样式，不常用

id选择器(#id)

class类选择器(.class)

标签选择器(p)

2.组合选择器

组合选择器，E,F表示基础选择器

E,F 多元素选择器，用逗号分割。同时匹配元素E和元素F

E F 后代选择器，用空格分割。选择E元素所有的后代中满足F选择器条件的元素(不只是子元素，子元素所有的后代)

E>F "子元素选择器，用>分割。

选择E元素所有的直接子元素中满足F条件的元素"

E+F "直接相邻选择器，用+分割。

选择E元素之后相邻的下一个兄弟元素F，但要处于同一个父元素内"

E~F "普通相邻选择器(弟弟选择器)。

选择E元素之后的元素F(无论直接相邻与否)，但要处于同一个父元素内"

3.属性选择器

html由元素组成，元素由标签(p/div等标签)，内容和属性(例如class属性，class="haha"表示class属性的值为haha)组成。

可以通过标签的属性来选择元素

input[type=password]{

width:30px;}

[href^="http://"] {

background-color: #f0ad4e;

}

[src$="gif"] {

border: 1px solid #ccc;

}

4.伪类选择器

常用的

E:link 匹配E所有未被点击的链接

E:visited 匹配E所有已经被点击的链接

E:active 匹配鼠标已经其上按下，还没有释放的E元素

E:hover 匹配鼠标悬停其上的E元素

//a标签设置伪类时的顺序比较重要，会产生样式覆盖。

//如果a：visited的样式，放在最后，a链接被点击之后，再hover或者active都不会生效。

a{

color:red;

}

a:visited{

color:blue;

}

a:hover{

color:green;

}

a:active{

color:yellow;

}

E：focus 匹配处于焦点的元素

点击输入框等元素当光标闪烁可以输入内容时，就说明输入框处于焦点状态

E:enabled 匹配表单中可用的元素

E:disabled 匹配表单中禁用的E元素

E:checked 匹配表单中，被选中的radio或者checkbox元素

E::selection 匹配用户鼠标当前选中的元素，注意这里是由两个冒号的

::selection{

color:red;

} //被鼠标选中的文字会变红

E:first-child 匹配其父元素E的第一个子元素

E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)

E:nth-child(n) 匹配其父元素的第N个子元素，第一个标号为1，相当于E:first-child

E:nth-last-child(n) 匹配其父元素的倒数第N个子元素，第一个编号为1

小tip：先找到E的父元素，再选择它父元素下面第n个元素

E:nth-of-type(n) 选择满足E选择器的元素的父元素内，满足E选择器条件的子元素中不同种类型(类型是指标签，如p标签和div标签是不同种类型)第N个子元素

小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再选择这些元素同种类型的第N个

E:nth-last-of-type(n) 与nth-of-type(n) 作用类似，但是倒着匹配的

小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再倒着选择这些元素同种类型的第N个

E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

5.伪元素选择器

伪元素选择器前面有两个冒号(::)，可以添加到选择器的末尾以选择元素的某个部分。

E::first-line 匹配E元素内容的第一行

E::first-letter 匹配E元素内容的第一个字母

E::before 在E元素内部首位生成一个伪元素，插入生成的内容

可用于清除浮动，主要是简化标签

div::before{

content:"aa";

width:0px;

}

E::after 在E元素内部最后生成一个伪元素，插入生成的内容

6.选择器优先级

普通场景

1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式

.child{

color:red !important;

}

2、作为style属性写在元素标签上的内联样式

3、id选择器

4、类选择器

5、伪类选择器

6、属性选择器

7、标签选择器

8、通配符选择器

9、浏览器自定义

复杂场景下：

标记为ABCD

1. 行内样式:

2. id选择器: ==>b

3. 类，属性选择器和伪类选择器 ==>c

4. 标签选择器和伪元素选择器 ==>d

然后根据选择器去分类计算，最后先比较a的值，a相同就比较b，以此类推。数值更高，优先级更高！例如：

* {} /a=0 b=0 c=0 d=1/-> /0,0,0,1/

p {} /a=0,b=0,c=0,d=1/-> /0,0,0,1/

a:hover {} /a=0,b=0,c=1,d=1/-> /0,0,1,1/

ul li {} /a=0,b=0,c=0,d=2/-> /0,0,0,2/

h1+input[type=hidden]{} /a=0,b=0,c=1,d=2/-> /0,0,1,2/

ul ol li.active {} /a=0,b=0,c=1,d=3/->/0,0,1,3/

#ct .box p {} /a=0,b=1,c=1,d=1/-> /0,1,1,1/

div#header:after {} /a=0,b=1,c=0,d=2/-> /0,1,0,2/

style="" /a=1,b=0,c=0,d=0/ ->/1,0,0,0/

7.例子

.box:first-child {

color: red;

/* 输出第一个div.box变红 */

}

.box:first-of-type {

background: blue;

/* 第一个div标签的div.box 、p.box变蓝背景 */

}

.box :first-child {

font-size: 30px;

/* .box后代第一个孩子div.item变成3opx */

}

.box :first-of-type {

font-weight: bold;

/* .box后代第一个div和p类型div.item和p.item变成粗体 */

}

div.box

p.box

div.box

div.item

p.item