CSS基础知识与用法（二）——CSS选择器

最新推荐文章于 2022-03-26 15:03:15 发布

香蕉芭辣

最新推荐文章于 2022-03-26 15:03:15 发布

阅读量181

点赞数

文章标签： CSS选择器类选择器 id选择器属性选择器子代选择器

本文链接：https://blog.csdn.net/weixin_44049725/article/details/102557189

版权

CSS选择器：

css的选择器可以分为以下几类：
1、元素选择器：
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、hn、span、a，甚至可以是 html 本身。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   /*找到h1这个标签*/
   h1{
    color: red;
    background-color: #ccc;
   }
   /*找到p标签*/
   p{
    font-size: 25px;
   }
  </style>
 </head>
 <body>
  <h1>这个一级标题</h1>
  <p>这是一段文字</p>
  <h2>这是二级标题</h2>
 </body>
</html>

2、群组选择器：
要为不同的HTML对象定义相同的样式时，群组选择器可以减少样式的重复定义。可以把任意数量、任意类型的选择器放在群组中进行声明。每个对象之间用逗号来分隔。逗号告诉浏览器，规则中包含两个不同的选择器。这样的选择器叫群组选择器。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   /*选择页面中的这些标签,设置字体为红色*/
   h1,div,p,a{
    color: red;
   }
  </style>
 </head>
 <body>
  <h1></h1>
  <div></div>
  <p></p>
  <a href="#"></a>
 </body>
</html>

3、类选择器：
该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。使用方法是需要现在标签中添加class属性，然后给其命名一个名字，在写样式的时候 .xxx{color：red}。“.”是类选择器语法申明的一部分，xxx是自己命名的名字。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   /*找到页面中所有class为color的元素*/
   .color{
    text-align: center;
    color: #666;
   }
  </style>
 </head>
 <body>
  <p>这是一段文字</p>
  <p class="color">这是一段文字</p>
  <div>
   <span class="color"></span>
  </div>
  <a href="#" class="color"></a>
 </body>
</html>

4、ID选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。且是标签的唯一标识、独一无二的样式设计，一个HTML页面中的id名字最好是不能重复，虽然并没有明确规定说不可以，但是如果重复就会出现样式重叠，最后就只会渲染最后申明的样式。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   /*找到页面中id为two的元素*/
   #two{
    text-align: center;
    color: #666;
   }
  </style>
 </head>
 <body>
  <p>1</p>
  <p id="two">2</p>
  <p>3</p>
  <p>4</p>
 </body>
</html>

5、属性选择器：
属性选择器可以根据元素的属性及属性值来选择元素，说简单点就是通过某些元素自身默认的属性，来去选择这个元素，比如说a标签的href属性，我们就可以这样来找到a标签:

<html>
  <style>
     [href]{
          /*去掉下划线*/
          text-decoration: none;
     }
  </style>
</html>

6、后代选择器：
后代选择器又称为包含选择器，只要具备层级关系的元素，被嵌套的都可以被称为后代元素，一般的用法就是：

<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
  /*每个标签名中间用空格隔开*/
   div ul li a{
    color: red;
   }
  </style>
 </head>
 <body>
  <div>
   <ul>
    <li>
     <a href="">后代选择器</a>
    </li>
   </ul>
  </div>
 </body>
</html>

7、子元素选择器：
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。选择子元素，仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
   /*找到div的子元素p,将1和2找到*/
   div>p{
    color: red;
   }
 </style>
 </head>
  <body>
   <div>
     <p>1</p>
     <ul>
        <li>
          <p>2</p>
          <p>3</p>
        </li>
     </ul>
     <p>4</p>
  </div>
 </body>
</html>

8、相邻兄弟选择器：
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器，相邻兄弟选择器使用了加号（+），即相邻兄弟结合符：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   /*将a标签中的文字设为红色*/
   h1+a{
    color: red;
   }
  </style>
 </head>
 <body>
  <div>
   <p>1</p>
   <h1>2</h1>
   <a href="">红色</a>
  </div>
 </body>
</html>

9、伪类选择器:
伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。静态伪类和动态伪类两种。CSS 伪类用于向某些选择器添加特殊的效果:
(1)静态伪类：只能用于超链接的样式。如下：
:link 超链接点击之前
:visited 链接被访问过之后
注意：以上两种样式，只能用于超链接。
(2)动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

10、通用选择器：
通用选择器可以选择页面上的所有元素，并对它们应用样式，用 * 来表示。
一般我们可以用其进行一些样式的预设，还有清除浏览器的缺省样式，用法就是直接 *{margin：0px; padding：0px;}。

香蕉芭辣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识与用法（二）——CSS选择器

CSS选择器：css的选择器可以分为以下几类：1、元素选择器：最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、hn、span、a，甚至可以是 html 本身：2、群组选择器：3、类选择器：4、ID选择器：5、属性选择器：6、后代选择器：7、子元素选择器：8、相邻兄弟选择器：...
复制链接

扫一扫