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.后代选择器

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

例:

<style type="text/css">
    .div1 a{
        font-size: 28px;
    }
</style>

 

<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">
       <!--<p> 预计多福多寿大家哦啊回复啥都发说的那个<a href="E102-03-02.html">25℃</a>asfg</p>-->
        <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.伪元素选择器:

(1)需要设置特殊效果的内容放到一个元素(标签)里面span

(2)在添加一个class,对class设置特殊样式。

p:first-letter{}

p:first-line{}

p:before{}

p:after{}可以增加任意元素,位置末端。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值