CSS选择器

最新推荐文章于 2022-10-21 12:57:47 发布

HeWar_

最新推荐文章于 2022-10-21 12:57:47 发布

阅读量140

点赞数

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

本文链接：https://blog.csdn.net/HeWar_/article/details/120209258

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.基础选择器

【注意】相同的选择器不同的属性声明，不会被覆盖而是共同应用。

（1）通用选择器

`*`号，选择 html 文件内所有的元素 `* {样式声明}`

最常用的用法是`*{margin:0;padding:0}` 清除浏览器的内外边距。但它的缺陷是性能太低，所有的元素不论是否有内外边距都会渲染，但可以做练习时使用。

（2）元素选择器（标签选择器）

通过标签的名字来选择 html 元素，权重值为 1，比如：`div {样式声明}`

弊端是当很多相同标签并存的时候，就会出现没办法精准定位的情况

（3）id 选择器

给标签的前半部分增加一个属性 id 这个属性可以指定一个唯一的不重复的值，权重值 100

`<div id="abc">一个标签</div>`

`#abc {样式声明}`

id 名不能以数字开头，不建议使用中文命名，尽量见名知意

多个单词连接可以用- 、\_、驼峰

每个都有和其他重复的样式，使用 id 有几个弊端，过于订制化导致每一个元素都要有自己的 id 有一套自己的样式，代码量过大重复性过大。明明有重复的内容，但通过 id 选择器只能是一个一个的书写其样式，又不是很智能

（4）类选择器【重要】

类选择器先要使用标签的`class`属性赋值，类选择器的权重值 10

`<div class="abc">一个标签</div>`

`.xxx {样式声明}`

类名不能以数字开头，不建议使用中文命名，尽量见名知意，多个单词连接可以用- 、\_、驼峰

一个元素可以创建多个类名，每个类名之间用空格分开`<div class="abc zyx">一个标签</div>`

易错点：

忘记给元素增加 id 或者 class 属性就直接开始写 css 样式

class 的点，很容易忽略那个点

先写类名还是先定义 class 属性

<style>
	.color-r {color: red;}
	.color-b {color: blue;}
	.font-20 {font-size: 20px;}
	.font-30 {font-size: 30px;}
</style>
<body>
	<p class="color-r font-20">p我想20号字红色</p>
	<p class="color-g font-20">p我想20号字绿色</p>
	<p class="color-r font-30">p我想30号字红色</p>
</body>

（5）群组选择器

多个选择器名用逗号连接，可以一起完成共同样式的指定`div,p,span {color: red;}`

群组选择器并不是只能使用相同类型的选择器，可以是各种选择器一起参与`#mydiv.b,h4 {color: blue;}`

2.关系选择器

在 html 结构中存在三种关系，“兄弟关系”、“父子关系”、“后代关系”

（1）后代选择器

先代元素（祖先）选择器写在前面，之后写一个空格，空格后写后代元素选择器。

`祖先元素后代元素 {样式声明}`

需要注意的是空格不要忘记，祖先元素不一定是父级和祖父级还可以再往上的级别都可以

但有弊端就是级别不同的相同选择器名称，容易造成不想要的结果，因此当你需要更深的层次时，可以继续用空格加入更深层的后代。

（2）子代选择器

可以选中某个元素的直接子元素，与后代不同的是子代选择器的范围更小。

`父级元素 > 子级元素 {样式声明}`

层级可以向后代选择器一样延申,区别就是子代是>连接,后代是空格连接`.baba > div > div {字体颜色;}`

（3）兄弟选择器

同一层的关系选择器，可以选中该元素后面的兄弟元素。

`某元素选择器 ~ 该元素后面的所有兄弟 {样式声明}`

需要注意的是兄弟选择器可以选到该元素后面的兄弟，而选不到之前的。

（4）相邻选择器

同一层的关系选择器，可以选中参照的元素后面紧挨着被参照元素的选择器。

`某元素选择器 + 该元素后面的唯一相邻的兄弟 {样式声明}`

需要注意的是，相邻兄弟选择器只能选中“紧紧相邻”的一个兄弟

3.伪类选择器

伪类选择器的作用是匹配同一个元素，不同状态下的样式

选择器:伪类 {样式声明}`

a:link {样式声明}` 没有被打开之前，或者没被打开过（`a:link`特有）

a:visited {样式声明}` 访问过后（`a:visited`特有）

div:hover {样式声明}` 鼠标悬停

p:active {样式声明}` 点击激活

input:focus {}`属性代表 input 标签获取焦点的样式(`<input/>`标签的属性)

input:cheaked {}`属性代表 input 单选、复选等 type 类型被选中后的样式(`<input/>`标签的属性)

a:link {
	/* 没有被打开之前，或者没被打开过 */
	color: green;
}
a:visited {
	/* 访问过后 */
	color: green;
}
div:hover {
	/* 鼠标移入标签后展现 */
	background-color: aqua;
}
p:active {
	/* 鼠标按住元素不松手 */
	background-color: blueviolet;
}

4.伪元素选择器

CSS 伪元素用于设置元素的“指定部分”的样式

::before 表示元素最前边的部分，紧随着标签的部分

::after 表示元素的最后边的部分，紧随着标签的部分

::before{content:""}:after{content:""} content 必须写

- 两个冒号 (`::`) 而不是一个冒号 (`:`)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。