CSS-CSS2选择器

最新推荐文章于 2024-05-14 21:13:06 发布

guardwhy

最新推荐文章于 2024-05-14 21:13:06 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/hxy1625309592/article/details/109641990

版权

1.1 标签选择器

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        /*标签选择器*/
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p><em>CSS</em>层叠样式</p>
    <p><em>CSS</em>样式由选择器和声明组成</p>
</body>
</html>

执行结果

1.2 类选择器

为HTML标签添加class属性

h1 class="red">内容1</h1>
<p>内容2</p>
<p class="red">内容3</p>

通过类选择器来为具有此class属性的元素设置CSS样式
```
.red{color:red;}
```
通过对不同元素的同一名称的类选择器设置不同的样式规则
```
p.red{font-size:50px;}
h1.red{font-size:20px;}
```
同一个元素可以设置多个类，之间有空格隔开

<h1 class="red">内容1</h1>
<p class="red fsize">内容2</p>
<p class="red">内容3</p>

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>类选择器</title>
  <style type="text/css">
    .p1{
        color: red;
    }
    .p2{
        color: green;
    }
    .p3{
        color: blue;
    }
    .st1{
        font-size: 20px;
        color: blueviolet;
    }

    .st2{
        font-style: italic;
        color: darkgoldenrod;
    }
  </style>
</head>
<body>
  <p class="p1">愿我如星君如月，夜夜流光相皎洁。</p>
  <p class="p2">妾弄青梅凭短墙，君骑白马傍垂杨。</p>
  <p class="p3">墙头马上遥相顾，一见知君即断肠。</p>

  <p class="pst st1">蝶恋花·春景</p>
  <p class="pst st2">井底引银瓶·止淫奔也</p>
</body>
</html>

执行结果

1.3 ID选择器

为HTML标签添加ID属性

<h1>内容1</h1>
<p id="p1">内容2</p>
<p id="p2">内容3</p>

通过ID选择器来为具有此ID的元素设置CSS规则
```
#p1{color:red;}
#p2{color:blue;}
```

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        /*ID选择器*/
		#two{
            color: green;
        }
    </style>
</head>
<body>
<div>
    <h1 id="two">css</em>使用方法</h1>
</div>
</body>
</html>

执行结果

1.4 全局选择器

所有标签设置样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局选择器</title>
  <style type="text/css">
      *{font-size:20px;
          color:blue;}
  </style>

</head>
<body>
  <h1 class="special"><em>CSS</em>是什么</h1>
  <p><em>CSS</em>层叠样式</p>
  <p class="special one">用于定义HTML内容在浏览器中的显示样式</p>
  <p><em>CSS</em>样式由选择器和声明组成</p>
</body>
</html>

执行结果

1.5 群组选择器

集体统一设置样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>群组选择器</title>
  <style type="text/css">
      /*群组选择器*/
      p.special,#three,h3{font-size:20px;}
      p{color:red;}
      .special{color:blue;}
      .one{text-decoration: underline;}
      #two{color:green;}
  </style>

</head>
<body>

<h3 class="special">CSS是什么</h3>
<p><em>CSS</em>层叠样式</p>
<p class="special one">用于定义HTML内容在浏览器中的显示样式</p>
<p>CSS样式由选择器和声明组成</p>
<div>
  <h3 id="two">css使用方法</h3>
  <ul id="three">
    <li>行内样式</li>
    <li>内部样式</li>
    <li>外部样式</li>
    <li>导入式</li>
  </ul>
  <h3>css选择器</h3>
  <ul>
    <li>标签选择器</li>
    <li>ID选择器</li>
    <li>类选择器</li>
    <li>后代选择器</li>
  </ul>
</div>
</body>
</html>

执行结果

1.6 后代选择器

格式

标签名称1 标签名称2{
    属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性。

注意点:
1.后代选择器必须用空格隔开
2.只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>后代选择器</title>
  <style type="text/css">
    div ul li p{
        color: red;
    }
  </style>
</head>
<body>
  <h3>鹧鸪天</h3>
  <div id="p1" class="st1">
    <p>彩袖殷勤捧玉钟，当年拚却醉颜红</p>
    <p>舞低杨柳楼心月，歌尽桃花扇底风</p>
    <ul>
      <li>
        <p>从别后，忆相逢，几回魂梦与君同</p>
      </li>
      <li>
        <p>今宵剩把银釭照，犹恐相逢是梦中</p>
      </li>
    </ul>
  </div>
  <h3>晏几道</h3>
</body>
</html>

执行结果

1.7 子元素选择器

指定标签中所有特定的直接子元素, 然后设置属性

基本格式

标签名称1>标签名称2{
    属性:值;
}

注意

1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签

2.子元素选择器之间需要用>符号连接, 并且不能有空格

3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器

4.子元素选择器可以通过>符号一直延续下去

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子元素选择器</title>
  <style type="text/css">
    div>ul>li>p{
        color: green;
    }
  </style>
</head>
<body>
  <h3>kobe是总决赛MVP</h3>
  <div id="st1">
    <p>Curry是三分王</p>
    <p>James最佳防守球员</p>
    <ul>
      <li>
        <p>Rondo助攻王</p>
      </li>
    </ul>
  </div>
  <h3>Kobe是常规赛MVP</h3>
</body>
</html>

执行结果

1.8 并集选择器

给所有选择器选中的标签设置属性

基本格式

选择器1,选择器2{
    属性:值;
}

注意:
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>并集选择器</title>
  <style type="text/css">
    .st1, .p1{
        color: red;
    }
  </style>
</head>
<body>
  <h3 class="st1">java是最好的程序语言</h3>
  <p class="p1">PHP才是最牛B的</p>
  <p>python真的很香</p>
  <p>JavaScript貌似也还可以</p>
</body>
</html>

执行结果

guardwhy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS-CSS2选择器

4.1 CSS2选择器4.1.1-标签选择器以HTML标签作为选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> /*标签选择器*/ p{ color: red;
复制链接

扫一扫