CSS使用详解（CSS选择器）

最新推荐文章于 2024-07-06 12:03:19 发布
最新推荐文章于 2024-07-06 12:03:19 发布
阅读量394 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39429962/article/details/82824921
版权

使用CSS样式有三种方式，请看下面这篇文章:https://blog.csdn.net/qq_39429962/article/details/82824537

1、元素选择器

语法：

E{...}    /*E代表有效的HTML元素名*/

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>内部样式测试</title>
        <style type="text/css">
            div{
                background-color:#ccc;    
                height:300px;
                width:50%;
            }
        </style>
    </head>
    <body>
        <div>第一个div</div>
    </body>
</html>

2、属性选择器

E{...} :该css样式对所有的E元素起作用
E[attr]{...}:对所有具有attr属性的E元素起作用
E{attr=value}:对所有具有attr属性，且attr属性值为value的E元素起作用
E{attr |=value}:对所有具有attr属性，且attr属性值为以|区分符，value为第一个的E元素起作用
E{attr^=value}:对所有具有attr属性，且attr属性值为以value开头的E元素起作用
E{attr$=value}:对所有具有attr属性，且attr属性值为以value结尾的E元素起作用
E{attr*=value}:对所有具有attr属性，且attr属性值为包含value的E元素起作用

3、ID选择器

#idValue{...}

实例： 

<!DOCTYPE html>
<html>
    <head>
        <title>内部样式测试</title>
        <style type="text/css">
            #div{
                background-color:#ccc;    
                height:300px;
                width:50%;
            }
        </style>
    </head>
    <body>
        <div id="div">第一个div</div>
    </body>
</html>

4、class选择器

语法：

.calassValue{...}

实例： 

<!DOCTYPE html>
<html>
    <head>
        <title>内部样式测试</title>
        <style type="text/css">
            .div{
                background-color:#ccc;    
                height:300px;
                width:50%;
            }
        </style>
    </head>
    <body>
        <div class="div">第一个div</div>
    </body>
</html>

5、包含选择器

selector1 selector2{...}    /*selecctor1 selector2都是有效的选择器*/

实例： 

<!DOCTYPE html>
<html>
    <head>
        <title>内部样式测试</title>
        <style type="text/css">
            /*对所有的div里且class为a起作用*/
            div .a{
                background-color:#ccc;    
                height:300px;
                width:50%;
            }
        </style>
    </head>
    <body>
        <div><section><div class="a">section中的div</div></section></div>
    </body>
</html>

 6、子选择器

语法：

Selector1>Selector2{...}

 实例：

<!DOCTYPE html>
<html>
    <head>
        <title>内部样式测试</title>
        <style type="text/css">
            /*对所有的div里且class为a的子元素起作用*/
            div>.a{
                background-color:#ccc;    
                height:300px;
                width:50%;
            }
        </style>
    </head>
    <body>
        <div><section><p class="a">section中的div</p></section></div>    <!--不起作用-->
        <div><p class="a">section中的div</p></div>    <!--起作用-->
    </body>
</html>

7、组合器选择

语法：

Selector1,Selector2,Selector3{...}

实例：

<!DOCTYPE html>
<html>
    <head>
        <title>内部样式测试</title>
        <style type="text/css">
            /*对所有的div里且class为a的子元素起作用*/
            div,.a,#p{
                background-color:#ccc;    
                height:300px;
                width:50%;
            }
        </style>
    </head>
    <body>
        <div>section中的div></div>    <!--起作用-->
        <p class="a">123123123</p>
        <a id="p">texttext</a>
    </body>
