CSS派生，id，类，属性选择器

最新推荐文章于 2022-10-24 08:06:32 发布

青藤下的旅行

最新推荐文章于 2022-10-24 08:06:32 发布

阅读量225

点赞数 1

分类专栏： javaweb 文章标签： css选择器

本文链接：https://blog.csdn.net/qq_41621665/article/details/96458115

版权

javaweb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.css派生选择器

html:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>正式开启css的学习</title>
       <link type="text/css" rel="stylesheet" href="css/learncss01.css" />
   </head>
   <body>
       <h1>应用了样式表</h1>
       <p>p标签用于说话</p>
       <a>a标签用于引用和设置锚点</a>
   </body>
</html>

css:

h1,p{
   color: red;
   font-size: 10px;
}
body{
   color:blue
}

css派生选择器就是简单的在html中定义标签，在css中定义标签的属性即可，注意html中一定要引入。

两个或多个标签定义相同的属性，那就在css中用“逗号”隔开，

用body的话，只是针对于之前body体内没被单独定义的标签来说的，被定义了的还是原来的效果，效果不变

效果图：

2.id选择器

html：

<body>
       <div id="divide" >
这是一个div块
       </div>
   </body>

css:

#divide {
color: black;
}

id选择器就是在html的<div>中定义一个id ,给其命名

在css中用#+命名的形式对div块中的内容进行修饰

3.标签选择器和id选择器的联合使用

html:

<body>
       <div id="divide" >
           加油呀<p>这是一个div</p>
       </div>
   </body>

css:

#divide p{
color: black;
}

二者的联合使用在css中要变的就是用“空格”把#+命名隔开，

当然

此时修饰的只是<div>块中 <p>之间包裹的内容

效果图：

4.类选择器

区别id选择器的地方就是: id选择器用的是#，类选择器用的是" . "

html中把用 id 的地方都改为 class

html:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>正式开启css的学习</title>
       <link type="text/css" rel="stylesheet" href="css/learncss01.css" />
   </head>
   <body>
       <p class="pclass">这是一个class效果</p>
       <div class="divclass">
           Hello Div
       </div>
   </body>
</html>

css:

.pclass{
color: red;
}
.divclass{
color: aqua;
}

效果图:

5.类选择器和派生选择器的使用

和id选择器和派生选择器的使用差不多

html:

<p class="pclass">这是一个class效果<a href="http://www.baidu.com">百度搜索</a></p>
       <div class="divclass">
           Hello Div<p>p是用来写段落的</p>
       </div>

css:

.pclass a{
color: red;
}
.divclass p{
color: aqua;
}

效果图：

6.属性选择器在低版本中不支持，就不写了。

青藤下的旅行

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS派生，id，类，属性选择器

1.css派生选择器html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>正式开启css的学习</title> <link type="text/css" rel="stylesh...
复制链接

扫一扫

专栏目录