初识CSS选择器
文章目录
- 初识CSS选择器
- CSS三大特征👍
- CSS的三种使用方法👏
- CSS常见选择器👀
- 标签选择器
- 类选择器
- id选择器
- 后代选择器
- 属性选择器
- 复合选择器
- 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的元素。
CSS代码风格📜
虽然CSS是不区分大小写的，不过一般都是使用小写来编写CSS代码，这次的分享都在这里，其实我们编写css代码会经常忘记，不过没关系，业精于勤，忘记了可以去工具查找我们需要使用的标签即可，多动手，自然会手到擒来ヽ（≧□≦）ノ！
