当前位置：文档之家 › CSS 的常用选择器

CSS 的常用选择器

  • 格式：pdf
  • 大小：119.24 KB
  • 文档页数：4

一、标签选择器 二、类选择器 三、id 选择器 四、通配符选择器 五、后代选择器 六、子代选择器 七、并集选择器 div { }.article { }#pass {}* { margin: 0; padding: 0;}div a span { }div > a { }div a,span a {}八、链接伪类选择器 如果混合使用，需要按照 " link、visited、hover、active " 的顺序书写，否则浏览器可能无法正常显示这4种样式

九、属性选择器

十、结构伪类选择器 1. n 的说明 a:link { /* 选择鼠标未点击的 */}a:visited { /* 选择鼠标已经点击过的 */}a:hover { /* 选择鼠标经过 */}a:active { /* 选择鼠标点击未弹开 */}[YY] { /* 选择有YY属性的所有元素 */}E[YY] { /* 选择有YY属性的E元素 */}E[YY="ZZ"] { /* 选择有YY属性，且属性值等于ZZ的元素 */}E[YY^=icon] { /* 选择有YY属性，且属性值是以icon开头的元素 */}E[YY$=icon] { /* 选择有YY属性，且属性值是以icon结尾的元素 */}E[YY*=icon] { /* 选择有YY属性，且属性值包含icon的元素 */}取值意义1 2 3 ... n选中第几个子元素even(偶数)、odd(奇数)选中全部的奇数或偶数公式2n(0 2 4 6 ... )、5-n(5 4 3 2 1 0) 、、、、、、2. child 选择器 功能：选择有父级元素的第 n 个 XX元素，先关注是第几个孩子，再判断类型是否符合先找到有父级元素的第 n 个 XX元素，之后判断是不是指定元素

3. type 选择器 与child选择器功能一样，只不过 type 是先找出所有符合类型要求的元素，再关注第几个十一、伪元素选择器 需要注意的内容必须要有 content 属性，否则不起效果before 在内容前面，after 在内容后面before 和 after 创建的是一个行内元素伪元素和标签选择器一样，权重为 1创建出来的元素在 Dom 中查找不到，所以称为伪元素li:first-child { 找到同一级中的第 1 个子元素 判断是不是 li}li:last-child { 找到同一级中的 最后1个 子元素 判断是不是 li}li:nth-child(n) { 找到同一级中的第 n 个子元素 判断是不是 li}li:first-of-type {}li:last-of-type {}li:nth-of-type(n) {}p:before { content: '前面前面'; color: red;}p:after { content: '后面后面'; color: yellow;}

合集下载

CSS选择器大全详解：

CSS选择器大全详解：

CSS选择器大全详解：

1.标签选择器

2.类选择器

3.id选择器

4.A B表示后代选择器

5.A,B表示与集选择器

6.A.B表示交集选择器

7.A*表示A的所有后代元素,如果A是可省略A不写

8.A+B表示选择紧接着A元素后的B元素(A和B有共同的父元素)

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

选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素

9.A~B:

p~ul选择器 p之后出现的所有ul。

两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。

10.A>B:

css3特有的选择器，A>B 表示选择A元素的所有子B元素。

与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

11.p:first-child选择属于其父元素的首个子元素的每个

元素

设置每个

ul>:first-child

{

background:yellow;

}

12.:only-child

:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

ul li:only-child 选择属于ul唯一li的li

st-child

p:last-child

指定属于其父元素的最后一个子元素的 p 元素的背景色

14.nth-child()

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

规定属于其父元素的第二个子元素的每个 p 的背景色：

p:nth-child(2)

{

background:#ff0000;

}

15.nth-last-child()

规定属于其父元素的第二个子元素的每个 p 元素，从最后一个子元素开始计数：

p:nth-last-child(2)

{

background:#ff0000;

}

16.first-of-type

指定父元素的首个 p 元素的背景色：

css样式的六种选择器

css样式的六种选择器

css样式的六种选择器

css常⽤的选择器有：

1.标签选择器：

标签选择器，这种选择器影响范围⼤，建议尽量应⽤在层级选择器中。

如：

*{margin:0;padding:0} /* 影响所有的标签 */

div{color:red} /* 影响所有的div标签 */

2.id选择器：

通过id名来选择元素，元素的id名称不能重复，所以⼀个样式设置项只能对应于页⾯上⼀个元素，不能复⽤，id名⼀般给程序使⽤，所以不

推荐使⽤id作为选择器。

id是所有标签的属性，所有标签都有id属性，写代码时id的值是不允许重复的

如：

#box{color:red}

3.类选择器：（常⽤）

