css太复杂,CSS3复杂选择器的详解

今天把视频里的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、:first-child ->匹配属于其父元素中的第一个子元素

2、:last-child ->匹配属于其父元素中的最后一个子元素

3、:empty ->匹配没有子元素的元素(文本内容或空格也算作子元素)

4、:only-child ->匹配属于其父元素中的唯一子元素

d、否定伪类：匹配非指定选择器的元素

语法：:not(selector)

猫和老鼠(Tom and Jerry)

铁臂阿童木

黑猫警长

第一部：Tom and Jerry

Tom and Jerry

我是阿童木

I am Mr Black Cat

/*demo01.css*/

a:target,div:target{

background-color: #bfb;

font-size: 20pt;

}

This is a p

This id d3

first

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;

}

用户名称：

用户密码：

/*demo04.css*/

input:not(:last-child){

border: 1px solid #f00;

}

4、伪元素选择器：匹配出来的都是文本内容

a、:first-letter ->匹配首字符

b、:first-line -> 匹配首行

以上两个选择器，行内元素无效，行内块、块级可以

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;

}

以上就是我在视频中学到的所有内容，若有错误或不足，希望浏览者提出，及时指正。。

今天是我开通博客的第二天，这是我写的第一篇文章，在这里发表完全是当做自己的学习笔记，希望可以记录自己的成长。