初识CSS选择器
CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。
CSS标签是由键值对的模式来排列的。
height:100px; /*height:键 100px:值 意识是高度设置为100px*/
CSS三大特征👍
学习CSS之前,先认识一下CSS的三大特征:
层叠性
对同一个标签使用了同一种样式更改时,决定标签最后显示的样式是使用就近原则法,不会对之前修改的样式产生冲突
继承性
子标签会继承父标签的某些样式,之前介绍HTML标签中,标签中互相存在着兄弟关系和父子关系,这种样式的继承是在于父子关系之间的
优先级
如果选择器相同的情况下,会执行层叠性的规则,否则就是根据其权重来展示样式的。
CSS的三种使用方法👏
-
内部引入
(1) 这里可以将标签放在任何地方,不过一般是放在头部或者尾部
<style> div { height: 100px; width: 100px; background-color: orange; } </style>
-
内联引入
(1) 这里是对div 标签直接使用,其优先级大于其他标签
<div style="height: 100px; width: 100px; background-color: orange;">
我是一个盒子
</div>
-
外部引入
(1)创建一个以css结尾的文件,可以在文件中写入第一种方式的CSS样式,然后在head标签中引入文件。
<link rel="stylesheet" href="01.css">
虽然CSS有三种引入方式,不过最常使用的是内部引入和外部引入,因为看起来比较美观,修改时也比较简单。
CSS常见选择器👀
选择器,就是一个标签,在引入样式时指定的标签就称为选择器。
标签选择器
标签选择器就是使用HTML标签名来选择元素来进行样式处理,用于选取页面中所有具有相同标签的元素,标签选择器可以匹配所有的HTML标签,是最常见,最基本的标签之一。
举个例子🎁:
div {
background-color: orange;
}
这个CSS规则会选中HTML文档中所有的div
元素,然后将他们的背景色设置为橙色.
类选择器
每个标签都可以设置1个或多个类,比如给一个p
标签设置一个名为message
的类:
<p class="message">
我是一段文字
</p>
类选择器就是使用标签中的类名所扩展的一种选择器,要使用选择器中的样式就必须在这个标签中引用这个类。注意,类选择器和标签选择器写法也不同。
举个例子🎁:
.message {
color:blue;
}
使用了这个类的文字都会变成蓝色。
id选择器
每个HTML标签可以只能设置一个id
,id
具有唯一性,所以使用这个样式一般是给特定的元素设置的。
<p id="textid">测试id选择器</p>
这种选择器很少会使用,不过在特定时期会对页面有一个很大的作用,id选择器的使用方法也与其他的不同,在id名
前加#
作为该选择器的名称。
举个例子🎁:
#textid {
color: pink;
}
将这个id的元素的文字颜色设置成粉色。
后代选择器
允许根据类名或标签名嵌套在其他元素中的位置来选中元素,这意味着可以选择父元素下的特定后代元素或者元素集合,后代选择器可以嵌套许多层。
举个例子🎁:
<!-- HTML部分 -->
<div class="parent-element">
<p>子元素p标签</p>
</div>
<!-- CSS部分 -->
<style>
.parent-element p {
color: chartreuse;
}
</style>
这个代码的意思是将类名为parent-element
父元素下的所有p
标签元素中文字颜色改为chartreuse
。
举个例子🎁🎁:
<!-- html -->
<div class="parent-element">
<p>
<a href="#">孙子元素a标签</a>
</p>
</div>
<!-- CSS -->
<style>
.parent-element p a {
color: chartreuse;
}
</style>
这个代码的意思是将类名为parent-element
父元素下的所有p
标签中所有a
标签元素中文字颜色改为chartreuse
。
属性选择器
属性选择器可以根据元素的属性和值来选择元素。这些选择器对于选中元素有特定的属性,并且这个属性还可以等于一个值或包含一个值。
-
等于选择器
=
选中的属性包含指定的属性。
举个例子🎁:
<!-- html --> <div> 效果组: <input type="text"><br> 对比组: <input type="email"> </div> <!-- css等于选择器 --> <style> input[type="text"] { background-color: brown; } </style>
这个选择器的含义是将
input
标签中所有将type
设置成text
属性的标签背景颜色改为brown
。 -
包含选择器
*=
选中的属性包含指定元素。
举个例子🎁:
<!-- html --> <div> 效果组:<a href="www.google.com">谷歌</a><br> 对比组:<a href="www.baidu.com">百度</a> </div> <!-- css包含选择器 --> <style> a[href*="google"] { font-size: 50px; } </style>
将
a
标签中所有href
属性值包含google
字样的字体属性设置为50px
的大小。 -
开始选择器
^=
选择元素属性值以指定开头的元素。
举个例子🎁:
<div> 效果组:<a href="https://www.google.com">谷歌</a><br> 对比组:<a href="www.baidu.com">百度</a> </div> <!-- css开始选择器 --> <style> a[href^="https://"] { color: #46eb5c; } </style>
将
a
标签中的href
属性中以https://
开头的元素中文字颜色改为绿色。 -
结束选择器
$=
这个与前者真好相反,这个是将属性值中以这个指定的字符串结尾的元素。
举个例子🎁:
<!-- html --> 效果组:<img src="../boy.png" style="width: 100px;"> 对比组:<img src="../book1.jpg" style="width: 100px;"> <!-- css结束选择器 --> <style> img[src$=".jpg"] { border: 2px solid red; } </style>
给
.jpg
结尾的属性加边框,前面是边框像素,第二个是边框样式,最后一个是边框颜色。 -
匹配选择器
|=
选择具有前缀属性的元素,或者是以指定值开始和连接字符为
-
属性值的元素。举个例子🎁:
<!-- html --> <div class="parent"> <p> 属性匹配 </p> </div> <!-- css匹配选择器 --> <style> div[class|="parent"] p { font-size: 30px; } </style>
选择
class
所有具有parent
开头或者只是parent
,并包含在div
中所有的p
标签中所有的字体设置为30px
复合选择器
复合选择器是由多个简单选择器(如:标签,类,id,属性,等)组合在一起的选择器,用来更精准的匹配HTML元素,简单的几个选择器由空格隔开。
举个例子🎁:
<!-- html --> <div class="parent"> <p id='son'>匹配</p> <p>测试</p> </div> <!-- css复合选择器 --> <style> .parent p#son { font-size: 30px; } </style>
选择类名为
parent
的元素中所有p
标签中id
为son
的元素。文章来源:https://www.toymoban.com/news/detail-439506.html
CSS代码风格📜
虽然CSS是不区分大小写的,不过一般都是使用小写来编写CSS代码,这次的分享都在这里,其实我们编写css代码会经常忘记,不过没关系,业精于勤,忘记了可以去工具查找我们需要使用的标签即可,多动手,自然会手到擒来ヽ(≧□≦)ノ
!文章来源地址https://www.toymoban.com/news/detail-439506.html
到了这里,关于前端三剑客CSS篇——CSS选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!