今天把视频里的CSS3复杂选择器部分看完了，来整理一下学到的知识点。
1、兄弟选择器：同一位置级别，可称为兄弟元素
a、相邻兄弟选择器：next
紧紧跟在【当前元素之后的】(一个)，指定选择器的元素
语法：通过“+”作为结合符
eg: p+p ->紧跟在p后面的p元素
这是第一个段落
这是一个div这是一个span这是第二个段落
Hello World这是第三个段落
/*demo.css*/div+p{ background: yellow;}#d1+p{ background: red;}span+.p1{ background: blue;}
b、通用兄弟选择器：next_all
匹配某元素【后面所有】的满足指定选择器的兄弟元素
语法：使用“~”作为结合符
eg：p~p{} ->匹配p后面所有的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标记
这是第四个段落
文本内容/*demo.css*/p[class]{color: #e4393c;}p[class~='p1']{background-color: #cd2c2d;color: #fff;}div[class ^= "us"]{background-color: #bfb;}div[class$="t"]{background-color: #bfb;color: #333;}
3、伪类选择器
a、目标伪类：突出显示活动的HTML锚点
语法：:target
b、元素状态伪类：多数用在表单元素上
1、:enabled ->匹配每个已启用的元素
2、:disabled ->匹配每个已被禁用的元素
3、:checked ->匹配已被选中的表单元素(只适用于checkbox,radio)
c、结构伪类
1、next0 ->匹配属于其父元素中的第一个子元素
2、:last-child ->匹配属于其父元素中的最后一个子元素
3、:empty ->匹配没有子元素的元素(文本内容或空格也算作子元素)
4、:only-child ->匹配属于其父元素中的唯一子元素
d、否定伪类：匹配非指定选择器的元素
语法：:not(selector)
猫和老鼠(Tom and Jerry) 铁臂阿童木 黑猫警长
第一部：Tom and JerryTom and Jerry
我是阿童木I am Mr Black Cat/*demo01.css*/a:target,div:target{ background-color: #bfb; font-size: 20pt;}
This is a p
PHP168 行业B2B查看详情解决问题如下：只列举最近用户提交问题，其余问题前面几次补丁已经解决，不在复述。1、解决搜索问题。以前搜索一定要确定到省下面的某个市，这个不符合用户体验。 现在改为，省--所有城市（默认为所有城市，也可以自己选择某个市）。2、解决首页推荐产品部显示问题。（以前没有考虑多个其他浏览器）3、解决供应、求购 今日产品显示问题。（理由同上）4、解决收藏商家、供应、求购问题。 （链接错误）5、解决后台分类过
This id d3first second third last/*demo02.css*/div{ width: 100px; height: 100px;}b{ display: block;}div:empty{ background-color: #bfb;}p:only-child{ background-color: #fbf;}b:first-child{ font-size: 2em; color: #fbb;}b:last-child{ font-size: 3em; font-weight: normal; color: #bbf;}
用户名称：
用户昵称：
性别：男 女 /*demo03.css*/ input:enabled{ color: red;}input:disabled{ border: 1px solid #f00;}input[name=rdoGender]:checked{ background-color: #bfb;}
用户密码：
4、伪next1：匹配出来的都是文本内容
a、next2 ->匹配首字符
b、next3 -> 匹配首行
以上两个选择器，行内元素无效，行内块、块级可以
c、::selection ->用于欧赔用户选中的文本样式(火狐貌似不兼容)
风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。 /*demo.css*/p{ width: 200px; border: 1px solid #bfb; margin: 10% auto; text-indent: 5px;}span{ /*float: right;*/ /*display: inline-block;*/ position: absolute; top: 300px; left: 500px; }p:first-letter{ font-size: 20pt; color: #fbb;}p:first-line{ font-style: italic;}span:first-line{ font-style: italic; background-color: #ffb;}p::selection{ background-color: #bbf; color: #fbf;}
以上就是我在视频中学到的所有内容，若有错误或不足，希望浏览者提出，及时指正。。
今天是我开通博客的第二天，这是我写的第一篇文章，在这里发表完全是当做自己的学习笔记，希望可以记录自己的成长。
以上就是CSS3复杂选择器的详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608221.html
微信扫一扫 
支付宝扫一扫 
