css3选择器总结

css3选择器总结一、基本选择器1、通配符选择器*{marigin: 0;padding: 0;}2、类名选择器(1)选择指定 class 属性值为“class”的任意类型的任意多个元素。比如下面给使用了 important 这个类名的元素设置样

大家好,欢迎来到IT知识分享网。css3选择器总结"

一、基本选择器

1、通配符选择器    *{marigin: 0;  padding0;  }

2、类名选择器           (1)选择指定 class 属性值为“class”的任意类型的任意多个元素。比如下面给使用了 important 这个类名的元素设置样式。

                                      (2)类选择器还可以结合元素选择器来使用。比如我们有好多个元素使用了类名“items”,但如果只想对使用这个类名的 p 元素上修改样式那么可以这么写:p.items {  colorred;  }

3、标签选择器             用于选择指定类型的 HTML 元素,如 div、ul、li 等。

4、id 选择器              选择指定 ID 属性值为“id”的任意类型元素。比如下面选择了 id 为”first”的元素。

二  、层级选择器

1、子代选择器 (E>F) 

2、后代选择器 (E F )

3、交集选择器  (E.F)

4、并集选择器  (E,F)

三、属性选择器

[attribute]

[target]

选择所有带有target属性元素

2

[attribute=value]

[target=-blank]

选择所有使用target=”-blank”的元素

2

[attribute^=value]

a[src^=”https”]

选择每一个src属性的值以”https”开头的元素

3

[attribute$=value]

a[src$=”.pdf”]

选择每一个src属性的值以”.pdf”结尾的元素

3

[attribute*=value]

a[src*=”runoob”]

选择每一个src属性的值包含子字符串”runoob”的元素

 
<style>
        [class] {
            width: 100px;
            height: 60px;
            background: aquamarine;
        }
        [class = "box1"] {
            background: hotpink;
            line-height: 60px;
        }
        [class ^= "b"] {
            border-radius: 20px;
        }
        [href $= "m"] {
            background: chartreuse;
        }
        [class *= "o"] {
            font: 20px;
            color: #00ffff;
        }
     </style>
</head>
<body>
    <div class="box1">我是div1</div>
    <button class="btn">点我点我</button>
    <a href="https://www.baidu.com" target="_self">百度</a>
    <a href="https://www.淘宝.com" target="_blank">淘宝</a>
    <div class="outer">haohaoxuexi</div>
</body>

  四、伪类选择器

:nth-child(n)

p:nth-child(2)

选择每个p元素是其父级的第二个子元素

3

:nth-last-child(n)

p:nth-last-child(2)

选择每个p元素的是其父级的第二个子元素,从最后一个子项计数

3

:nth-of-type(n)

p:nth-of-type(2)

选择每个p元素是其父级的第二个p元素

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

选择每个p元素的是其父级的第二个p元素,从最后一个子项计数

3

:last-child

p:last-child

指定只有选择每个p元素是其父级的最后一个子级。

 

:first-child

p:first-child

指定只有当<p>元素是其父级的第一个子级的样式

   /* 第三个是li 的话显示样式 */
        ul li:nth-child(3) {
            background: chartreuse;
        }
        /* 从后往前 */
        ul li:nth-last-child(2){
            color: magenta;
        }
        /* 只会验证li标签 其他的不管 */
        ul li:nth-of-type(3) {
            background: #ff00ff;
        }
        /* 会验证第一个是不是li标签 */
        ul li:first-child {
            color: lime;
        }

  

四、动态伪类选择器

之所以称为动态伪类,因为这些伪类并不存在于 HTML 中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含如下两种:
  • 一种是我们在链接中常看到的锚点伪类,如”:link”,”:visited”
  • 另一种被称作用户行为伪类,如“:hover”,”:active”和”:focus”
 

1,使用锚点伪类设置链接样式

要特别注意这四个锚点伪类的设置,他们是有先后顺序的。要让他们遵守一个爱恨原则 LoVe/HAte,也就是 Link–visited–hover–active。如果把顺序搞错了会样式就会出现问题。
1
2
3
4
a:link {
color
:
gray
;} 
/*链接没有被访问时前景色为灰色*/
a:visited{
color
:yellow;} 
/*链接被访问过后前景色为黄色*/
a:hover{
color
:
green
;} 
/*鼠标悬浮在链接上时前景色为绿色*/
a:active{
color
:
blue
;} 
/*鼠标点中激活链接那一下前景色为蓝色*/

 

