交集选择器有哪些类型？

css中的交集选择器是什么？

交集选择器只饥胡肢是普通的叠加样式组而已，叫法不一样罢了，例做颂如：

第一种格式类似于：

h1.center {color:red; text-align:center;}

这种格式由标签选择器和类选择器烂世组成。

第二种格式类似于：

h1#center {color:red; text-align:center;}

这种格式由标签选择器和id选择器组成。

css复合选择器有哪些

CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，以上具体的使用如下：

1.子选择器

复制代码

代码如下:

style type="text/css"

#picimg{ // 使用 号，让选择器只选择直接的子类，width:200px;

height:200px;

}

/style

div id="pic"

img src="1.jpg" alt="photo" /

spanimg src="btn" alt="点击大图" /迅郑/span

/div

2.相邻选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择隐昌备器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

3.包含选择器

复制代码

代码如下:

#header p{font-size:14px}

#main p {font-size:12}

定义div id = "header"包含框里的段落字体大小为14像素

定义div id = "main"包含框里的段落字体灶毁大小为12像素.

4.多层选择器嵌套

复制代码

代码如下:

#wrap #header h2 span {font-size:24px}

#wrap #main h2 span {font-size:14px}

5.属性选择器

（1）匹配属性名选择器

div[class] {font-size:24px;}

使该选择器能够匹配div中设置了class属性的对象定义格式

（2)匹配属性值选择器

img[alt="图像"][title="图像"] {border：solid 2px red}：

给img src="images/pic1.jpg" alt="图像" title=“图像”定义样式

(3)模糊匹配属性值选择器

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

复制代码

代码如下:

style type ="text/css"