</html>
对明天的期待丶
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css完全使用详解（源代码）下载
03-02
css完全使用详解（源代码）下载 黄斯伟 等编 人民邮电出版社
十种CSS选择器详解介绍
01-31
### 十种CSS选择器详解介绍 #### 一、通用选择器 - **定义**: 通用选择器使用星号 `*` 来表示，能够匹配HTML文档中的每一个元素。 - **示例**: ```css * { margin: 0; padding: 0; } ``` - **用途**: 常用于...
CSS选择器的使用
weixin_44961514的博客
08-21 213
文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 css是前端必须要掌握的知识，其实css学起来虽然简单，但是要记的知识有很多，css的学习一共分为两大部分，一个是css的选择器，另一个是css的属性。 本文总结一下css选择器的使用方法 一、css选择器 1.标签选择器 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 ​ 格式: ​ 标签名称{ ​ 属性:值; ​ } ​ 注意点:...
CSS选择器的常见用法
最新发布
weixin_49817511的博客
07-06 711
css选择器用于选择要应用样式的HTML元素，它是CSS样式表的核心组成部分。它可以通过选择特定的html元素进行css样式的修改，将html和css代码可以分开，降低耦合便于开发。
css选择器的使用
baidu_31741963的博客
05-09 1138
二、CSS是什么（选择器的使用） 2022-5-9 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 1、CSS 的 id 选择器与class选择器 实例： <!DOCTYPE htm
CSS —— 选择器（带你深入了解如何使用选择器）
HuoZhiyan 的博客
03-26 7859
一、基础选择器 基础选择器：标签（元素）选择器，类选择器，id 选择器，通配符选择器。 标签选择器：html 代码中的标签，如 <html>、<body>、<h1>、<p>、<img>。 p { color: red; } <p>实验楼</p> 类选择器：不能是纯数字，不能是标签名。一般是 . + 对应样式描述 p { color: red; }
CSS: hover选择器的使用详解
12-13
之前在学计算机应用的时候，老师教我们使用了:hover选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么用，现在记下怎么使用吧 定义和用法 定义： :hover 选择器用于选择鼠标指针浮动在上面的元素。 :...
详解css常用选择器
09-27
在本文中，我们将深入探讨一些常见的CSS选择器及其用法。 1. **元素选择器**：通过元素名称来选择元素，如`table {background:red;}`将所有表格的背景颜色设为红色。 2. **属性选择器**： - `div[id]` 选择所有...
详解CSS中的选择器优先级顺序
09-24
了解并熟练运用CSS选择器优先级顺序，可以帮助开发者更精确地控制元素的样式，避免不必要的样式冲突，从而提高代码的可读性和维护性。在实际开发中，尽量减少对 `!important` 的依赖，因为它会使代码难以管理和调试...
CSS选择器用法
weixin_44448287的博客
06-22 465
2、选择器 作用：选择页面上的某一个或者某一类元素 2.1、基本选择器 标签选择器：选择一类标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 标签选择器，会选择页面上所有的这个标签的元素*/ h1{
CSS——选择器的使用
Bonsoir777的博客
07-12 2194
本文主要介绍了CSS中选择器的使用方法。
CSS选择器使用
M_hcCSDN的博客
05-31 230
一.首先，我们要知道什么是CSS选择器，我们知道，CSS是用来装饰HTML框架的，那么CSS的语法是由“选择器”和多条声明构成的。 CSS规则： selector{declaration1;declaration2,declaration3;...} 选择器通常我们是用来改变样式的HTML的元素。 好比说： <body> <div>鲁菜</div> <div>川菜</div> <div>西餐</div
CSS选择器怎么用？，设计思想解读开源框架
2401_83621095的博客
03-18 833
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
CSS 选择器的常见用法
weixin_64874291的博客
05-22 1087
前言CSS在编写代码的时候有很多种样式，和和HTML，JS相似，他们都是运行在浏览器中的，下面就介绍一下CSS选择器的常见用法。
CSS常用选择器的用法
fairy_zhong的博客
03-15 414
网页分成三个部分： 结构(HTML) 表现(CSS) 行为(JavaScript) CSS - 层叠样式表 - 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式 而最终我们能看到只是网页的最上边一层 - 总之一句话，CSS用来设置网页中元素的样式 使用CSS来修改元素的样式 第一种方式(内联样式，行内样式)： - 在标签内部通过style属性来设置元素的样式 - 问题： 使用内联样式，样式只能对一个标签生效， 如果希望影响到多个元素必须在每一个元素中都复制一遍 并且当样式发生变化..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值