CSS选择器

html-css014

CSS选择器,第1张

id：指定标签的唯一标识，定位到页面上唯一的元素。

使用场景： 使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上。

class ：类选择器，指定标签的类名，定位到页面上某一类的元素 。

使用场景：使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。

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

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 */

ul ol+li {} /* a=0 b=0 c=0 d=3 ->0,0,0,3 */

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

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 */

先比较a，a大的权重最大，再依次比较b，c，d

#header{ }

id选择器，匹配特定id为header的元素

.header{ }

类选择器，匹配class包含header的元素

.header .logo{ }

后代选择器，匹配class为header元素所有的后代（不只是子元素、子元素向下递归）

calss为logo的元素

.header.mobile{ }

匹配class既有header又有logo的元素

.header p, .header h3{ }

同时匹配class为header所有后代元素p和class为header所有后代元素h3

#header .nav>li{ }

匹配id为header元素所有后代中calss为nav的所有直接子元素li

#header a:hover{ }

匹配id为header所有后代中鼠标悬停其上的a元素

#header .logo~p{ }

匹配id为header所有后代中class为logo之后的同级元素p（无论直接相邻与否）

#header input[type="text"]{ }

匹配id为header所有后代中属性type值为text的元素

n的取值

1，2，3，4，5

2n+1, 2n, 4n-1

odd, even

<style>.item1:first-child{ color: red} .item1:first-of-type{ background: blue} </style><div class="ct"><p class="item1">aa</p><h3 class="item1">bb</h3><h3 class="item1">ccc</h3></div>

下列css选择器中是.nav类选择器。css的选择器包括类选择器、标签选择器、ID选择器、伪类选择器等等。类选择器，比如class类型class="nav"的话，那么css对应.nav。标签选择器，比如bodyinput，就是直接对应body，input。ID选择器，比如id="name"，那么css对应name。伪类、伪对象：如a：link，a：hover，a：visited等。

h1, h2, p {}   //  选择所有的h1,h2,p      

1、后代选择器  (包含选择器)： 以空格隔开包含关系的元素

2、子选择器  以>隔开父子级元素

3、兄弟选择器 ~ +

1、.tab p[title]:{ color: red} 选择所有带有title属性的p标签

2、.tab p[title = 'name']: { color: red} 选择所有title=name属性的标签

3、.tab p[title ^= 'na'] :{}  选择开头title属性带有na开头的标签

4、.tab p[title$= 'po'] :{}  选择title属性结尾是po的标签

5、.tab p[title *= 'name'] 只要含有name值就行的标签

6、.tab p[title ~= 'name flower'] 包含name的属性的标签

7、.tab p[title |= 'name'] 以name开头的属性的标签

伪类不仅可以作用在a链接上，还可以作用在其他元素上

:link  未访问过的链接

:visited 访问过的链接

:active 鼠标点击的一瞬间

:hover  鼠标悬浮在链接上

:focus 具有焦点的输入元素 innput(将输入的外边框去掉 :focus{ outline: none})

:target 锚点目标选择器

:root  文档的根选择器

:empty  空选择器，没有任何子集的元素

:first-child  div下所有孩子中的第一个

:last-child div下所有孩子中的最后一个

:first-of-type div下类型为p的第一个元素

:last-of-type  div下类型为p的最后一个元素

:nth-child(2)  选择每个p元素是其父级的第二个子元素， 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

:nth-last-of-type( n )选择器匹配同类型中的倒数第n个同级兄弟元素。

:after  文本伪类选择器，在每个<p>元素之后插入内容

:before  文本伪类选择器，在每个<p>元素之前插入内容

:first-letter  文本伪类选择器，选择每一个<p>元素的第一个字母

:first-line  文本伪类选择器，选择每一个<p>元素的第一行

锚点目标的伪类选择器

首尾元素的伪类选择器

:first-child  div下所有的第一个p元素 div p:first-chid

:last-child  div下所有的最后一个p元素  div:last-child

:first-of-type 特定 类型 (p元素)的第一个元素  div p:first-of-type

:last-of-type  特定 类型 (p元素)的第一个元素

唯一选择器

:only-child    只有一个孩子的div

:only-of-type  div下只有一种孩子类型的选择器

表单上的伪类选择器

文本的伪类选择器

文本伪类表单

知识点补充：

!important : 强制权重优先级

浏览器默认font-size: 14px

可继承元素：color、font-size、font-family

通配符的权重：0

继承的权重：  NULL       0>NULL

总结排序：!important >行内样式>ID选择器 >类选择器 >标签 、伪类>通配符* >继承 >浏览器默认属性