CSS基础 | (2)标签选择器详解

最新推荐文章于 2023-04-01 09:55:28 发布

CoreJT

最新推荐文章于 2023-04-01 09:55:28 发布

阅读量2.2k

点赞数 3

分类专栏： CSS基础文章标签： css基础 css选择器

本文链接：https://blog.csdn.net/sdu_hao/article/details/83148910

版权

CSS基础专栏收录该内容

4 篇文章 4 订阅

订阅专栏

一、标签选择符

用标签来选择网页元素，可能是最直观的方法
基本格式：标签名(空格){声明块} 将要设置的样式声明，[属性名:属性值]的方式写在声明块中
多个样式声明以分号隔开，属性值不加引号，与HTML不同
标签选择符，一般不单独使用，通常与其他选择符结合使用，以达到精准定位元素的目的

css代码：

h1 {
  color:red; /*设置文本颜色为红色*/
  font-size: 36px; /*设置字体大小*/
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>PHP中文网</h1>
  <h1>http://www.php.cn</h1>
</body>
</html>

网页显示效果：

二、id选择符

用id选择符选择的元素，必须在当前页面中，是唯一的
基本格式：#[id属性值](空格){声明块} 将要设置的样式声明，[属性名:属性值]的方式写在声明块中
多个样式声明以分号隔开，属性值不加引号，与HTML不同
id选择符通常选择网页中唯一的元素，比如网页头部，底部或侧边栏等，大多与布局元素<div>配对使用
随着html5语义化结构普及，布局更多被结构化标签替代，必须使用id的情况越来越少，更多情况被类选择符替代

css代码：

#green {
  color:green; /*设置文本颜色为红色*/
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>PHP中文网</h1>
  <h1>http://www.php.cn</h1>
  <h1 id="green">永久免费</h1>
</body>
</html>

网页显示效果：

三、类选择器

用于选择页面中同一类的元素，如一样的大小，边框等可以划分为一类
如果网页上有多个，具有相同样式的元素，就使用类选择符，高效灵活，使用最广泛
基本格式：.[class属性值](空格){声明块} 将要设置的样式声明，[属性名:属性值]的方式写在声明块中
多个样式声明以分号隔开，属性值不加引号，与HTML不同

如网页中有四幅图片，将第一幅和第三幅边框设置为椭圆，透明度50%：

css代码：

.circle {
  border-radius: 50%;
  opacity: 50%;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img class="circle" src="kenan1.jpg" width="300">
  <img src="kenan2.jpeg" width="300">
  <img class="circle" src="kenan3.jpeg" width="300">
  <img src="kenan4.jpeg" width="300">
</body>
</html>

网页显示效果：

四、属性选择符

标签中的属性可以用来详细的描述元素，也可以用来选择元素
类选择符和id选择符是特殊的属性选择符
基本格式:[属性名](空格){声明块} ;也可以选择多个属性名：[属性名1][属性名2](空格){声明块};也可以指定属性具体的值来更精准的定位元素：[属性名=属性值](空格){声明块}；
也可以用正则进行范围匹配

[属性名^=属性值]:指定起始字符

[属性名$=属性值]:指定结束字符

[属性名|=属性值]:以该值开头并以空格分隔

[属性名~=属性值]:以该值开头并以'-'分隔

css代码：

[alt] {
  border-radius: 50%;
  border: 5px solid red;
}  /*包含alt属性的元素设置为圆形轮廓，5像素红色边框*/

[alt="柯南"] {
  border: 5px solid blue;
}/*包含alt属性且值为“柯南”的元素设置为5像素蓝色边框*/

[alt][title] {
  border: 5px solid green;
}/*包含alt、title属性的元素设置为5像素绿色边框*/

[alt^="china"] {
  border: 5px solid pink;
}/*alt属性值以“china”开头的元素设置为5像素粉色边框*/

[alt$="heyzo"] {
  border: 5px solid purple;
}/*alt属性值以“heyzo”结尾的元素设置为5像素紫色边框*/

[alt~="php"] {
  border: 5px solid yellow;
}/*alt属性值包含“php”，以空格分隔的元素设置为5像素黄色边框*/

[alt|="shandong"] {
  border: 5px solid tomato;
}/*alt属性值包含“shandong”，以-分隔的元素设置为5像素番茄色边框*/

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="kenan1.jpg" width="110" alt="柯南">
  <img src="kenan2.jpeg" width="110" alt="" title=""> 
  <img src="kenan3.jpeg" width="110" alt="china hefei">
  <img src="kenan4.jpeg" width="110" alt="japan heyzo">
  <img src="kenan5.jpeg" width="110" alt="php mysql">
  <img src="kenan6.jpeg" width="110" alt="shandong-taian">
</body>
</html>

网页显示效果：

五、群组选择符

一次性选择多个元素，统一进行样式设置
基本格式：选择符1，选择符2，选择符3(空格){样式声明列表}

比如将所有标题的加粗样式去掉，并添加下划线；再将两段话和其小标题设置为绿色。

css代码：

h1,h3 {
  font-weight: lighter;
  text-decoration: underline;
}

h3,p {
  color: green;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>PHP中文网</h1>
  <h3>服务对象</h3>
     <p>php初学者</p>
  <h3>服务宗旨</h3>
     <p>永久免费</p>
</body>
</html>

网页显示效果：

六、后代选择符

网页中很多元素有层级关系，可以利用他们的相对位置和隶属关系来定位元素
基本格式：父选择符(空格)后代选择符(空格){声明块} 父选择符为起点，可以找到所有符合的元素，包括儿子级、孙子级...

css代码：

h1 span {
  font-size: 16px;
  color: blue;
} /*将h1中的span中的文本设置为蓝色 16像素*/

ol li img {
   width: 60px;
}/*将ol的li中的img中的图像宽度设置为60像素*/

ol li {
  font-size: 20px;
  color: red;
}/*将ol中的li中的文本设置为红色 20像素*/

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>柯南<span>日本知名动漫角色</span></h1>
    <div>
      <h3>主演影片：</h3>
      <ol>
         <li><img src="kenan1.jpg" alt="">《引爆摩天楼》</li>
         <li><img src="kenan2.jpeg" alt="">《瞳孔中的暗杀者》</li>
         <li><img src="kenan3.jpeg" alt="">《天空的遇难船》</li>
         <li><img src="kenan4.jpeg" alt="">《贝克街亡灵》</li>
      </ol>
    </div>
</body>
</html>

网页显示效果：

七、子代选择符

html家谱：

子代选择符，只选择直接的子标签
基本格式：父标签>直接子标签(空格){声明块}
支持伪类选择符

css代码：

div > a {
  color: red;
}/*将div的直接子标签 a中的文本设置为红色*/

/*伪类选择符*/
li:first-child{
  color: red;
}/*将li中的第一项文本设置为红色*/

li:last-child{
  color: red;
}/*将li中的最后一项文本设置为红色*/

li:nth-child(6){
  color: red;
}/*将li中的第6项文本设置为红色*/

li:nth-child(even){
  color: blue;
}/*将li中的偶数项文本设置为蓝色*/

li:nth-child(odd){
  color: red;
}/*将li中的奇数项文本设置为红色*/

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
      <a href="https://www.php.cn">php中文网</a>
      <p>
        <a href="https://www.php.cn">php中文网</a>
      </p>
      <li>起床</li>
      <li>跑步</li>
      <li>吃早饭</li>
      <li>学乐器</li>
      <li>打电话</li>
      <li>交流</li>
      <li>实习</li>
      <li>论文</li>
    </div>
</body>
</html>

网页显示效果：

八、通过选择符与同辈选择符

通用选择符用*号，一次性设置页面所有元素的样式，通常用来重置页面元素的默认样式

css代码：

* {
  font-size: 16px;
  color: red;
  margin: 0;
}
/*将页面所有元素字体设置16，红色，去掉边距*/

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>php中文网</h1>
    <h2>服务宗旨</h2>
      <p>永久免费</p>
    <h2>学习内容</h2>
      <ol>html</ol>
      <ol>css</ol>
      <ol>js</ol>
</body>
</html>

网页显示效果：

同辈选择符不推荐使用
同辈选择符有两种：同级且相邻；同级所有
同级且相邻格式：标签1+标签2(与1同级且相邻)(空格){声明块}
同级所有格式：标签1～标签2(与1同级的所有标签)(空格){声明块}

css代码：

h1 + h2 {
  color: red;
}/*与h1同级且相邻的h2设置为红色*/

h1 ~ h2 {
  color: red;
}/*与h1同级的所有h2设置为红色*/

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>php中文网</h1>
    <h2>服务宗旨</h2>
      <p>永久免费</p>
    <h2>学习内容</h2>
      <ol>html</ol>
      <ol>css</ol>
      <ol>js</ol>
</body>
</html>

网页显示效果：

CoreJT

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS基础 | (2)标签选择器详解

目录一、标签选择符二、id选择符三、类选择器四、属性选择符五、群组选择符六、后代选择符七、子代选择符八、通过选择符与同辈选择符一、标签选择符用标签来选择网页元素，可能是最直观的方法基本格式：标签名(空格){声明块} 将要设置的样式声明，[属性名:属性值]的方式写在声明块中多个样式声明以分号隔开，属性值不加引号，与HTML不同标签选择符，一...
复制链接

扫一扫