前端夯实基础（五）--- CSS选择器及权重+彩蛋

最新推荐文章于 2024-05-12 09:05:16 发布

那等雨停吧

最新推荐文章于 2024-05-12 09:05:16 发布

阅读量156

点赞数

分类专栏： Front-End CSS 前端夯实基础文章标签： CSS 选择器权重样式表

本文链接：https://blog.csdn.net/WRian_Ban/article/details/99989024

版权

Front-End 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

CSS

17 篇文章 0 订阅

订阅专栏

前端夯实基础

9 篇文章 0 订阅

订阅专栏

CSS 参考手册+练习地址

1、三种样式表

区别于CSS放置的位置：

行内样式表

<h1 style="color:pink; height:20px"> 行内样式表 </h1>

内部样式表：位于 <head> 标签内部被<style>包裹。
```
<head>
<style>
	h1 {color:pink}
</style>
</head>
```
外部样式表:通过<link>标签，将外部样式文件链接到HTML文档中
```
<head>
	<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
```
其中：
- rel: 必要，规定当前文档与被链接文档之间的关系。stylesheet表示被链接的是样式表文件。

2、选择器及权重

CSS 选择器参考手册
为了将样式应用在特定的HTML元素上，而做的筛选工作，即称为选择器。

ID选择器 ，权重= 100
```
#title{
	color: pink;
}
```

属性选择器 ，权重= 10


[type="text"]  // 此处权重为10
{
  color: pink;
}

input[type="text"]  // 此处权重为10+1，因为使用了一个标签选择器，容易被忽略哦，哈哈哈哈~
{
  color: pink;
}

a[href][title] { // 还可以这样，虽然用得很少，
	color:red;
}

类名选择器 ，权重= 10
```
.title{
	color: pink;
}
```

伪类选择器 ，权重= 10
首个子对象::first-child

p:first-child{
	color: pink;
}
<div>
	<p>line1</p>
	<p>line2</p>
</div>

这样就不行

  	<div>
    	<hr/ >
    	<p>line1</p>
    	<p>line2</p>
    </div>

不过这样行

<div>
	<p>line1</p>
	<p>line2</p>
</div>
<hr />
<div>
	<p>line1</p>
	<p>line2</p>
</div>

充分说明，:first-child选择的是首个子对象。
伪类还有锚点伪类

标签选择器 ，权重= 1
```
h1{
	color: pink;
}
```

3、妙用选择器

相邻兄弟选择器 +
选择 本人（第一个li） 的兄弟

	li + li {
		color: pink;
	}
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>

应用：设置nav子元素的间隔

li + li {margin: 0 0 0 15px}

4、彩蛋

想写个没有间隔的导航，然鹅，发现呈现的结果里怎么也去不掉一个间隙。

ul,li{
	padding: 0;
    margin: 0;
}
li{
	display:inline-block;
    background: skyblue;
    width: 50px;
    height: 20px;
}
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

在这里插入图片描述
这是由于</li> <li>间的换行符造成的。有两个方法去除间隙。

暴力破解法：不换行

  <ul>
    <li></li><li></li><li></li>
  </ul>

小仙女破解法：
```
ul{
	font-size: 0;   // hiahiahia~
}
```
以上效果皆能达到理想效果：
软软小可爱破解法：
```
ul li{
	float: left;   // hiahiahia~
}
```

那等雨停吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录