大家好,欢迎来到IT知识分享网。
一、基本选择器
1、通配符选择器 *{marigin:
0
;
padding
:
0
;
}
2、类名选择器 (1)选择指定 class 属性值为“class”的任意类型的任意多个元素。比如下面给使用了 important 这个类名的元素设置样式。
(2)类选择器还可以结合元素选择器来使用。比如我们有好多个元素使用了类名“items”,但如果只想对使用这个类名的 p 元素上修改样式那么可以这么写:p.items {
color
:
red
;
}
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; }
四、动态伪类选择器
- 一种是我们在链接中常看到的锚点伪类,如”:link”,”:visited”
- 另一种被称作用户行为伪类,如“:hover”,”:active”和”:focus”
1,使用锚点伪类设置链接样式
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元素状态伪类选择器
- <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
1
2
3
|
/** 选择.demo下第一个li子元素 **/
.demo li:first-child {
}
|
3,E:last-child
1
2
3
|
/** 选择.demo下最后一个li子元素 **/
.demo li:last-child {
}
|
4,E F:nth-child(n)
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)
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
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
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>
|
七、否定伪类选择器
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
2
|
/** .clearfix元素尾部自动清除 **/
.clearfix::after { clear : both ;}
|
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
1
2
3
4
|
p::selection {
background : red ;
color : #fff ;
}
|
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/31337.html