css中选择符

1、基本选择器:

1. *——通配符(不建议使用)

2. E——标签(元素),也是我们之前类型选择器

3. . + class名——类选择器

4. # + id名——id选择器

5. 选择器1,选择11器2 —— 群组选择器

2、关系(层级)选择器

1.E F 包含选择器 —— E父元素,F后代元素,满足F是E的后代,而且一定要F元素

2.E>F 满足F是E子代元素(不包括子代的子代元素),E父元素,F是子元素

3.E+F 表示获取到E下一个兄弟元素(F是E的相邻元素),E下一个元素必须是F,F必须为E的相邻元素

4.E~F 表示获取到E后面的所有F兄弟元素

3、动态伪类选择器

1.E:hover —— 给E添加鼠标滑过的样式

2.E: link —— 链接并未被访问的时候的样式(访问之前的)

3.E:visited —— 链接被访问之后的样式

4.E:active —— 鼠标按下,并未跳转的时候样式

5.input:focus —— input 获取焦点时候的样式

4、目标伪类

1.E:target —— E目标元素,给目标元素添加样式

5、语言伪类选择器

1.q:lang(no){

qoutes:"符号" "符号"

}

注意点:要配合<q lang="no"></q>,默认符号是双引号

6、状态伪类选择器

1.E:enabled —— 给可输入的标签添加样式

2.E:disabled —— 给禁用的标签添加样式

3.E:checked —— E被选中的时候添加样式

4.E::selection —— 被选中的样式

7、结构伪类选择器:

1.E F:first-child 代表找到下面F(F要为E的第一个元素),

所有子元素中得第一个,并且要满足为F元素

2.E F:lat-child 代表找到下面F(F要为E的最后一个元素),

所有子元素中的最后一个,并且要满足为F元素

3.E F:nth-child(n) 代表找E下面的第n 元素,并且这个元素要为F

备注:这个n取1之后才会有效果

4.E F:nth-child(2n) 代表找到E下面的子元素为偶数的F元素

5.E F:nth-child(2n-1) 代表找到E下面的子元素奇数的F元素

6.E F:nth-of-type(n) 代表找到E下面指定的F元素的第n个

7.E F:last-of-type 代表找到E下面指定的F元素的最后一个

8.E F:first-of-type 代表找到E下面指定的F元素的第一个元素

9.E F:only-child 代表E下面有且只有一个子元素,并且这个子元素

10.E F:only-of-type 代表E下面同类型的元素只有一个,并且这个元素为F,其他类型的元素可以有多个

11.E F:empty 代表找到E下面子元素内容为空,并且这个子元素为F

注意点:F资源内容不能有空格,有空格相当于字符。

8、否定伪类选择器:

1.E:not(F) 代表找到E中 除了 F以为所有E元素

9、属性选择器:

1.E[attr] 代表找到E元素中拥有attr 这个属性的元素

2.E[attr=val] 代表找到E元素中拥有attr属性 且属性值等于 val

3.E[attr^=val] 代表找到E元素中拥有attr属性 且以val值开头的元素

4.E[attr$=val] 代表找到E元素中拥有attr属性 且以val值结尾的元素

5.E[attr*=val] 代表找到E元素中拥有attr属性 且val值 (任意位置都可以)

10、伪元素选择器:

1.E::after 表示在E下面添加一个最后的子元素

2.E::before 表示在E下面添加第一个的子元素

3.E::first-letter 表示改变E元素中第一个字符 样式

4.E::first-line 表示改变E元素中第一行字符样式

发布了13 篇原创文章 · 获赞 8 · 访问量 3302

猜你喜欢

转载自blog.csdn.net/weixin_42574100/article/details/82354533