CSS的选择器

最新推荐文章于 2023-06-22 15:09:42 发布

loser.loser

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量164

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_63569670/article/details/127776963

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.基本选择器

1.通用选择器

通用选择器（用星号*表示）与页面上的每个单个元素匹配。如果目标元素上存在其他条件，则可以省略通用选择器。

ps：此选择器通常用于从元素中删除默认的边距和填充，以进行快速测试。

*{
    color:red;
}

2.元素选择器

元素类型选择器将文档树中元素的每个示例与相应的元素类型名称进行匹配。

h1{
    color:red
}

3.id选择器

id选择器用于为单个或唯一元素定义样式规则。

id选择器的定义是一个井号（#），后跟ID值。

#text{
    color:red;
}

4.class类选择器

类选择器可用于选择具有class属性的任何HTML元素。具有该类的所有元素将根据定义的规则进行格式化。用一个句号（.）紧随其后的类值定义类选择器。

.text{
    color:blue;
}

二.组合选择器

1.包含（后代）选择器

即加入空格,用于选择指定标签元素下的后辈元素。

.first  span{color:red;}

2.子选择器

子选择器以“>”表示，子选择器是指定父元素包含下的子元素。

h1 > strong {color:red;}

3.相邻选择器

相邻选择器通过“+”分隔符进行定义，TA指定的元素关系是兄弟关系。

（选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素）

h1 + p {margin-top:50px;}

4.兄弟选择器

兄弟选择器的作用是查找某一个指定元素的后面的所有兄弟结点，以“~”表示。

（h1的下面的所有p都会具备该样式）

<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        *{
            margin: auto;
            text-align: center;
        }
        h1~p{
            color: #00796b;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="man">
    <span>hello</span>
    <h1>link</h1>
    <p>1</p>
    <p>2</p>
    <p>2</p>
    <p>2</p>
    <p>2</p>
</div>
</body>
</html>

5.分组选择器

分组选择器是以“,”分隔符进行定义。严格的来讲分组选择器不是一种选择器类型，而是一种选择器使用方法。当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码。

（所有样式都是灰色的）

body, h2, p, table, th, td, pre, strong, em {color:gray;}

三.属性选择器

1.五种写法

（1）[属性名] 选择含有指定属性的元素。
（2）[属性名=属性值] 选择含有指定属性和属性值的元素。
（3）[属性名^=属性值] 选择属性值以指定值开头的元素。
（4）[属性名$=属性值] 选择属性值以指定值结尾的元素。
（5）[属性名*=属性值] 选择属性值中含有某值的元素的元素。

        [title] {
            font-size: 35px;
            color: #00796b;
            font-weight: 100;
        }
 
        [title][href] {
            color: darkolivegreen;
            text-decoration: none;
        }
 
        /*E[attr="value"]*/
        [href="#well"] {
            font-size: 27px;
            color: red;
            text-decoration: none;
        }
 
        [href="#pick"] {
            font-size: 22px;
            color: green;
            text-decoration: none;
        }
 
        /*E[attr~="value"]*/
        [class~="important"] {
            font-size: 35px;
            color: blue;
        }
 
        /*E[att^=value]只要属性值里有这个value就行*/
        [class^="one"] {
            font-size: 12px;
            color: #999999;
        }
 
        /*E[att$=value]只要属性值的后缀是value就选中*/
        [class$="in"] {
            font-size: 32px;
            color: darkorange;
        }
 
        /*E[att*=value] 只要属性值里包含value就选中*/
        [class*="go"] {
            font-size: 15px;
            color: darkmagenta;
        }
 
        /*E[attr|="value"] 只要属性值是value或者以value-开头就选中*/
        [class|="demo"] {
            font-size: 35px;
            color: #00799b;
        }

四.伪类选择器(一般应用于超链接)

伪类的名称不区分大小写，但需要以冒号:开头。另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：

selector:pseudo-class {
    property: value;
}

伪类分为四种::link，:vistied，:hover和:active。

:link
作用：向未被访问的链接添加样式。

:vistied
作用：向已被访问的链接添加样式。

:hover
作用：当鼠标悬浮在元素上方时，向元素添加样式。

:active
作用：向被激活的元素添加样式。

ps:

若:link、:visited、:hover和:active一起使用，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后，即:link -> :visited -> :hover -> :active ，简记love hate。