作者:翰龙雅集艺术品收藏网 | 来源:互联网 | 2023-05-19 18:30
今天把视频里的CSS3复杂选择器部分看完了,来整理一下学到的知识点。1、兄弟选择器:同一位置级别,可称为兄弟元素a、相邻兄弟选择器:next紧紧跟在【当前元素之后的】(一个),指定选择器的元素
今天把视频里的CSS3复杂选择器部分看完了,来整理一下学到的知识点。
1、兄弟选择器:同一位置级别,可称为兄弟元素
a、相邻兄弟选择器:next
紧紧跟在【当前元素之后的】(一个),指定选择器的元素
语法:通过“+”作为结合符
eg: div+p ->紧跟在div后面的p元素
1
2 <html> 3 <head> 4 <title>title> 5 head> 6 <body> 7 <p>这是第一个段落
p> 8 <div id="d1">这是一个div
div> 9 <span>这是一个span
span>10 <p class="p1">这是第二个段落
p>11 <b>Hello World
b>12 <p class="p2">这是第三个段落
p>13 body>14 html>15 16 /*
demo.css*/
17 div+p{
18 background: yellow;
19 }
20 #d1+p{
21 background: red;
22 }
23 span+.p1{
24 background: blue;
25 }
b、通用兄弟选择器:next_all
匹配某元素【后面所有】的满足指定选择器的兄弟元素
语法:使用“~”作为结合符
eg:div~p{} ->匹配div后面所有的p
2、属性选择器:使用元素所附带的属性,用于选择器当中,作为选择元素的条件
语法:[属性相关内容]
eg:[id] ->具备id属性的所有元素
p[id] ->具备id属性的p元素
a、[id],p[id]
b、p[id][class] ->既具备id又具备class的p元素
c、p[id="p1"] ->id值为"p1"的p元素
d、p[class~="value"]
e、p[class^="b"] ->匹配class属性值以b开始的p标记
f、p[class*="b"] ->匹配class属性值中包含b的p标记
g、p[class$="b"] ->匹配class属性值以b结尾的p标记
1
2 <html> 3 <head> 4 <title>title> 5 head> 6 <body> 7 <p class="clear p1 myself"> 8 这是第四个段落
9 p>10 <div class="userContent">11 文本内容
12 div>13 body>14 html>15 16 /*
demo.css*/
17 p[class]{
18 color: #e4393c;
19 }
20 p[class~='p1']{
21 background-color: #cd2c2d;
22 color: #fff;
23 }
24 div[class ^= "us"]{
25 background-color: #bfb;
26 }
27 div[class$="t"]{
28 background-color: #bfb;
29 color: #333;
30 }
3、伪类选择器
a、目标伪类:突出显示活动的HTML锚点
语法::target
b、元素状态伪类:多数用在表单元素上
1、:enabled ->匹配每个已启用的元素
2、:disabled ->匹配每个已被禁用的元素
3、:checked ->匹配已被选中的表单元素(只适用于checkbox,radio)
c、结构伪类
1、:first-child ->匹配属于其父元素中的第一个子元素
2、:last-child ->匹配属于其父元素中的最后一个子元素
3、:empty ->匹配没有子元素的元素(文本内容或空格也算作子元素)
4、:only-child ->匹配属于其父元素中的唯一子元素
d、否定伪类:匹配非指定选择器的元素
语法::not(selector)
1
2 <html> 3 <head> 4 <title>title> 5 head> 6 <body> 7 <a href="#Tom">猫和老鼠(Tom and Jerry)
a> 8 <a href="#Atongmu">铁臂阿童木
a> 9 <a href="#BlackCat">黑猫警长
a>10 <br>11 <a name="Tom">第一部:Tom and Jerry
a>12 <p style="height: 500px;">Tom and Jerry
p>13 <div id="Atongmu" style="height: 500px;">我是阿童木
div>14 <div id="BlackCat" style="height: 500px;">I am Mr Black Cat
div> 15 body>16 html>17 18 /*
demo01.css*/
19 a:target,div:target{
20 background-color: #bfb;
21 font-size: 20pt;
22 }
1
2 <html> 3 <head> 4 <title>title> 5 head> 6 <body> 7 <div id="d1">div> 8 <div id="d2"> 9 <p>This is a p
p>10 div>11 <div id="d3">12 This id d3
13 div>14 <div id="d4">15 <b>first
b>16 <b>second
b>17 <b>third
b>18 <b>last
b>19 div> 20 body>21 html>22 23 /*
demo02.css*/
24 div{
25 width: 100px;
26 height: 100px;
27 }
28 b{
29 display: block;
30 }
31 div:empty{
32 background-color: #bfb;
33 }
34 p:only-child{
35 background-color: #fbf;
36 }
37 b:first-child{
38 font-size: 2em;
39 color: #fbb;
40 }
41 b:last-child{
42 font-size: 3em;
43 font-weight: normal;
44 color: #bbf;
45 }
1
2 <html>
3 <head>
4 <title>title>
5 head>
6 <body>
7 用户名称:<input type="text"><br>
8 用户昵称:<input type="text" disabled value="请输入您的昵称">
9 <br>
10 性别:<input type="radio" name="rdoGender">男
11 <input type="radio" name="rdoGender">女
12 body>
13 html>
14
15 /*demo03.css*/
16 input:enabled{
17 color: red;
18 }
19 input:disabled{
20 border: 1px solid #f00;
21 }
22 input[name=rdoGender]:checked{
23 background-color: #bfb;
24 }
1
2 <html>
3 <head>
4 <title>title>
5 head>
6 <body>
7 <div>
8 用户名称:<input type="text"><br>
9 用户密码:<input type="password"><br>
10 <input type="submit" value="提交">
11 <input type="button" value="按钮">
12 div>
13 body>
14 html>
15
16 /*demo04.css*/
17 input:not(:last-child){
18 border: 1px solid #f00;
19 }
4、伪元素选择器:匹配出来的都是文本内容
a、:first-letter ->匹配首字符
b、:first-line -> 匹配首行
以上两个选择器,行内元素无效,行内块、块级可以
c、::selection ->用于欧赔用户选中的文本样式(火狐貌似不兼容)
1
2 <html>
3 <head>
4 <title>title>
5 head>
6 <body>
7 <p>
8 风风雨雨适合于独行,且手中无伞,不打伞有不打伞的好处。湿是我的湿,冷是我的冷,即便化作雨点般的小,那么小也是我的小。
9 p>
10 <span>
11 风风雨雨适合于独行,且手中无伞,不打伞有不打伞的好处。湿是我的湿,冷是我的冷,即便化作雨点般的小,那么小也是我的小。
12 span>
13 body>
14 html>
15
16 /*demo.css*/
17 p{
18 width: 200px;
19 border: 1px solid #bfb;
20 margin: 10% auto;
21 text-indent: 5px;
22 }
23 span{
24 /*float: right;*/
25 /*display: inline-block;*/
26 position: absolute;
27 top: 300px;
28 left: 500px;
29
30 }
31 p:first-letter{
32 font-size: 20pt;
33 color: #fbb;
34 }
35 p:first-line{
36 font-style: italic;
37 }
38 span:first-line{
39 font-style: italic;
40 background-color: #ffb;
41 }
42 p::selection{
43 background-color: #bbf;
44 color: #fbf;
45 }
以上就是我在视频中学到的所有内容,若有错误或不足,希望浏览者提出,及时指正。。
今天是我开通博客的第二天,这是我写的第一篇文章,在这里发表完全是当做自己的学习笔记,希望可以记录自己的成长。