CSS选择器

最新推荐文章于 2024-08-10 22:43:21 发布

D-onnie

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量80

点赞数

分类专栏： CSS选择器文章标签： css

本文链接：https://blog.csdn.net/qq_43473027/article/details/115827156

版权

CSS选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS选择器

1. 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

可以将某个样式从一个元素切换到另一个元素。

假设您决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器改为 p：

html {color:black;}
p {color:gray;}
h2 {color:silver;}

示例：

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p {
				color: #00BFFF;
			}
			h1{
				color: #008000; font-size: small;
			}
		</style>
		<title></title>
	</head>
	<body>
		<p>你好</p>
		<h1>这是元素选择器写法</h1>
	</body>

效果：
在这里插入图片描述

2. 类型选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

上面的例子表示，所有拥有 center 类的 HTML 元素都是文本居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。

示例：

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.center {
				color: #008000;
				font-family: "arial narrow";
				font-style: initial;
			}
		</style>
		<title></title>
	</head>
	<body>
		<h1 class="center">
			This heading will be center-aligned
		</h1>
		<p class="center">
			This paragraph will also be center-aligned.
		</p>
	</body>

效果：
在这里插入图片描述

3.ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注意：id 属性只能在每个 HTML 文档中出现一次。

示例：

	<head>
		<meta charset="UTF-8">
		<title>标题</title>
		<style>
			#a {
				color: blue;
			}

			#b {
				color: #7CFC00;
				font-style: oblique;
			}
		</style>
	</head>
	<body>
		<h3 id="a">此段落样式遵从a选择器</h3>
		<p id="b">此段落遵从b选择器</p>
	</body>

效果：
在这里插入图片描述
拓展：

类选择器和ID选择器的对比

id的优点（class的缺点）：

id写在css用"#“选择器，class写在css中用”."选择器。

"#“选择器的优先级高于”."选择器，所以当你需要提升优先级的时候，id标签，或者id容器内的标签将是很容易和有效的。而class标签，或者class容器内的标签将可能导致优先级的提升失败。

id的缺点（class的优点）：

id是唯一的，所以它的可复用性是很差的，而class是可以复用的。所以如果一块东西是多个页面，甚至一个页面都会使用多次的，那么一定要使用class来作为样式选择器。

id是唯一的，当一个控件的id的产生是不可控的，那么这个id选择器将失去意义，但是任何一个控件即使是动态产生的，他的cssClass仍然是可定制的，所以当你的这个标签需要用服务器端控件替代的时候，而服务器端控件的id是不确定的，那么请使用class选择器，这样只要将服务器端控件的cssClass设为你class选择器的名称即可。

4.通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器（universalselector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

例如，下面的规则可以使文档中的每个元素都为红色：

* {color:red;}

这个声明等价于将元素中的选择器进行分组。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为
red。

示例：

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        * {
            color: blue;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落</p>
<h2>我是标题</h2>
</body>

效果：
在这里插入图片描述

通配选择器是对所有的标签进行修改

5.派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

请注意li <strong> 上下文关系：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

6.CSS 后代选择器

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

当然，您也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。

7.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

为了和我们刚才学的类选择器相区别，类选择器是一个点比如 .demo { } 而我们的伪类用 2个点就是冒号比如 :link{ }

8.链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接已经点击过的状态*/
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接点击不松开的时候显示的状态 */

注意写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。 love hate 爱上了讨厌记忆法

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

9.结构(位置)伪类选择器（CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式

li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}
even(可以选择所有偶数的标签) odd(可以选择所有奇数的标签) n(从0开始 到最后一个全选)
2n 2n+1 3n

10.目标伪类选择器(CSS3)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {
		color: red;
		font-size: 30px;
}

D-onnie

关注

0
点赞
踩
0

收藏

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

CSS选择器1. 元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：html {color:black;}h1 {color:blue;}h2 {color:silver;}可以将某个样式从一个元素切换到另一个元素。假设您决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器改为 p：html {colo
复制链接

扫一扫

专栏目录