CSS基础知识（四）--选择器

最新推荐文章于 2022-02-09 21:24:14 发布

原创最新推荐文章于 2022-02-09 21:24:14 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文详细介绍了CSS中的各种选择器，包括元素、ID、类、属性等选择器的使用方法及示例，帮助读者掌握如何精确地定位和设置网页元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所谓选择器，指的是选择施加样式目标的方式。

1.元素选择器

用标签名作为选择器，选中所有相应的元素

例：

<styletype="text/css">
        div{
            font-size: 24px;
            color: red;
        }
        p{
            font-size: 30px;
            color:blue;
        }
    </style>
</head>
<body>
    <div>元素选择器</div>
    <p>元素选择器1</p>
    <p>元素选择器2</p>
</body>

2.id选择器

id选择器就是根据id来选择元素。其样式定义形式为：

#id{}

例：

<styletype="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <divid="div1"></div>
    <divid="div2"></div>
</body>

3.类选择器

根据class属性来选择元素，其定义形式为：

.className{......}

例：

<styletype="text/css">
        .even{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .odd{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <divclass="odd"></div>
    <divclass="even"></div>
    <divclass="odd"></div>

</body>

4.属性选择器

根据某个属性的特性（比如有无、值）来选择

根据有无某属性来选择：

例：

<styletype="text/css">
        [title]{
            width: 100px;
            height: 50px;
            background-color: red;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>

</body>

从结果可以看出，所有具有title属性的元素都应用了红色背景的样式。

根据属性的值来选择

例：

<styletype="text/css">
        [title = 'div2']{
            width: 100px;
            height: 50px;
            background-color: red;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>

</body>

从结果可以看出，只有第二个div应用了红色背景样式，因为只有第二个div的属性等于div2.

title ^=’div’：选中title属性值以“div”开头的元素。

title $=’div’：选中title属性值以“div”结尾的元素。

title *=’div’：选中title属性值包含“div”的元素。

5.后代选择器

后代选择器：可以选择一个元素的后代元素，这个后代元素包括儿子、孙子、儿子的孙子、孙子的儿子……

例：

<body>
    <h1>dkajfpsd</h1>
    <div class="div1">
        预计多福多寿大家哦啊回复啥都发说的那个<ahref="E102-03-02.html">25℃</a>asfg
    </div>
</body>

6.子元素选择器

子元素选择器：通过某一个元素选中的直接后代（子元素）。

写法：E > F

7.并选择器

并选择器：将相同的样式放在一起，类名直接用英文逗号分割

例：

.div1,.div2{
    width: 100px;
    height: 100px;
  position: relative;
}

8.通配符选择器

通配符选择器可以选中页面所有的标签。（通常用来去除默认布局）

例：<styletype="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <h1>dkajfpsd</h1>
    <div class="div1">
       <p> 预计多福多寿大家哦啊回复啥都发说的那个<a href="E102-03-02.html">25℃</a>asfg</p>
        <ahref="http://www.baidu.com">啪啪啪啪</a>
    </div>
</body>

9.兄弟选择器

例：

.go + a{
font-size: 50px;
}

<body>
    <h1>大幅度神功风分公司唉是怪放到</h1>
    <div class="div1">
       
        <a class="go"href="http://www.baidu.com">哈哈哈哈</a>
        <ahref="http://www.baidu.com">哈哈哈哈2</a>
        <ahref="http://www.baidu.com">哈哈哈哈3</a>
    </div>
</body>

10.伪类、伪元素选择器

伪类选择器：根据元素不同的状态，自动选择不同的样式。

1.伪类选择器：

（1）根据不同的状态，自动选择不同的样式。

（2）直接添加一个class，给这个class设定特殊的样式。

li：first-child{}

a:hover{}（鼠标悬停的时候添加样式）

a：active{}（鼠标点击时添加样式）

a：link：{}（链接地址未被访问时候添加的状态。必须设置href属性）

a：visited{}（链接地址点击之后添加的颜色。必须设置href属性）

input：focus{}（拥有键盘输入获取焦点时候添加的样）

2.伪元素选择器：