CSS样式选择器

最新推荐文章于 2024-10-09 13:50:32 发布
最新推荐文章于 2024-10-09 13:50:32 发布
阅读量1.5k 收藏 10
点赞数
分类专栏： CSS 文章标签： CSS 选择器 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43885459/article/details/84672170
版权

样式的分类
1.行内样式：直接在标签里添加样式
例：创建一个div，直接在标签里写它的样式

    <div style="width: 200px;height: 200px;background-color: red"></div>

结果如下
在这里插入图片描述

2.内部样式：在head标签里创建style标签，在其里面写样式
如果要写内部样式或外部样式，就需要用到样式选择器

样式选择器分类

1.标签选择器：直接在style标签中写其标签名 语法 {}
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>

    <div></div>

</body>
</html>

结果如下在这里插入图片描述

2.类选择器 class 语法 .{}
给标签一个class,再在style中写样式
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>

    <div class="div1"></div>

</body>
</html>

结果如下
在这里插入图片描述

3.id选择器：给标签一个id 语法： #{} id的名字不能重复

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>

    <div id="div1"></div>

</body>
</html>

结果如下
在这里插入图片描述

4.后代选择器 语法：通过一个空格实现
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
          border: 1px solid red;
        }
        #div1 p{
            color: green;
        }
    </style>
</head>
<body>

    <div id="div1">
        <div>  <p>hello world</p></div>
      <p>今天是2018年12月第一天</p>
    </div>

</body>
</html>

结果如下
在这里插入图片描述

5.子代选择器 通过 >s实现（直系）
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
          border: 1px solid red;
        }
        #div1>p{
            color: green;
        }
    </style>
</head>
<body>

    <div id="div1">
        <div>  <p>hello world</p></div>
      <p>今天是2018年12月第一天</p>
    </div>

</body>
</html>

结果如下
在这里插入图片描述

6.交集选择器 中间什么也不加
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      p.p{
          color: red;
      }
    </style>
</head>
<body>

    <p class="p">hello  world</p>
<p>今天星期六了</p>
<p class="p">今天是12月份第一天</p>
</body>
</html>

结果如下
在这里插入图片描述

3.外部样式：创建一个stylesheet,通过link把HTML和css连接起来
例
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="zongjie.css"/>
</head>
<body>

    <p class="p">hello  world</p>
<p>今天星期六了</p>
<p class="p">今天是12月份第一天</p>
</body>
</html>

css:

@charset "UTF-8";
*{
    padding: 0;
    margin: 0 auto;
}
.p{
    font-size: 30px;
    font-weight: bold;
    color: brown;
}

结果如下：
在这里插入图片描述

