css选择器

html-css033

css选择器,第1张

选定所有对象。

语法

以文档语言对象类型作为选择符。即 html 中的标签

语法

以唯一标识符 id 属性等于 myid 的 E 对象作为选择符。

语法

以 class 属性包含 myclass 的 E 对象作为选择符。

不同于 id 选择符 的唯一性,类选择符可以同时定义多个,并控制多个元素的样式

语法

群组选择器 (selector1,selectorN) 是将具有 相同样式 的元素分组在一起,每个选择器之间用逗号( , )隔开。

语法

后代选择器( E F )是选择 E 元素的所有后代 F 元素,不管 F 元素是 E 元素的子元素、孙元素或者更深层的关系,都会被选中。

语法

子选择器( E>F )是选择 E 元素的所有子后代 F 元素,注意 F 元素仅仅是 E 元素的子元素而已。

语法

兄弟选择器( E~F )是 CSS3 新增选择器,代表 E 和 F 具有同一个父元素,并且 F 元素在 E 元素后面,但是不用相邻。

例子

语法

相邻选择器( E+F )是 E 和 F 具有同一个父元素,并且 F 元素在 E 元素后面且相邻。

语法

简介

根据具有链接属性的 E 元素的被访问情况进行匹配。

例子

index.html

index.css

简介

根据用户对于 E 元素的操作来进行匹配。

例子

index.html

index.css

一、简单的选择器

1)标签选择器

与网页元素同名,用的最多,也简单,即直接作用于与该选择器名字相同的标签

2) 类选择器

能够为网页对象定义不同的样式类,实现不同元素拥有相同的样式,相同元素的不同对象拥有不同样式

3)类选择器和标签结合在一起==>指定类选择器

指定该类用于特定的标签范围内

4)ID选择器(ID唯一)

这个就不举例讲解了,类比类选择器,把"."换成"# "即可

5)通配选择器

如果所有元素都需要定义相同的样式,推荐使用通配选择器

二、复合选择器

1)子选择器

2)相邻选择器(二者有相同父元素)

**利用相邻的兄弟元素来控制,即相邻选择器就是指定一个元素相邻的下一个元素的样式。相邻的选择器使用+表示

3)包含选择器(后代选择器)

第一对象一定要内包含第二对象

4)选择器嵌套

5)属性选择器

属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。

1.匹配属性名选择器

2.扩展

3.匹配属性值选择器

4.模糊匹配属性值选择器

类似正则表达式

6)伪选择器和伪元素选择器

标签之间可以通过逗号隔开来设定多个标签的CSS样式

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>