Web前端开发——CSS样式之CSS选择器

最新推荐文章于 2024-05-04 20:39:06 发布

OSurer

最新推荐文章于 2024-05-04 20:39:06 发布

阅读量467

点赞数

分类专栏： Web前端开发文章标签： CSS样式 CSS选择器

本文链接：https://blog.csdn.net/wq_ocean_/article/details/104145893

版权

Web前端开发专栏收录该内容

26 篇文章 4 订阅

订阅专栏

1. CSS选择器类型

css选择器可分为标签选择器、类别选择器、ID选择器，这里的三种类型主要针对内嵌样式和单独文件样式而言

1.1 标签选择器

1.1.1 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
      body{
          background-color: #ccc;
          text-align:center;
          font-size: 12px;
      }
      h1{font-style: italic;font-size:20px;}
      p{color:red;font-size: 16px;}
      hr{width:200px;}
    </style>
</head>
<body>
    <h1>标题</h1>
    <hr />
    <p>正文段落</p>
    版权所有
</body>
</html>

1.1.2 效果图

标签选择器会作用用该文件的所有同种标签，同种标签需要定义不通过的样式时可通过下列的类型来定义

1.2 类别选择器

1.2.1 定义——点开头

类别类型的选择器在定义的时候，它的名字点开头，后面带有的样式名称，如测试代码中head标签内的“.one”，样式名称可以自行根据含义来进行定义，比如下列代码中把类别1定义成one，类别2定义成two

1.2.2 引用

样式的引用，我们是在对应的要作用的标签之内，采用它的class属性来进行类别样式的引用，给它设置的属性的取值，就是类别样式的名称，而且要注意这个时候要把点去掉，如body标签内p标签class属性的值为”one“

1.2.3 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        p{font-size: 12px;}
        .one{font-size: 18px}
        .two{font-size: 24px;}
    </style>
</head>
<body>
    <p class="one">类别1</p>
    <p class="one">类别1</p>
    <p class="two">类别2</p>
    <p class="two">类别2</p>
    <p>段落中的普通文字</p>
</body>
</html>

1.2.4 效果图

可以看到：

body内引用了类别选择器的的p标签显示出了对应类别的像素大小（图中的类别1和类别2）,

没有引用类别选择器的p标签显示出了标签选择器的像素大小（图中”段落中的普通文字“)

1.3 ID选择器

1.3.1 定义——#开头

ID类型的选择器在定义的时候，除了它的名字以#开头外，其余同类别选择器

1.3.2 引用

ID选择器样式的引用唯一与类别选择器不同是的将类别选择器的class改为id，且每个标签的id属性值唯一

1.3.3 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
       #one{font-size: 12px;}
       #two{font-size: 24px;}
    </style>
</head>
<body>
    <p id="one">文字1</p>
    <p id="two">文字2</p>
</body>
</html>

1.3.4 效果图

可以看到：文字1引用了名为one的id样式，文字2引用了名为two的id样式

1.3.5 类别选择器和id选择器的区别

ID选择器具有唯一性，它样式被定义出来，它在当前页面的HTML代码里面，要被唯一的引用一次；

而类别类型的祥式，它可以多次被引用，作用于多个网页元素上面。

2. 选择器声明方法

选择器声明方法有嵌套声明、集体声明、全局声明、混合声明

2.1 嵌套声明

比如说当前我们想将段落文字当中的某一部分文字让它采取单独的样式时，可以考虑用嵌套声明的方法

2.1.2 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
       p span{
           color: red;
       }
    </style>
</head>
<body>
    <p><span>天使投资</span>是投资方式的一种</p>
</body>
</html>

2.1.3 效果图

p标签空格隔开span标签，它就表示个嵌套的关系，p标签内部的span标签会出现定义的样式

2.2 集体声明集体

集体声明是指多个样式统一声明成一种样式，当然也可以引用类型选择器达到同样效果

2.2.1 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
       h1,p{
           text-align: center;
       }
    </style>
</head>
<body>
    <h1>欢迎访问论坛</h1>
    <p>欢迎访问论坛</p>
</body>
</html>

2.2.2 效果图

p标签空格隔开span标签，它就表示个嵌套的关系，p标签内部的span标签会出现定义的样式

2.3 全局声明

全局声明是指无论是什么样的标签或者什么样的元素，都具有相同的样式

2.3.1 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
       *{
           text-align: center;
       }
    </style>
</head>
<body>
    <h1>欢迎访问论坛</h1>
    <p>欢迎访问论坛</p>
    <h2>欢迎访问论坛</h2>
</body>
</html>

2.3.2 效果图

用一个星号作为样式的名字

2.4 混合声明

无论是类别类型的样式,还是ID类型的样式等等,这些样式我们可以混合的叠加在一起，作用在某个元素上

2.4.1 测试代码


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style type="text/css"> 

      .one{font-size:18px;
      }
      .two{font-size:24px;
      }
      .red{
        color: red;
      }
      .yellow{
        color: yellow;
      }
      .left{
        text-align: left;
      }
      .right{
        text-align: right;
      }
      #my{
        background-color: #ccc;
      }
    </style>
</head>
<body>
    <!-- 多个class选择器混用，用空格分开 -->
    <p class="one red right">这里的文字，18px红色，右对齐</p>
    <div class="one yellow left">这里的文字，18px黄色，左对齐</div>
    
    <!-- id和class混用 -->
    <div id="my" class="one yellow left" >这里的文字，18px黄色，左对齐，有背景色</div>
</body>
</html>

2.4.2 效果图

OSurer

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发——CSS样式之CSS选择器

1. CSS选择器类型css选择器可分为标签选择器、类别选择器、ID选择器，这里的三种类型主要针对内嵌样式和单独文件样式而言1.1标签选择器1.1.1 测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style ty...
复制链接

扫一扫