小栗子的普
关注
专栏目录
【CSS笔记】CSS三种样式表、CSS样式表优先级、CSS选择器
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-19 825
CSS，全称是：Cascading Style Sheets，层叠样式表，用于修饰HTML页面的。CSS编写的规则分为两部分，分别是：选择器、声明块。声明块，需要使用【{}】大括号包裹，括号里面使用【key: value；】的格式定义属性。选择器，表示需要对哪个HTML标签添加CSS样式，声明块表示要给选择的标签添加什么样式效果。h1 {}
CSS.选择器&css常见样式
newlife1441的博客
05-30 783
一、选择器： 1.基本选择器（应用最广）： 基本选择器 <1> 标签选择器 根据标签名获取 <2> id选择器 通过id属性获取 <3> 类选择器 根据class属性获取 <4> 通用选择器 通配符* <1>标签选择器：根据标签名获取 例：p{ } <2>id选择器：通过id属性获取 例：#x{ } <3>类选择器：根据class属性获取 例：.x{
2020-12-24
weixin_53077070的博客
12-24 151
述CSS样式表继承 a. CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素，会被继承下去的属性： b.文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color c. 列表相关:list-style-image，list-style-position，list-style-type， list-style 请简述CSS的选择器 a. 元素选择器：* 、.
CSS样式核心-选择器
最新发布
2302_80916083的博客
10-09 959
CSS选择器是CSS中非常重要的一个概念，它决定了格式化将应用于哪些元素。常见的CSS选择器有标签选择器（如div、p）、类选择器（如.class类选择器）、id选择器（如#idname）。还有更复杂的组合选择器和伪类选择器，比如子代选择器、后代选择器、相邻兄弟选择器和通用兄弟选择器等。
CSS_样式选择器
weixin_45084986的博客
03-14 1109
网页分成三个部分 结构HTML 表现css 行为javascript css层叠样式表 内联样式表 内部样式表 外部样式表 <!--引入外部样式表--> <link rel="stylesheet" href="url"/> css基本语法 选择器+声明块 p{ color:red; font-size:40px ] 常用选择器 元素选择器，p id选择器#byid class(类)选择器**.**byclass 符合选择器 交集选择器div.red 交集选择器 作用:选中同时复合
css样式表和选择器
Hl52099的博客
08-09 101
css
style中的选择器
Shao_yihao的博客
10-15 2157
用style中的color属性修改颜色。注意：style声明应以分号结尾。 <h1 style = "color : red;"> XXX </h1> 这是指定元素样式的一种方法，除此之外还可以在代码的顶部，创建一个 style 声明区域： <style> h1 { color: red; } </style> 除了指定对某种标签实现某种效果之外，还可以自定义一个class选择器来实现更灵活的使用该效果，多个 HTML 元素可以使用相同的
css样式加载顺序及覆盖顺序深入理解
12-13
复制代码代码如下: { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { ...1. 样式表的元素选择器选择越精确，则其中的样式优先级越高： id选择器指定的样式 > 类选
CSS3 :not()选择器实现最后一行li去除某种css样式
01-19
本文中用到的是CSS3新增的:not()伪类选择符，可以匹配不含有选择符的元素。假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线 实例代码如下： 复制代码代码如下:<!DOCTYPE><html><head...
CSS3 样式选择器
01-15
在定义CSS时，需要知道其书写语法和影响范围，此文档给你说明
HTML中CSS样式选择器的种类,css中的四种基本选择器类型分别是什么
weixin_32101685的博客
06-05 1418
css中的四种基本选择器类型分别是标签选择器、ID选择器、类选择器和通用选择器。css中的选择器分为两大类，分别是基本选择器和扩展选择器。本教程操作环境：windows10系统、css3，本文适用于所有品牌的电脑。CSS的选择器分为两大类：基本选择器和扩展选择器，其中有4种基本选择器。(相关学习视频分享：css视频教程)基本选择器：1、标签选择器：针对一类标签2、ID选择器：针对某一个特定的标签使...
css样式选择器的类型---lesson2
ThinkDo的博客
06-07 647
css样式选择器有4类： 1、类选择器，可以作用任何html元素 2、id选择器，仅用于一个html元素 3、标签选择器，用于相同的html标签元素 4、复合内容选择器，基于选择的内容 基本使用范例： 截图： 代码： Insert title here .zs-item { font-size: 18px; color: #F60; } #zs-first {
CSS样式：选择器
番薯大佬的专栏
03-30 189
CSS的选择器 （1）标签选择器：div、p、a、input、span、h1…… div{ color: red; } p{ color: yellow; } <p> 我是段落 </p> （2）类选择器：class /类选择器样式：class/ .styleDiv{ color: blue; } <div class="styl...
CSS 样式中选择器类型区别
weixin_30713953的博客
01-23 156
CSS 样式中选择器类型区别 CSS 样式中选择器类型有三种 “类” “标签” “高级” 1“类”的一种样式可以改变“类”的另一种样式， “类”的一种样式也可以改变“标签”的一种样式。 2“标签”设置完可以改变所有默认样式的，不能改变已设置“类”的样式和“高级”的样式 3“高级”的样式改变所有默认样式和已设置“类”的样式，但“高级”的样式可以改变另一“高级”的样式。 举例：比如链接文本的默...
CSS样式选择器（1）
陌上花开7
10-18 219
class 是按照 同类型 来归类HTML的各种元素的，要把某些元素归为一类，一般会考虑到下面这些因素： 它们具有同样的样式，比如不管他们的标签是什么，h1 或者是 div，但是字体大小都是 16px； 它们是一种具有同样意义的东西，比如我们做网站，一般首页的 LOGO 会使用 h1，但是内页的 Logo 却不使用 h1（因为我们需要让真正的内容的标题使用 h1），但是不管是 h1 还是 div...
简述css选择器的四种类型,CSS选择器的类型,css,种类
weixin_39534002的博客
08-03 4695
1、标签选择器以标签名开头，选择所有div元素2、类选择器给标签取class名，以点(.)加class名开头，选择所有该class名的元素3、id选择器给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘wrap’”的元素4、子选择器以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)5、包含选择器以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所...
CSS基础（三）--样式及选择器
singerAngel
09-21 3113
1、 样式分类            在CSS的样式中，存在内联式、嵌入式以及外部式三种引用方式。                   内联式：&lt;p style="color:red;"&gt;&lt;/p&gt;                   嵌入式：&lt;head&gt;                                       &lt;title&gt...
CSS：选择器 / 14种类型
snowball的博客
07-06 3330
CSS中的UI元素伪类选择器主要用于定义用户界面元素的特殊状态样式，如链接的悬停（hover）、激活（active）状态，以及输入框的焦点（focus）状态等。：尽量使用更具体的选择器来定位你想要样式化的元素，这样可以减少不必要的性能开销，并提高样式表的可维护性。然而，需要注意的是，当通用选择器与其他选择器结合使用时，它仍然会匹配所有元素，但样式只会应用到那些也符合其他选择器条件的元素上。符号，它选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。在CSS中，ID选择器以井号。
动态 添加css样式选择器
06-09
要动态添加 CSS 样式选择器，可以通过 JavaScript 操作 DOM 实现。以下是一个示例代码，假设要将选择器 `.my-class` 添加到所有 `div` 元素上： ```javascript var style = document.createElement('style'); style...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值