CSS的选择器

最新推荐文章于 2022-11-05 22:01:04 发布

迪卢克的现任

最新推荐文章于 2022-11-05 22:01:04 发布

阅读量312

点赞数 2

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

本文链接：https://blog.csdn.net/m0_53644435/article/details/120740011

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细讲解了CSS选择器（包括属性选择器、关系选择器和伪类选择器）的原理和实战示例，帮助理解如何精确定位和样式化网页元素。从基本的标签匹配到复杂的兄弟选择，再到超链接状态的控制，内容涵盖了CSS定位的方方面面。

摘要由CSDN通过智能技术生成

一、什么是选择器？

在CSS中定位页面中的标签(控件)

二、CSS的属性选择器

类型	描述
标签名[属性名]	选择含有给定属性的标签
标签名[属性名=值]	选择含有给定属性值的标签
标签名[属性名^=值]	选择给定属性值是以某个字符开头的
标签名[属性名$=值]	选择给定属性值是以某个字符结尾的

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cssyangshi</title>
</head>
<style>
    /* 选择带有title属性 */
    div[title]{
        color: darkseagreen;
        font-size: 25px;
    }
    /* 选择带有title属性并且其属性为hz的组 */
    div[title='hz']{
        font-size: 30px;
        font-family: '隶书';
    }
    /* 选择title属性以bj开头的div */
    div[title^=bj]{
        font-size: 30px;
    }
    /*选择title属性以city结尾的div*/
    /* div[title$='city']{
        font-size: 55px;
    } */
    /*选择title属性包含z_的div*/
    div[title*='z_']{
        font-family: '隶书';
    }
</style>
<body>
    <div id="d1">西安邮电大学</div>
    <div id="d2">西安邮电大学</div>
    <div title="xa">西安市</div>
    <div id="cd">成都市</div>
    <div title="hz">杭州市</div>
    <div class="nj">南京市</div>
    <div title="bj_city">北京市</div>
    <div title="gz_city">广州市</div>
</body>
</html>

三、CSS的关系选择器

1.子元素选择器

子元素择器主要用来选择某个元素的第一级子元素，表示为父标签 > 子标签。

例如：

div>p{
属性值
}

表示选择div标签下所有的p标签

2.相邻兄弟选择器

（1）临近兄弟选择器

同一个父元素、第二个元素必须跟在第一个元素之后，使用加号“+”来链接前后两个选择器，表示为

div+p{
        属性值
    }

表示选择div后第一个p标签

（2）普通兄弟选择器

A~bA元素后所有的b元素

div ~p{
       属性值
    }

表示选择div的所有兄弟标签p标签

3.代码举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 选择div下所有的p标签：子元素选择器 */
    /* div>p{
        color: lightpink;
    } */
    /* 选择div后第一个p标签：临近兄弟关系 */
    /* div+p{
        color: lime;
    } */
      /* 选择div的所有兄弟标签p标签：普通兄弟关系 */
    div ~p{
        color: lime;
    }
    
</style>
<body>
  <div>
      <p>天王盖地虎</p>
      <p>欲买桂花同载酒</p>
      <p>刘强东</p>
  </div>
  <p>宝塔镇河妖</p>
  <p>天动万象</p>
  <br><br>
  <span>韬玉之石</span>
  <br>
  <div id="gl">可明八方</div>
  <div class="hm">灿若天星</div>
  <div >纵横无双</div>
  <div id="parent">
      <p>天动万象</p>
      <p>山海化形</p>
      <p>荒地生星</p>
      <p>灿若烈阳</p>
     <h1>钟离</h1>
    </div>
</body>
</html>

几个选择器都已经给出了了代码示例可以一一尝试，这里就不放效果图了。

四、伪类选择器

1、超链接有关的伪类选择器

选择器	描述
:hover	当鼠标悬停在目标对象上时
a:visited	表示已经访问过的超链接
a:link	超链接未被访问的样式
a:active	激活超链接时

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    a:link{/*超链接未被访问的样式*/
        color: yellowgreen;
    }
    a:visited{/*表示鼠标点击连接后，链接字体会变大，且会变成蓝绿色*/
    font-size: 55px;
    color: teal;
}
a:hover{/*表示鼠标悬停在连接上时，链接会变大，且会变成番茄红*/
    font-size: 25px;
    color: tomato;
}
a:active{/*表示鼠标点击连接时，链接会变成棕色*/
    color: saddlebrown;
}

</style>
<body>
    <a href="#">百度</a>
    <br>
    <a href="#">搜狐</a>
    <br>
    <a href="#">360</a>
</body>
</html>

截图效果不明显：

2.其他伪类选择器

选择器	描述
:root	匹配文档的根元素,页面的根元素是<html>，该选择器设置的样式对页面的所有元素均有效
:not(element)	匹配不是指定元素的元素
:only-child	匹配只有一个子元素的元素
:first-child	匹配父元素中的第一个子元素
:last-child	匹配父元素中的最后一个子元素
:nth-child(n)	匹配父元素中正数第n个元素
:nth-last-child(n）	匹配父元素中倒数第n个元素
:before	在匹配的元素之前添加指定的内容,要和content结合使用
:after	在匹配的元素之后添加指定的内容

还有更多的属性可以在

CSS calc() 函数查找

迪卢克的现任

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的选择器

一、什么是选择器？在CSS中定位页面中的标签(控件)二、CSS的属性选择器类型描述标签名[属性名] 选择含有给定属性的标签标签名[属性名=值] 选择含有给定属性值的标签标签名[属性名^=值] 选择给定属性值是以某个字符开头的标签名[属性名$=值] 选择给定属性值是以某个字符结尾的 ...
复制链接

扫一扫

专栏目录