2,使用用户行为伪类设置按钮样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang=
"en"
>
<head>
  
<meta charset=
"utf-8"
>
  
<title>hangge.com</title>
  
<style>
    
.form-submit {
      
transition: border-color 
0.218
s ease 
0
s;
      
background

none 
repeat 
scroll 
0 
0 
#F5F5F5
;
      
border

1px 
solid 
#DCDCDC
;
      
border-radius: 
2px 
2px 
2px 
2px
;
      
color

#333333
;
      
font

11px
/
27px 
arial
,
sans-serif
;
      
height

27px
;
      
padding

0 
8px
;
      
text-align

center
;
      
text-shadow

0 
1px 
0 
rgba(
0

0

0

0.1
);
    
}
 
    
.form-submit:hover {
      
background-color

#F8F8F8
;
      
border-color

#C6C6C6
;
      
box-shadow: 
0 
1px 
2px 
rgba(
0

0

0

0.15
);
      
color

#333333
;
    
}
 
    
.form-submit:active {
      
border-color

#4D90FE
;
      
box-shadow: 
0 
1px 
2px 
rgba(
0

0

0

0.3

inset
;
      
color

#000000
;
    
}
 
    
.form-submit:focus {
      
border

1px 
solid 
#4D90FE 
!important
;
    
}
  
</style>
</head>
<body>
  
<button class=
"form-submit"
>hangge.com</button>
</body>
</html>

 

五、UI元素状态伪类选择器

我们把”:enabled”,”:disabled”,”:checked”伪类称为 UI 元素状态伪类,这些主要是针对于 HTML 中的 Form 元素操作,比如:
  • <input type=”text”/> 有 enable 和 disabled 两种状态,前者为可写状态后者为不可写状态
  • <input type=”radio”/> 和 <input type=”checkbox”/> 有 checked 和 unchecked 两种状态。
1
2
3
4
5
6
7
/** 下面对所不可用的文本框设置样式 **/
input[type=
"text"
]:disabled {
}
 
/** 下面对所选中的的复选框设置样式 **/
input[type=
"checkbox"
]:checked {
}

 

六、结构伪类选择器

1,E:empty

选择没有子元素的元素,而且该元素也不包含任何文本节点
1
2
3
4
/** 比如有三个段落,其中一个段落什么都没有,完全是空的。想要这个p不显示,可这样写 **/
p:empty {
  
display

none
;
}

 

2,E:first-child

用来选择某个元素的第一个子元素,与 E:nth-child(1) 等同。
1
2
3
/** 选择.demo下第一个li子元素  **/
.demo li:first-child {
}

 

3,E:last-child

选择是的某个元素的最后一个子元素,与 E:nth-last-child(1) 等同。
1
2
3
/** 选择.demo下最后一个li子元素  **/
.demo li:last-child {
}

 

4,E F:nth-child(n)

选择父元素 E 的第 n 个子元素 F。其中 n 可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/** 选择.demo下第3个li子元素  **/
.demo li:nth-child(
3
) {
}
 
/** 选择.demo下所有偶数位置的li子元素(2,4,6...)  **/
.demo li:nth-child(even) {
}
 
/** 选择.demo下第5个位置起的所有li子元素(5,6,7...)  **/
.demo li:nth-child(n+
5
) {
}
 
/** 选择.demo下前5个li子元素(1,2,3,4,5)  **/
.demo li:nth-child(-n+
5
) {
}
 
/** 选择.demo下从1起,隔3取1的所有li子元素(1,5,9...)  **/
.demo li:nth-child(
4
n+
1
) {
}

 

5,E F:nth-last-child(n)

选择父元素 E 的倒数第 n 个子元素 F。此选择器与 E:nth-child(n) 选择器计算顺序刚好相反。
其中 n 同样可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/** 选择.demo下倒数第3个li子元素  **/
.demo li:nth-last-child(
3
) {
}
 
/** 选择.demo下倒数第2个起偶数位置的li子元素(倒数第2个,倒数第4个...)  **/
.demo li:nth-last-child(even) {
}
 
/** 选择.demo下倒数第5个位置起的所有li子元素(倒数第5个,倒数第6个...)  **/
.demo li:nth-last-child(n+
5
) {
}
 
/** 选择.demo下最后5个li子元素(倒数第1,2,3,4,5)  **/
.demo li:nth-last-child(-n+
5
) {
}
 
/** 选择.demo下从最后1个起,隔3取1的所有li子元素(倒数第1,5,9...)  **/
.demo li:nth-last-child(
4
n+
1
) {
}

 

6,E:only-child

选择父元素只包含一个子元素,且该子元素匹配 E 元素。
1
2
3
/** .demo下只有一个字元素,且该元素为p  **/
.demo p:only-child {
}

 

7,其他

  • E:first-of-type:类似于 E:fisrt-child,只不过它选择父元素内具有指定类型的第一个 E 元素
  • E:last-of-type:类似于 E:last-child,只不过它选择父元素内具有指定类型的最后一个 E 元素
  • E:nth-of-type(n):类似于 E:nth-child(n),只不过它选择父元素内具有指定类型的第 n 个 E 元素
  • E:nth-last-of-type(n):类似于 E:nth-last-child(n),只不过它选择父元素内具有指定类型的倒数第 n 个 E 元素
  • E:only-of-type:类似于 E:only-child,只不过它选择父元素只包含一个同类型子元素,且该子元素匹配 E 元素
 
(1)如果父元素下的子元素类型都是一样的,那么上面的 *type 和 *child 选择器使用起来效果是一样的。
(2)但如果父元素下有各种子元素,那就有区别了。这里以 E:fisrt-child 和 E:first-of-type 做个比较:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** 匹配不到,因为.demo下第一个元素是p **/
.demo li:first-child {
  
color

red
;
}
 
/** 可以匹配的到,.demo下派出其他元素,第一个出现li **/
.demo li:first-of-type {
  
color

green
;
}
 
<div class=
"demo"
>
  
<p>文章列表:</p>
  
<li>条目
1
</li>
  
<li>条目
2
</li>
  
<li>条目
3
</li>
</div>

 

七、否定伪类选择器

匹配所有除元素 F 外的 E 元素,类似以 jQuery 中的 :not 选择器。
1
2
3
4
/** 对form中所有input加边框,但又不想submit也起变化 **/
input:not([type=
"submit"
]) {
  
border

1px 
solid 
red
;
}

 

八、伪元素

1,::first-line

选择元素的第一行
1
2
3
4
/** 比如说改变每个段落的第一行文本的样式 **/
p::first-line {
  
font-weight
:
bold
;
}

 

2,::first-letter

选择文本块的第一个字母,除非在同一行里面包含一些其它元素。这个主要运用于段落排版上多。
1
2
3
4
5
6
/** 首字下沉 **/
p::first-letter {
  
font-size

56px
;
  
float
:
left
;
  
margin-right
:
3px
;
}

 

3,::before和::after

这两个主要用来给元素的前面或后面插入内容。
(1)这个最常用的便是是清除浮动了,无需再添加一个空的 div 并应用 clear:both; 样式,只需如下样式即可在元素尾部自动清除浮动。
1
2
/** .clearfix元素尾部自动清除 **/
.clearfix::after {
clear

both
;}

 

(2)与”content”配合使用,可以实现许多特效。比如下面样式,当鼠标移动到链接上方,链接左右会出现悬浮方括号。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
a {
  
position

relative
;
  
display
: inline-
block
;
  
outline

none
;
  
text-decoration

none
;
  
font-size

16px
;
  
color

#FFF
;
  
padding

5px 
15px
;
}
 
a:hover::before, a:hover::after {
  
position

absolute
;
}
 
a:hover::before {
  
content

"\5B"
;
  
left

-2px
;
}
 
a:hover::after {
  
content

"\5D"
;
  
right

-2px
;
}

 

4,::selection

用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性:一个就是 background,另一个就是 color 属性。
1
2
3
4
p::selection {
  
background

red
;
  
color

#fff
;
}

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/31337.html

(0)
上一篇 2023-11-14 11:45
下一篇 2023-11-16 21:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信