【web前端开发】CSS最常用的11种选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了【web前端开发】CSS最常用的11种选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.CSS介绍

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS的作用:给HTML里面的标签设置样式
简单点来说就是让HTML的页面变得更加好看

2.CSS的语言规则

CSS是写在 style 标签里面的,而style标签一般写在head标签里面,title标签的下面

3.CSS的引入方式

CSS共有三种引入方式,分别是内嵌式,外联式和行内式

内嵌式: CSS写在style标签中
注意:style标签可以写在页面的任意位置,但一般都会在head标签里面

外联式: CSS写在单独的.css文件里面
要通过link标签在网页中导入

行内式: CSS写在标签的style属性中
一般搭配js来使用

4.选择器

4.1 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式

语法:

标签名 {
      CSS属性名: 属性值
      CSS属性名: 属性值
      ...
    }

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <div>这是一个段落</div>
</body>
</html>

效果:
【web前端开发】CSS最常用的11种选择器

作用: 通过标签名,找到页面中所有这类标签,并设置样式

注意:

标签选择器选择的是一类标签,而不是单独一个
标签选择器无论嵌套关系有多深,都能找到对应的标签

4.2 类选择器

标签选择器是选择这一类标签并设置样式,而类选择是可以给单独的一个标签设置样式

语法:

    .类名 {
      CSS属性名: 属性值
      CSS属性名: 属性值
      ...
    }

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .one {
      color: red;
    }
    .two {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p class="one">这是一个段落</p> 
  <p class="one two">这是一个段落</p>
  <p>这是一个段落</p>
</body>
</html>

效果:
【web前端开发】CSS最常用的11种选择器

注意点:

所有的标签都有class这个属性,class属性的属性值就是类名
类名不能以数字或中横线 - 作为开头
一个标签可以有多个类名,类名之间要用空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签

4.3 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

语法:

#id属性值 {
	CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #nav {
      color: blue;
    }
  </style>
</head>
<body>
  <p id="nav">这是一个段落</p>
  <p>这是一个段落</p>
</body>
</html>

效果:
【web前端开发】CSS最常用的11种选择器

注意:

所有的标签都有id这个属性
id是唯一的,不能重复!
id选择器只能被调用一次
id选择器通常搭配js来使用

类选择器与id选择器的区别

类选择器可以被多个标签调用
id选择器只能被调用一次

4.4 通配符选择器

找到文中所有的标签,并设置样式

语法:

* {
  CSS属性名: 属性值
  CSS属性名: 属性值
  ...
}

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      color: blue;
    }
  </style>
</head>
<body>
  <p>CSS</p>
  <span>CSS</span>
  <div>CSS</div>
  <h1>CSS</h1>
</body>
</html>

效果:
【web前端开发】CSS最常用的11种选择器
因为通配符选择器会改变所有标签的样式,在实际开发使用中用的很少

4.5 复合选择器

复合选择器中有后代选择器和子代选择器

4.5.1 后代选择器

作用:根据HTML标签的嵌套关系,选择父元素"后代中"所有满足条件的标签

语法:

选择器1 选择器2{
    CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:在选择器1中找到标签的后代(儿子,孙子,重孙子...)中,找到满足选择器2的标签,并设置样式

选择器和选择器之间用空格隔开
只要是后代(儿子,孙子,重孙子...)就会被选中

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p{
          color: #f00;
        }
    </style>
</head>
<body>
<div>
    <p>这是一个段落</p>
    <span>
        <p>这也是一个段落</p>
    </span>
    <h4>这是一个小标题</h4>
</div>
</body>
</html>

效果:
【web前端开发】CSS最常用的11种选择器

4.5.2 子代选择器

作用:根据HTML标签的嵌套关系,选择父元素"子代中"所有满足条件的标签

语法:

选择器1>选择器2{
    CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:在选择器1中找到标签的子代中,找到满足选择器2的标签,并设置样式

这里的子代是只有儿子
选择器与选择器之间用 > 隔开

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div > p{
            color: blue;
        }
    </style>
</head>
<body>
<div>
    <p>这是一个段落</p>
    <span>
        <p>这也是一个段落</p>
    </span>
</div>
</body>
</html>

效果:
【web前端开发】CSS最常用的11种选择器

4.6 并集选择器

作用:同时选择多组标签,并设置样式

语法:

选择器1,选择器2,...{
    CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:找到选择器1和选择器2所选中的标签,并设置样式

选择器和选择器中间用 , 隔开
选择器可以有多个

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            font-size: 50px;
        }
        div,
        .one,
        span{
            color: blue;
        }
    </style>
</head>
<body>
    <div>这是一个div</div>
    <p class="one">这是一个段落</p>
    <span>这是一个span标签</span>
</body>
</html>

效果:
【web前端开发】CSS最常用的11种选择器

4.7 交集选择器

作用:找到 HTML中同时满足选择器的标签

语法:

选择器1选择器2...{
	CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:找到包含上述选择器的标签,并设置样式

选择器可以有多个

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            color: blue;
        }
        .two {
            font-style: italic;
        }
        p.one.two{
            font-size: 30px;
        }     
    </style>
</head>
<body>
    <div class="one">这是一个div</div>
    <p class="one two">这是一个p标签</p>
    <span>这是一个span标签</span>
</body>
</html>

效果:
【web前端开发】CSS最常用的11种选择器

4.8 伪类选择器

伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态

4.8.1 hover伪类选择器

作用:将鼠标悬停在元素上,并设置样式

语法:

选择器:hover {
	CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:鼠标悬停在设置的元素时,会出现样式

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      a:hover{
        color: red;
      }
    </style>
</head>
<body>
<a href="#">这是一个超链接</a>
<br>
<a href="#">这也是一个超链接</a>
</body>
</html>

效果:
我这里鼠标其实是悬浮在第二个标签上的,但是截图的时候不显示的鼠标了
【web前端开发】CSS最常用的11种选择器

任何一个元素都可以悬停,都可以设置样式

4.8.2 active伪类选择器

作用:将鼠标点击元素时,并设置样式

语法:

选择器:avtive {
	CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p:active{
          color: skyblue;
      }
    </style>
</head>
<body>
<p>这是一个段落</p>
<p>这是一个段落</p>
</body>
</html>

【web前端开发】CSS最常用的11种选择器

4.9 伪类选择器

作用:根据HTML的结构关系查找元素

选择器	描述
E:first-child{ }	找到父元素中第一个子元素E
E:last-child{}	找到父元素中最后一个子元素E
E:first-child(n){ }	找到父元素第n个子元素E
E:last-child(n){}	找到父元素中倒数第n个子元素E