CSS选择器

最新推荐文章于 2022-10-24 20:40:01 发布

柠檬甜味猫

最新推荐文章于 2022-10-24 20:40:01 发布

阅读量759

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/weixin_46634102/article/details/106163054

版权

一、什么是选择器？

每一条css样式声明（定义）由两部分组成，形式如下：

选择器{
	样式
}

在{}之前的部分是“选择器”，“选择器”是{}中的作用对象，例如：

p{
	color：blue；
}

表示字体为红色的样式作用于p选择器。

二、选择器的主要分类：

（1）基础选择器：标签选择器、类选择器、id选择器、通配符选择器。
（2）组合选择器：标签指定式选择器、后代选择器。
（3）属性选择器
（4）伪类选择器

基础选择器：
标签选择器也叫元素选择器。其实就是 html 代码中的标签，比如 < html >、< body >、< h1 >、< p >、< img >。
语法格式为：

html{
	属性1：属性值1；
	属性2：属性值2；
	...
}
...

类选择器：
类选择器，是对 HTML 标签中 class 属性进行选择。CSS 类选择器的选择符是 “.”。
类选择器命名规范：不能是纯数字，不能是标签名，不建议使用汉字。一般是点+对应样式描述。例如：.header-nav。
基本语法格式如下：

.header{
	属性1：属性值1；
	属性2：属性值2:；
	...
}

id选择器：
id选择器是对HTML标签中id属性进行选择，id选择器的选择符是“#”，任何元素都可以使用 id 属性设置唯一的 id 名称。这是选择单个元素的最有效的方式。
特别需要注意的是 id 选择器具有唯一性，也就是说同一个 HTML 页面不能有相同的 id 名称(使用多个相同的 id 选择器，浏览器不会报错但是不符合 W3C 标准)。
可以这样理解：一个人的名字（class 类名）可以有很多重名的，但是身份证号（id 名称）只能有一个唯一的，不能重复的。
基本语法格式如下：

#id{
	属性1：属性值1；
	属性2：属性值2：
	...
}

通配符选择器：
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{
	属性1：属性值1；
	属性2：属性值2；
}

标签指定式选择器：
标签指定式选择器又称交集选择器，由两个选择器构成，其中一个必须是标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style type="text/css">
        p{
            color:yellow;
        }
        p.bcg{
            background-color:rgb(67, 217, 228);
        }
        p#one{
            background-color: violet;
        }
    </style>
</head>
<body>
    <p class="one">天天向上</p>
    <p id="two">我爱学习</p>
</body>
</html>

后代选择器：
后代选择器又叫包含选择器，用来选择元素或者元素的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成了外层标记的后代。
例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p > strong {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>
      <strong>好好学习</strong>
      <strong>好好学习</strong>
    </p>
    <p>
      <em>
        <strong>好好学习</strong>
        <strong>好好学习</strong>
      </em>
    </p>
  </body>
</html>

并集选择器：
并集选择器就是通过各个选择器用“，”连接而成的，任何形式的选择器（包括标签选择器，类选择器，id选择器等）都可以作为并集选择器的一部分，如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。简单记忆为：和的意思。
属性选择器：
属性选择器是根据元素的属性或者属性值来选择元素，常用的集中属性选择器：
在这里插入图片描述
伪类选择器：
CSS 伪类用于向某些选择器添加特殊的效果。
几个常用的伪类：
（1）:link 应用于未被访问过的链接。IE6 不兼容，解决此问题，直接使用 a 标签。
（2）:hover 应用于有鼠标指针悬停于其上的元素。在 IE6 只能应用于 a 连接，IE7+ 所有元素都兼容。
（3）:active 应用于被激活的元素，如被点击的链接、被按下的按钮等。
（4）:visited 应用于已经被访问过的链接。

柠檬甜味猫

关注

1
点赞
踩
1

收藏

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

一、什么是选择器？每一条css样式声明（定义）由两部分组成，形式如下：选择器{ 样式}在{}之前的部分是“选择器”，“选择器”是{}中的作用对象，例如：p{ color：blue；}表示字体为红色的样式作用于p选择器。二、选择器的主要分类：（1）基础选择器：标签选择器、类选择器、id选择器、通配符选择器。（2）组合选择器：标签指定式选择器、后代选择器。（3）属性选择器（4）伪类选择器基础选择器：标签选择器也叫元素选择器。其实就是 html 代码中的标签，比如 &
复制链接

扫一扫