CSS选择器总结~

爱吃火锅的仙女

已于 2022-05-25 16:40:04 修改

阅读量1k

点赞数

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

于 2022-05-04 16:59:19 首次发布

本文链接：https://blog.csdn.net/mango_12345/article/details/124571794

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在前端页面中，CSS起到了对html骨架的装饰作用。通过使用 CSS 我们可以大大提升网页开发的工作效率，同时能够控制多重网页的样式和布局。CSS的基本语法为：

选择器 {属性：属性值；属性：属性值}
<style>
	p
	{
	color:red;
	text-align:center;
	} 
</style>
一般将style标签放置在head标签中

CSS的创建方法有以下三种：

外部样式表
档样式需要用到很多页面上时，可以通过link或@import引入外部样式文件。一般多使用link而不是import。

   <!-- css外部样式1 -->
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <!-- css外部样式2 -->
    <style>
        @import url(./css/index.css);       
    </style>

此时将CSS文件单独放置。文件中的描述遵循CSS的基本语法。

内部样式表
当单个文档需要特殊的样式时，使用内部样式表。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head

行内样式表
当某一个样式需要在一个元素上应用一次时，需要用到行内样式表。将style作为属性直接写在标签后。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

样式表的引用也有优先级，比如对于某一类选择器，既用到了外部样式又用到了行内样式，那么到底该遵循哪一种呢？一般这种情况遵循就近原则。即优先级顺序为：
！important＞行内＞内部＞外部
对于前面加了！important修饰的，则优先级最大。

p {
  background-color: red !important;
}

注意：尽量不使用important

前面大致介绍了CSS的创建规范，接下来重点介绍CSS的各类选择器。这里总结了七种CSS选择器用法~

1.标签选择器

对选择的标签元素设置CSS样式。如div，p，a，h1等

<style>
p {
  text-align: center;
  color: red;
} 
</style>

2.类选择器

对某一类有特定class属性的元素设置CSS样式
用.class表示

.center {
  text-align: center;
  color: red;
}
</style>

则在html书写中，需要对元素加上设置的类名。如：

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>

3.id选择器

元素id一般是唯一的。使用#id设置CSS样式。如

<style>
#para1 {
  text-align: center;
  color: red;
}
</style>

同样，在元素前应该指出id=“paral”

4.通用选择器

通用选择器使用*选择页面上的所有元素。可以用来设置元素标签的内外边距

*{margin：0；padding：0} 
/*代表清除所有元素的默认边距值和填充值*/

5.群组选择器

当有多个元素需要设置为同一种样式时。多个选择器用逗号分隔。

 <style>
        h1,h2,p {color:yellow}
 </style>

6.后代选择器

如果在群组选择器中忘了写逗号，则又会产生一种新的选择器，叫后代/包含选择器
后代选择器。此时必须是div下的p标签内容发生样式改变。如果是直接单独一个p标签则不会产生变化。匹配时，从右向左匹配。

  <style>
        div p {color:yellow}
    </style>

如果将空格换为“＞”号，则表示子代选择器。只能选择自己的下一级子标签。若里面继续套标签则没有用。

7.伪类选择器

伪类选择器主要应用于a链接身上。包含以下四种，这四种伪类选择器必须按照顺序写，否则可能导致样式失效。

    <style>
        /* 初识状态 */
        a:link{color: red;}
        /* 访问过的状态 */
        a:visited{color: yellow;}
        /* 鼠标悬停 */
        a:hover{color:yellowgreen;}
        /* 点击激活 */
        a:active{color: springgreen;}
    </style>

同时，为了简化代码，可以将相同的样式提出来放进a标签中。

7.选择器的权重

当多个选择器选中同一个元素时，且都定义了样式，如果属性发生了冲突，则应该选择权重高的来执行。
权重大小：
！import＞行内样式＞包含选择器＞id选择器＞class选择器＞标签选择器

CSS选择器解析规则：

当不同选择器的样式设置有冲突时，高权重选择器的样式会覆盖低权重选择器的样式。
相同权重的选择器，样式遵循就近原则。哪个选择器样式最后定义，就选择哪个样式。
需要注意，CSS具有继承性，即子标签会继承父标签的某些样式。但是继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

爱吃火锅的仙女

关注

0
点赞
踩
0

收藏

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

在前端页面中，CSS起到了对html骨架的装饰作用。通过使用 CSS 我们可以大大提升网页开发的工作效率，同时能够控制多重网页的样式和布局。CSS的基本语法为：选择器 {属性：属性值；属性：属性值}<style> p { color:red; text-align:center; } </style>一般将style标签放置在head标签中CSS的创建方法有以下三种：外部样式表档样式需要用到很多页面上时，可以通过link或@import引入外部样式文件
复制链接

扫一扫