CSS选择器的常见用法

  CSS(Cascading Style Sheet)，层叠样式表,⽤于控制⻚⾯的样式。
CSS能够对⽹⻚中元素位置的排版进⾏像素级精确控制，实现美化⻚⾯的效果。能够做到⻚⾯的样式和结构分离。

本文总结CSS的选择器的常见用法。

---

CSS选择器的主要功能就是选中⻚⾯指定的标签元素。选中了元素，才可以设置元素的属性。

基本语法规范：

选择器+{⼀条/N条声明}
• 选择器决定针对谁修改(找谁)
• 声明决定修改啥。(⼲啥)
• 声明的属性是键值对。使⽤;区分键值对,使⽤:区分键和值。

<style>
    p {
      /*设置字体颜色*/
      color: red;
      /*设置字体大小*/
      font-size: 30px;
    }
</style>

<p>hello</p>

注：1、CSS使用/**/作为注释。

2、style标签可以放到页面任意位置，但一般放到head标签内。

3、CSS不区分大小写，开发时统一使用小写字母。

4、冒号后面带空格。  选择器和{之间也有一个空格。

CSS有三种引入方式如下：

CSS选择器主要分为：

1、标签选择器

/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
    color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
    color: green;
}

2、类选择器

/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
      font-size: 32px;
}

注： 一个类可以被多个标签使用。一个标签也可以使用多个类。

3、ID选择器

/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
     color: red;
}

 注：id是唯一的，不能被多个标签使用。

4、通配符选择器

/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
     color: red;
}

5、复合选择器

/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
     color: blue;
}

注：1、 以上三个标签选择器 ul  li  a 中的任意，都可以替换成类选择器，或者id选择器，可以是任意选择器的组合，也可以是任意数量选择器的组合。
2. 不⼀定是相邻的标签，也可以是"孙⼦"标签
3. 如果需要选择多种标签，可以使⽤ , 分割，如p, div { } 表⽰同时选中p标签和div标签。
逗号前后可以是以上任意选择器，也可以是选择器的组合。

以上，关于CSS，希望对你有所帮助。