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

最新推荐文章于 2024-07-18 20:18:47 发布

iLoveCoffe

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量103

点赞数

分类专栏：自学笔记文章标签： css

本文链接：https://blog.csdn.net/m0_59887059/article/details/119910493

版权

自学笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1- 复合选择器：

交集选择器
并集选择器

代码如下：


    <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:表示优先级最高（！慎用）

iLoveCoffe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始自学前端-选择器篇

1- 复合选择器：交集选择器并集选择器代码如下： <style> /* 交集选择器用.隔开*/ p.red{ color:blue; } /* 并集选择器用,隔开*/ h1,span{ color:blue; } </style> <body> <div clas
复制链接

扫一扫