从零开始自学前端-选择器篇

1- 复合选择器:

  1. 交集选择器
  2. 并集选择器

代码如下:


    <style>
        /* 交集选择器 用.隔开*/
        p.red{
            color:blue;
        }
        /* 并集选择器 用,隔开*/
        h1,span{
            color:blue;
        }
    </style>

    <body>
        <div class="red">我是div</div>
        <p class="red">我是p标签</p>
        <h1>我是h1</h1>
        <span>我是span</span>
    </body>

2-关系选择器

理解各种类型的元素分类

父元素直接包含子元素的元素
子元素直接被父元素包含的元素
祖先元素

直接或间接包含后代元素的元素

一个元素的父元素也是他的祖先元素

后代元素

直接或间接被祖先元素包含的元素叫做后代元素

子元素也是后代元素

兄弟元素拥有相同父元素的元素是兄弟元素

以及为了不同的需求,给不同的元素设置属性的不同方法:

有如下的代码为前提:

<div>
        我是div
        <p>
            我是div中的p元素
            <span>
                我是p元素中的span元素
            </span>
        </p>
        <span>
            我是div中的span元素
        </span>
</div>
  • 子元素选择器-为A的子元素B设置属性:

为div的子元素span设置属性:

div > span{
    color:orange;
}

如果有另一个div,则可以:

div.className > span{
    color:orange;
}

  • 后代元素选择器-选中指定元素内的指定后代元素
div > p > span {
    color:orange;
}
  • 兄弟选择器

找p的下一个span元素

p+span{
    color:red;
}

选择下面所有的兄弟元素,前面的兄弟元素不会被选中

p~span{
    color:red;
}

3.属性选择器

注解: title^=abc 表示以指定值abc开头

             title$=abc表示以指定值abc结尾

             title*=abc表示包含abc属性的元素

p[title]{
    color:orange;
}

p[title = "abc"]{
    color:orange;
}

p[title ^= "abc"]{
    color:orange;
}

<p title="abc"> 你好</p>
<p title="abcde"> 你好</p>
<p title="abcdef"> 你好</p>

4.伪类选择器

Pseudo-Class

包含:

        first-child 、last-child 、nth-child(n)、(odd)、(even)、(2n+1)

类似的还有:

        first-of-type、last-of-type、nth-of-type()

否定伪类:

        not()

/*选中第一个子元素*/
ul > li:first-child{
    color:red;
}    
/*选中最后一个子元素*/
ul > li:last-child{
    color:red;
}
/*选择第n个元素*/
ul>li:nth-child(3){
    color:red;
}
/*除了第n个元素*/
ul>li:not(li:nth-child(3)){
    color:red;
}

    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

超链接的伪类:

        :link 表示没访问过的链接

        :visited表示访问过的链接(只能修改链接的颜色,其他属性都无法修改。为了保护隐私)

        :hover表示鼠标移入的状态(除了超链接别的元素也可使用)

        :active表示鼠标点击的状态

5.伪元素选择器

理解:不存在的元素(before与after经常使用)

::first-letter表示第一个字母
::first-line表示第一行
::selection选择的部分
::before(结合content属性使用)元素的开始位置
::after(结合content属性使用)元素的结束位置

餐厅选择联系:        http://flukeout.github.io/

6.样式的继承

我们为一个元素设置的样式同时也会应用到他的后代元素上     

但是并不是所有的样式都可以被继承

7.选择器的权重(重点)

内联样式     <div   style="">1,0,0,0
ID选择器        #id{}0,1,0,0
类和伪类选择器        .class{}0,0,1,0
元素选择器        div{}0,0,0,1
通配选择器        *{}0,0,0,0
继承没有优先级

 优先级计算将权重累加0,0,0,0  

但是无法越级:例如,类选择器累加也无法超过id选择器

可以在某一个样式的后边添加!important:表示优先级最高(!慎用)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值