CSS选择器

3 篇文章 0 订阅

1、元素选择器

语法:标签名 { }

2、类选择器

语法:.className { }

3、ID选择器

语法:#id { }

4、复合选择器:可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素。

语法:选择器1选择器2{}

5、群组选择器:可以同时使用多个选择器,多个选择器将被同时应用指定的样式。

语法:选择器1,选择器2,选择器3 { }

6、通用选择器

语法:*{}

7、后代选择器

语法:祖先元素 后代元素{ }

8、伪类和伪元素

语法:a:link 正常连接,a:visited 访问过的链接,a:hover 鼠标滑过的链接,

a:active 正在点击的链接, :focus 获取焦点 :before 指定元素前 ,

:after 指定元素后 ::selection 选中的元素,:first-letter 首字母 ,

:first-line 首行

9、属性选择器

语法:

[属性名]:选取含有指定属性的元素

[属性名="属性值"]:选取含有指定属性值的元素

[属性名~="属性值"]:用于选取属性值中包含指定词汇的元素。

[属性名|="属性值"]:用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

[属性名^="属性值"]:选取属性值,以指定内容开头的元素

[属性名$="属性值"]:选取属性值,以指定内容结尾的元素

[属性名*="属性值"] :选取属性值,以包含指定内容的元素

10、子元素选择器

语法:父元素 > 子元素{}

其他的一些子类选择器:

:first-child 选择第一个子标签 :last-child 选择最后一个子标签

:nth-child 选择指定位置的子元素

:first-of-type:last-of-type :nth-of-type 选择指定类型的子元素

11、兄弟选择器

语法:

兄弟元素 + 兄弟元素{} 查找后边一个兄弟元素

兄弟元素 ~ 兄弟元素{} 查找后边所有的兄弟元素

12、否定伪类

语法::not(选择器){}

p:not(.hello)表示选择所有的p元素但是class为hello的除外。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值