前端学习——CSS（一）选择器

最新推荐文章于 2023-01-17 15:26:04 发布

__Heisenberg__

最新推荐文章于 2023-01-17 15:26:04 发布

阅读量163

点赞数

文章标签： css 前端学习

本文链接：https://blog.csdn.net/anpeihang/article/details/125747768

版权

CSS使样式与结构分离，HTML负责结构，CSS负责样式，而选择器就是两者的纽带。

标签选择器

标签选择器也成为元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有这类的标签。

span{
	color:red;
}

标签选择器会选择中所有的标签，与标签对所在的深浅无关。由于标签选择器覆盖的范围非常大，通常用于标签的初始化。
如：

ul{
	/*去掉无序列表的小圆点*/
	list-style:none;
}
a{
	/*去掉超级链接的下划线*/
	text-decoration:none;
}

CSS可以使用#前缀，选择指定id的标签。（注意，id属性只能唯一）

#p1{
	color:red;
}

Class选择器

使用.前缀选择指定class标签

.warning{
	color:red;
}

相比于id标签，class标签较为灵活

多个标签可以命名为相同的类名
同一个标签可以属于多个类

<body>
    <p>段落</p>
    <p class="warning">warning类</p>
    <p class="warning spec">属于多个类</p>
    <p class="spec">spec类</p>

    <ul>
        <li>列表项</li>
        <li class="warning">相同类名的列表项</li>
        <li>列表项</li>
        <li class="warning spec">列表项</li>
    </ul>
</body>

原子类

在做网页项目时，可以将所有的字号、颜色等设置为单独的类。

<p class="fs18 color-green">18号文字</p>
<p class="fs26 color-blue">26号文字</p>

复合选择器

选择器之间可以任意搭配、结合，形成复合选择器。

后代选择器

示例：

/*选择box标签内部的类名为spec的标签*/
.box spec {
            color: red;
}

注意：选中的是内部所有的标签。

交集选择器

h3.spec {
/*选择有spec类的h3标签*/
     font-style: italic;
}

并集选择器

ul, ol {
/*选择所有ol和ul标签*/
  list-style: none;
}

伪类

伪类用来指定要选择的元素的特殊状态。
a标签伪类的书写按照“爱恨准则”的顺序，否则会有伪类不生效。
在这里插入图片描述


        a:link {
            color: dodgerblue;
        }

        a:visited {
            color: darkgoldenrod;
        }

        a:hover {
            /* 背景颜色 */
            background-color: gold;
        }

        a:active {
            font-size: 50px;
        }

元素关系选择器

子选择器

使用> 符号分隔两个单位，只匹配直接的后代元素。
在这里插入图片描述

相邻兄弟选择器

img紧跟着的段落将被选中。
在这里插入图片描述

通用兄弟选择器

p元素之后的所有同层级span元素。
在这里插入图片描述

序号选择器

表示选择当前元素的第几个，如first-child、last-child等。

first-child表示“选择第一个子元素”；
last-child表示“选择最后一个子元素”；
nth-child()表示“可以选择任意序号的子元素”，可以写成an+b的形式，表示从b开始每a个选一个，2n+1与odd表示奇数，2n与even表示偶数；
nth-of-type()表示“可以选择任意序号的该类型元素”，因为nth-child()会出现不会选中的情况。
nth-last-child()和nth-last-of-type()是倒数选择。

属性选择器

举例：

/*选择有alt属性的img标签*/
img[alt] {
   border: 3px solid red;
}
/* 
    [alt] 有这个属性
    [alt = ""] 精确匹配
    [alt ^= "abc"] 开头匹配
    [alt $= "abc"] 结尾匹配
    [alt *= "abc"] 任意位置匹配
    [alt |= "abc"] abc-开头
    [alt ~= "abc"] abc为空格分开的独立部分
*/