css常用选择器和优先级，css外链式与内嵌式优先级_CSS学习

当前位置：网站建设 > 技术支持

css常用选择器和优先级，css外链式与内嵌式优先级_CSS学习

资料来源：网络整理时间：2023/3/4 1:58:48 共计：3598 浏览

1、css常用选择器和优先级，css外链式与内嵌式优先级？

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

1：内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red";font-size:12px>这里文字是红色。</p>

2:嵌入式，嵌入式css样式，就是可以把css样式代码写在 <style type="text/css">XXX</style>标签之间。

3:外部式css样式，写在单独的一个文件中.

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

优先级：内联式 > 嵌入式 > 外部式，但是嵌入式> 外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

2、web前端怎么入门学习？

伴随着近些年web前端开发的迅速发展，有愈来愈多的小伙伴们想要来到前端工程师制造行业当中，可是也有许多小伙伴们在迟疑该不该进入这一行业，如果想进入这一行业，必须要知道如何学习web前端开发的专业知识。

那么前端学习如何入门呢？

这是每一个想要进入道前端行业必须要经历的过程，不管怎么样这一关是免不了的，所有对于如何前端入门，是我们每个小伙伴必须了解的。现阶段的方式一般是有俩种，一种是自学进入这个行业，另一种就是要通过前端培训学习进入这一行。特别是对于没有基础的小伙伴们来说要怎么开始学习呢?大多数人选择的是前端培训学习的方式，这样的方式有几个优点，那就是时间快，效率高，学习的知识系统。

由于大家基本都是零基础参加web前端培训学习的，所以在学习的过程中可能会有一点儿难度，大家可以根据自己的情况来制定一个计划来进行学习，好的学习计划加上良好的执行力可以让我们事半功倍的学习。最重要的是在前端培训学习的过程中一定要努力，遇到不懂的问题及时和老师沟通，自习学习时多加练习，多喝同学交流。只要努力学习入门是比较容易的。

3、html5的CSS3选择器中？

选择父级下第一个元素和最后一个元素如：

aaaabbbbcccccdddd.list li:first-child{color:#f00;} //只有aaa变红色.list li:last-child{font-weight:bold;} //只有dddd变粗体

4、四路选择器功能表？

四路选择器简介:

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

1.1 类别选择器

类选择器根据类名来选择

前面以”.”来标志，如：

.demoDiv{

color:#FF0000;

}

在HTML中，元素可以定义一个class的属性。

如：

这个区域字体颜色为红色

</div>

同时，我们可以再定义一个元素：

这个段落字体颜色为红色

</p>

最后，用浏览器浏览，我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。

上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那得一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。

我们可以改成这样来定义。

<div>

这个区域字体颜色为红色

</div>

同时，我们可以再定义一个元素：

<p>

这个段落字体颜色为红色

</p>

</div>

这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。

1.2 标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签

采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总

是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里

都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：

font-size:12px;

background:#900;

color:090;

}

复制代码则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)

，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改

background属性就可以了，就这么容易！

1.3 ID选择器

根据元素ID来选择元素，具有唯一性。

前面以”#”号来标志，在样式里面可以这样定义：

#demoDiv{

color:#FF0000;

}

这里代表id为demoDiv的元素的设置它的字体颜色为红色。

我们在页面上定义一个元素把它的ID定义为demoDiv，如：

这个区域字体颜色为红色

</div>

用浏览器浏览，我们可以看到因为区域内的颜色变成了红色

再定义一个区域

<div>

这个区域没有定义颜色

</div>

用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。

1.4 后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。

如：

<style>

.father.child{

color:#0000CC;

}

</style>

黑色

<label class="child">蓝色

</label>

</p>

这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。

后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：html中的标签属性大全，html语言里的标签_html标签 | ·下一条：css的多种选择器的使用3，css分类_CSS学习