1、兄弟选择器：同一位置级别，可称为兄弟元素
a、相邻兄弟选择器：next
紧紧跟在【当前元素之后的】(一个)，指定选择器的元素
语法：通过“+”作为结合符
eg: div+p ->紧跟在div后面的p元素
1 <!-- demo.html --> 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 <!-- demo.html --> 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 <!-- demo01.html 目标伪类 --> 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 <!-- demo02.html 结构伪类 --> 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 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 <!-- demo03.html 伪元素状态伪类 --> 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 <!-- demo04.html 否定伪类 --> 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 <!-- demo.html 为元素选择器 --> 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 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 }
以上就是我在视频中学到的所有内容，若有错误或不足，希望浏览者提出，及时指正。。
今天是我开通博客的第二天，这是我写的第一篇文章，在这里发表完全是当做自己的学习笔记，希望可以记录自己的成长。