css笔记(选择器和伪类)

css笔记(选择器和伪类)

1、复杂选择器
选择器作用:为了匹配页面的元素。

1、兄弟选择器:
兄弟:平级,具备相同父元素的标记,都可以称为兄弟标记。
1、相邻兄弟选择器
相邻;与某元素紧紧挨在一起的元素
作用;匹配下一个相邻元素
注意;相邻兄弟只能向下找不能向上找
语法;+作为结合符
selector1+selector2
2、通用兄弟选择器
作用;匹配某元素后面的所有的兄弟元素
语法;~作为结合符
selector1~selector2
2、属性选择器;
1、什么是属性选择器?
能够将元素所附带的属性及其值用于选择器当中
id class style title type name value
2、语法;唯一一组 [] 标记出来的
1、[attr]
attr表示任意一个元素所支持的属性
[id];匹配页面中的所有附带id属性的元素
2、element[attr]
element表示页面中能够出现的任意位置的一个元素
div[id];匹配页面中所有附带id属性的div元素
3、element[attr1][attr2]

eg;div[id][class];页面中同时附带了id和class属性的div元素
4、element[attr=value]
element;元素
attr;属性
value;值
匹配页面中附带属性等于指定值的元素
匹配页面中attr=value的element
5、element[class~=value]
特点
1、class属性值是一个由空格隔开的值列表
<div class="lf lf_btn border"></div>
2、value是值列表中一个独立的单词

6、element[class^=value]
匹配class属性值是以value作为开始的element元素
div[class^="im"]
能匹配出
<div class="imageds"></div>
<div class="imwwwww"></div>

7、element[class$=value]
匹配class属性值是以value作为结束的element元素
8、element[class*=value]
匹配class属性值中包含value字符的element元素
3、伪类选择器
匹配元素不同的状态
1、分类
1、连接伪类
:link
:visited
2、动态伪类
:hover
:active
:focus
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
2、高级伪类
1、目标伪类
作用;突出显示活动的html锚点元素
语法;:target /element:target

2、元素状态伪类
作用;匹配页面中 已启用、禁用、被选中的元素
场合;多数用在表单元素中
语法;
:enabled,匹配每个已启用的元素(非disabled)
:disabled,匹配每个禁用的元素(附带有disabled属性的元素)
:checked,匹配被选中的input元素(用在checked和radio上)
3、结构伪类
语法;
*1,:first-child*
匹配属于其父元素中的首个子元素
*2,:last-child
匹配属于其父元素的最后一个子元素
3,:empty
匹配没有子元素的每个元素
4,:only-child
匹配属于父元素中唯一的子元素
*5,:nth-child(n)
匹配属于父元素中的第n个子元素
4、否定伪类
作用;把指定 选择器匹配到的元素排除出去
语法;:not(selector<选择器>)(排除)
eg:table td:not(:first-child)
第一列以外的所有列

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:10   其中:访客  4   博主  6

  1. avatar 缘梦街 0

    嗯,学习了

  2. avatar 李东辉

    content:counter(a1)”、”

  3. avatar 大学问社区 0

    我过来学习下

  4. avatar 李东辉

    我就是试试

  5. avatar 米粒博客 4

    晚上折腾一下试试

  6. avatar 李东辉

    还可以

  7. avatar 李东辉 5

    测试一下