通过类名来选择元素，⼀个类可应⽤于多个元素，⼀个元素上也可以使⽤多个类，应⽤灵活，可复⽤，是css中应⽤最多的⼀种选择器。

如：

.red{color:red}

.big{font-size:20px}

.mt10{margin-top:10px}

4.层级选择器：

主要应⽤在选择⽗元素下的⼦元素，或者⼦元素下⾯的⼦元素，可与标签元素结合使⽤，减少命名，同时也可以通过层级，防⽌命名冲突。

如：

.box span{color:red}

.box .red{color:pink}

.red{color:red}

......

......

层级选择器最好不要超过四层，否则会影响性能。

代码：

层级选择器

层级选择器主要应⽤于选择⽗元素下的⼦元素，或者⼦元素下⾯的⼦元素，

可与标签元素结合使⽤，减少命名，同时也可以通过层级，防⽌命名冲突。

层级选择器主要应⽤于选择⽗元素下的⼦元素，或者⼦元素下⾯的⼦元素，

可与标签元素结合使⽤，减少命名，同时也可以通过层级，防⽌命名冲突。

5.组选择器：

多个选择器，如果有同样的样式设置，可以使⽤组选择器。

（组选择器之间⽤逗号分隔；层级选择器之间⽤空格分隔）

如：

.box1,.box2,.box3{width:100px;height:100px}.box1{background:red}

CSS选择器解析

CSS选择器解析

CSS选择器解析

CSS（层叠样式表）是一种用于描述网页上元素样式的语言。在CSS中，选择器能够指定一个或多个HTML元素，并定义它们的样式。选择器的解析是理解和应用CSS的重要基础，本文将对CSS选择器解析进行探讨。

一、选择器的基本概念

选择器是CSS中用于选择一个或多个HTML元素的模式。它可以根据元素的标签名、类名、ID、属性以及它们的关系进行选择。下面介绍几种常见的选择器类型：

1. 标签选择器（Tag Selector）

标签选择器是最基本的选择器类型，它通过指定HTML元素的标签名来选择元素。例如，p选择器将选择所有的段落元素：

```

p {

color: red;

}

```

2. 类选择器（Class Selector） 类选择器通过指定HTML元素的类名来选择元素。类选择器以点（.）开头，后跟类名。例如，.highlight选择器将选择所有具有highlight类的元素：

```

.highlight {

background-color: yellow;

}

```

3. ID选择器（ID Selector）

ID选择器通过指定HTML元素的唯一ID标识来选择元素。ID选择器以井号（#）开头，后跟ID名称。例如，#logo选择器将选择具有logo ID的元素：

```

#logo {

width: 200px;

height: 100px;

}

```

4. 属性选择器（Attribute Selector） 属性选择器通过指定HTML元素的属性来选择元素。属性选择器使用方括号（[]）进行包裹，并可以通过元素的属性名或属性值来选择元素。例如，[type="text"]选择器将选择所有type属性值为text的元素：

```

[type="text"] {

border: 1px solid gray;

}

```

二、选择器的优先级

当多个选择器同时应用于同一个元素时，可能会出现优先级的冲突。为了解决这种冲突，CSS定义了一套选择器优先级的规则，用于确定应用哪个选择器的样式。

11css中常用的四种选择器

11css中常用的四种选择器

◆ Css中常用的四种选择器

1. 类选择器(class选择器)

基本使用

.类选择器{

属性名: 属性值;

….

}

2. id选择器

基本使用

#id选择器{

属性名: 属性值;

….

}

案例:

/*id选择器的使用*/

#id1{

background-color:silver;

font-size:40px;

}

3. html元素选择器 (html的优先级比id和class选择器要低)

某个html元素{

属性名:属性值;

…

} Html文件

新闻一

新闻二

新闻三

新闻四

新闻五

这是一则非常重要的新闻

Css

.s1{

background-color:pink;

font-weight:bold;

font-size:16px;

color:black;

}

/*id选择器的使用*/

#id1{

background-color:silver;

font-size:40px;

}

/*html选择器*/

body{

color:orange;

}

运行结果

☞ 四个选取器优先权

Id选择器> class选择器> html选择器> 通配符选则器

需求人员(技术+行业背景)

财务软件(php,c++)->用友[]

4. 通配符选择器

☞ css 文件可以使用在各种文件(php,html,jsp,asp…)

*{

/*margan 可以写一个值,(上,右,下,左 顺时针) 如果是两个值 (上下,左右 ) 如果是三个值 (上, 左右, 下)*/

margan:10px 30px 40px 1px;

margin:0px;

padding:0px;

可以让所有html元素的外边距和内边距都默认为0，有时特别有用。