a:link{color:#FF0000} /*正常链接状态下样式*/

a:visited{color:#0000FF} /*被访问之后的样式*/

a:hover{color:#00FF00} /*鼠标经过的样式*/

a:active{color:#FF00FF} /*超链接被激活的样式*/

/style

属于交换选择器的有哪些

选择器共有六种类型：

1.（元素）标签选择器

2.（类）class选择器

3.id选择器

4.后代选择器如枝肢

5.子代选择器

6.交集选择器

例子：

器

1、标签选择器：给所有的同种标签制定标准

语法：标签名 {

key:value;

}

实例：div {

width:100px;

}

2、类名选择器:将标签归为一类来命名

一对多：一个类名可以多个标签使用

多对一：一个标签可以用多个类名

定义一个类名（class="类名"）

语法：.类名 {

key:value;

}

实例：.head {

width:100px;

}

使用类名（多个类名用空格隔开）

div class="head"/div

div class="类名 类名-1 类名-2"/div

3、ID选择器：唯一性 只能给一个标签用 同种ID名只能用一次

语法：#名字 {

key:value;

}

实例：#foot {

width:100px;

}

4、包含选择器：从父元素里面找符合标准的子孙元素

先找到父元素 再找到它的子孙元素 从中筛选出符合条件的元素

用 空格 连接

语法：.类名/标签名 .类名/标签名 {

key:value;

}

实例：div .son {

width:100px;

}

5、子选择器：找到的只是子元素

先找到父元素 再找到它的子元素 从中筛选出符合条件的元素

语法：.类名/标签名 .类名/标签名 {

key:value;

}

实例：.fatherdiv {

width:100px;

}

6、全局选择器： 通配符 * （兼容性不太好）

语法：* {

key:value;

}

实例：* {

width:100px;

}

7、群组选择器（节省代码）

语法：标签名,标签名 {

key:value;

}

实例：div,div {

width:100px;

}

8、相邻选择器 :

找到指定元素的相邻的兄弟元素（只能找下方的相邻元素）

语法：.类名/标签名+.类名/标签名 {

key:value;

}

实例：.a+div {

width:100px;

}

9、兄弟选择器 （css3）:

找到指定元素的同级的所有兄弟元素（只能找下方的同级所有兄渣世弟元素，并且为同种标签）

语法：.类名/标签名~.类名/标签名 {

key:value;

}

实例：.a~div {

width:100px;

}

伪类选择器

1、:hover

指的是给指定元素加上鼠标悬停状态下的样式（该元素必须有宽高）

2、:active

指的是给指定元素加上鼠标激活状态下的样式

3、:after

指的是给指定元素后面添加一个伪元素 必须携带搭扒 content："" 属性

4、：before

指的是给指定元素前面添加一个伪元素 必须携带 content: "" 属性

5、 ： focus

设置焦点（聚焦）状态

6、

（1）：first-child

指的是父元素下的第一个子元素

（2）：last-child

指的是父元素下的最后一个子元素

（3）：nth-child（n）n为几 就是第几个子元素 从前面开始指定

2n

3n

odd 奇数

even 偶数

（4）：nth-last-child（n） 从后面开始指定

（5）：only-child 只有一个子元素 需加空格

（6）：empty 没有子元素的 没有任何文本 不加空格

（7）：not（） 取反（反选）

（8）：root 根元素

（9） E：first-of-type

先找到元素E，再找到其中的第一个

（10） E：last-of-type

先找到元素E，再找到其中的最后一个

（11） E：only-of-type

先找到元素E，再找到其中的只有一个的

（12） E：nth-of-type（n）

先找到元素E，再找到其中的第n个

（13） E：nth-last-of-type（n）

先找到元素E，再找到其中倒数的第n个

（14） ：first-letter/：last-letter （：：first-letter）

第一个字符/最后一个字符

（15） ：first-line /：last-line （：：first-line）

第一个行/最后一个行

属性选择器

1、 元素[属性] {}

找到某个元素，并且携带这个属性

div class/div

div/div

div[class='box'] {

width: 200px;

height: 200px;

background: green;

}

// 只会给第一个设置属性

2、 元素[属性='属性值'] {}

找到某个元素，且携带这个属性，并且属性值相等的(有且只有一个属性值)

div class/div

div class="box"/div

div class="box box2"/div

div[class='box'] {

width: 200px;

height: 200px;

background: green;

}

// 只会给第二个设置属性

3、 元素[属性~='属性值'] {}

找到某个元素，且携带属性，并且属性值中包含指定的属性值

div class="box2"/div

div class="box box2"/div

div[class~='box2'] {

width: 300px;

height: 300px;

background: purple;

}

// 只要属性之中含有 box2就设置属性，给所有的div标签设置属性

4、 元素[属性|='前缀'] {}

找到元素，并且携带属性，并且属性值要以指定的形式: '前缀-xxxx'

div class="key box1 box2"/div

div class="key-box box1 box2"/div

div class="key-box2 box1 box2"/div

div[class|='key'] {

width: 50px;

height: 50px;

background: pink;

}

// 只给后面两个设置属性

5、 元素[属性^='前缀'] {}

找到元素，并且携带属性 ,并且属性值以'前缀'开头（属性中只有一个属性值）

div class="ax"/div

div class="baox"/div

div[class^='a'] {

width: 20px;

height: 20px;

background-color: #000;

}

// 只给第一个设置属性

6、元素[属性$='后缀'] {}

找到元素，并且携带属性 ,并且属性值以'后缀'结尾

div class="baox"/div

div class="axb"/div

div[class$='b'] {

width: 20px;

height: 20px;

background-color: blue;

}

// 只给第二个设置属性

7、 元素[属性*='中间'] {}

找到元素，并且携带属性 ,并且属性值中包含'中间'

div class="ax"/div

div class="axb"/div

div[class*='x'] {

width: 10px;

height: 10px;

background-color: palegreen;

}

// 两个都会设置属性

还有一点就是当我们写程序时，可能会遇到代码写上了，但是效果却不是我们想要的，这里就遇到了选择器权重的问题：

权重： 通配符标签选择器类名/伪类选择器ID选择器行内样式！important

本人学识有限，如有错误，希望界内大牛可以指正，万分感谢！！！

image

©

著作权归作者所有,转载或内容合作请联系作者

点赞赚钻最高日赚数百

赞 (5)

敲键盘的那些年

小礼物走一走，来简书关注我

赞赏

下载简书，随时随地看好文

暂无评论

写评论

智慧如你，不想

发表一点想法

咩~

取消确认

推荐阅读

更多精彩内容

下载简书App

你也可以写文章赚赞赏

2016年5月Swift 2 学习 --- 117个注意事项与要点

Jenaral

App中阅读

233029h5常见的面试题

kismetajun

App中阅读

26362145面向对象的用电信息数据交换协议

庭说

App中阅读

9126613网络技术与应用

阿啊阿吖丁

App中阅读

264600css选择器的分类

败于化纤

App中阅读

8703css 伪类选择器

zhao_ran

App中阅读

67021408. 数组中的字符串匹配（难度：简单）

各类选择器的类型与区别

兄弟选择器：选择任意两个元素，用逗号隔开

后代选择器：选择子元素中的一个元素，用空格隔开，（如下图能选择classname1同时选择了classname2）[后代选择器用空格表示,子代选择器用表示]这样选择之后，子代的子代也会答悉被选择

当触碰的一个选择器之后另一个也会发生变化用  ~（如下图）

类选择器：.  +选择器的名字设置一个名字

标签选择器：又成为元素选择器

通配符选择器：一般不用设置了会对整个body都会改变，主要用于取消外边距和内边距

》》》后代选择器与子代选择器的区别：

》》使用：

后代选择器：

》》书写形式上的区别：

后代选择器：

祖先元素 后代元素{

}

子代选择器：

父元素子元素{

}

》》使用上的差别：

》后代选择器可以选择祖先元素的所有后代

》子代选择 器只能选择祖先元素的中的一代即父子关系的元素

》当只有父子这样一辈的关系时写两个形式都可以

》有时即使不是一辈的传承也可以使子代的也可以像后代元素一样设置所有的后代，因为这是设置的某些css样式可被后代所继承如颜色color；

并集选择器与交集选择器：

》》并集选择器：

同时选择多个选择器对应得元素 ，这是设置的只要含有这几个选择器的元素都能被设置

》》交集选择器：

是即含有这个元素，又含有另一个元素的选择器,是要同时满足这个这个元素 同时存在 的条件，

选择满足多个条件的选择器，即当同时满足这几个简单的选择器同时存在才能这个选择器所对应的元素设置属性：

选择器1选择器2选择器3{

}

伪类选择配帆器:

是一个：后面再加上其他

:hover(手指经过)

:active(链接点击时的状态设置)

:nth-of-child(n)(指设置了伪类选择器的祖先元素会对子元素进行选择)

一般n是一个数，也可以是代数表达式，当是代数表达式时n从0开始变化

当括号内是even时选择的时偶数

当括号内是odd时是奇数

:first-child：第一个子元素

:last-child：最后一个子元素

:visited(访问过后的链接)

:link(未被访问的链接)

伪元素选择器：

::before(主要是在选择的元素前面添加内容，其中一定要含有content=“”）

::after(主要是在选择的元素后面加内容，其中清卖乎的属性一定要含有content=“”)

::first-letter(对第一个字进行选择)

::first-line(对第一行字进行选择)

伪元素可以用来做对话框,解决高度塌陷的问题,做水印

属性选择器：

一般是对一些标签的的属性进行主要是对一些选择器的名称进行一些特意的选择,有的是选择名称前面有什么的,有的是选择名称以什么结尾的,有的是名称包含什么字段的

以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！