CSS选择器之复合选择器

复合选择器:

        目的是为了可以选择更准确更精细的目标元素标签

        复合选择器是由两个或多个基础选择器通过不同的方式组合的

1.后代选择器 又称为包含选择器
            作用:用来选择元素或元素的子孙后代
            其写法就是把外层标签写在前面,内层标签写在后面,中间体用空格分隔,先写父亲爷爷,再写儿子孙子:
                父级 子级{属性:属性值;属性:属性值;}
            语法:
                .class h3{color:red;font-size:16px;}

            当标签发生嵌套时,内层标签就成为外层标签的后代
            子孙后代都可以这么选择,或者说,它能选择任何包含在内的标签

2.子元素选择器
            作用:子元素选择器只能选择作为某元素子元素(亲儿子)的元素
            其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个>进行连接
            语法:
                .class>h3{color:red;font-size:14px;}

3.交集选择器
            条件:交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点
            语法:
                h3.class{color:red;font-size:25px;}
                其中第一个选择器是标签选择器,第二个为class选择器,两个选择器之间不能有空格

4.并集选择器
            应用:如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式
            并集选择器(CSS选择器分组)是各个选择器通过,连接而成的
            语法:
                .class,h3{color:red;font-size:14px;}

        任何形式的选择器(包括标签选择器、class选择器、id选择器等),都可以作为并集选择器的一部分
        记忆技巧:
                并集选择器通常用于集体声明,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为和的意思

5.链接伪类选择器
            伪类选择器:与类选择器相区别,用 冒号: 区别
            作用:用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,比如可以选择第1个、第n个元素
            a:link /*未访问的链接*/
            a:visited /*已访问的链接*/
            a:hover /*鼠标移动到链接上*/
            a:active /*选定的链接*/
            注意:
                写的时候他们的顺序尽量不要颠倒,按照lvha的顺序
                因为叫链接伪类,所以都是利用交集选择器
                因为a链接浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值