CSS选择符类型

时间：2023-01-28 09:46:16

一、标签选择符：针对某一类标签，可以以标签作为选择符

<style type="text/css">

    p{color:#F00; font-size:36px;}

</style>

</head>

<body>

        <p>0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>

        <h1>玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>

        <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p>

        <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>

        <p>斯帅称客战开拓者奥登不打 波什：他很快就可复出</p>

</body>

二、类选择符：通过类选择符定义一个样式，需要改样式的元素就在该元素内通过class属性将该样式添加到该元素中
    　　　                定义类名的时候数字不要开头，起名的时候最好要有意义

　　　　                 可以同时给某个元素应用多个类格式：class="类1 类2"(类与类之间用空格隔开)

<style type="text/css">

    .red{color:#C00;}

    .family{font-family:"汉仪清韵体简";}

</style>

</head>

<body>

    <p class="red">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>

    <h1>玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>

    <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p>

    <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>

    <p class="red family">斯帅称客战开拓者奥登不打 波什：他很快就可复出</p>

</body>

三、ID选择符：只想针对某一个元素进行控制，与类基本相似，只是以英文"#"开头，因为ID具有唯一性，所以在网页中只能出现一次

　　　　　        定义id的时候数字不要开头，起名最好要有意义

<style type="text/css">

    #two{color:#600; font-family:'汉仪行楷简';}

    #one{font-family:Arial, Helvetica, sans-serif; font-family:'汉仪行楷简'; font-size:36px;}

</style>

</head>

<body>

<h1>*主持召开<span>国务院</span>常务会议</h1>

    <h2 id="two"> 听取最低生活保障政策落实督查情况汇报</h2>

    部署进一步加强和改进低保工作<br />

    <div id="one">决定将《社会救助暂行办法（草案）》向社会公开征求意faksdjfkasfkasdfj</div>

</body>

四、包含(派生)选择符：（选择符的嵌套使用，针对某个元素中的子元素进行控制，就可以使用该方法，这样就可以不用id或者类选择符，代码可以简洁
     　　　　　　　　　　　　       语法：e1 e2{属性：属性值}（e1是父元素，e2是子元素）

<style type="text/css">

    p strong{color:#F00;}

</style>

</head>

<body>

    <p>0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>

    <h1>玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>

    <p><strong>热火</strong>今夜还一功臣必须赞 11分不多但却分分是金!</p>

    <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>

    <div>斯帅称客战开拓者奥登不打 波什：他很快就可复出</div>

    <ul>

           <li> 安东尼推特怒骂无礼粉丝：我没要求你这货支持我</li>

        <li>大范：篮网就像低级联赛球队 他们的处境联盟最差</li>

        <li>基德求教真神获五字真经 波帅：他够强硬能做到这点</li>

    </ul>

    <div>灭<strong>雷霆</strong>擒步行者!隐形杀手冒头 东部又一新控神诞生</div>

    <h1>加内特直言还没找到节奏：经历过比这更艰难的时期</h1>

</body>

五、通配选择符：*{属性：属性值}      可以控制所有的html元素
                         作用范围很广，但是效率较低（工作中慎用）

<style type="text/css">

    *{color:#0C0; font-size:18px;}

</style>

</head>

<body>

     <p>0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>

    <h1>玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>

    <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p>

    <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>

    <div>斯帅称客战开拓者奥登不打 波什：他很快就可复出</div>

    <ul>

        <li> 安东尼推特怒骂无礼粉丝：我没要求你这货支持我</li>

        <li>大范：篮网就像低级联赛球队 他们的处境联盟最差</li>

        <li>基德求教真神获五字真经 波帅：他够强硬能做到这点</li>

    </ul>

    <div>灭雷霆擒步行者!隐形杀手冒头 东部又一新控神诞生</div>

    <h1>加内特直言还没找到节奏：经历过比这更艰难的时期</h1>

</body>

六、选择符分组（集体控制）：将同样的样式用于多个选择符，选择符之间用逗号隔开
                                                        语法：选择符1,选择符2,选择符3{属性：属性值}

<style type="text/css">

    p,h1,div{

        color:#F00;

        font-size:36px;

    }

</style>

</head>

<body>

    <p>0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>

    <h1>玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>

    <p><strong>热火</strong>今夜还一功臣必须赞 11分不多但却分分是金!</p>

    <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>

    <div>斯帅称客战开拓者奥登不打 波什：他很快就可复出</div>

    <ul>

        <li> 安东尼推特怒骂无礼粉丝：我没要求你这货支持我</li>

        <li>大范：篮网就像低级联赛球队 他们的处境联盟最差</li>

        <li>基德求教真神获五字真经 波帅：他够强硬能做到这点</li>

    </ul>

    <div>灭<strong>雷霆</strong>擒步行者!隐形杀手冒头 东部又一新控神诞生</div>

    <h2>加内特直言还没找到节奏：经历过比这更艰难的时期</h2>

</body>

七、标签指定式选择符：想用id或class的同时还想用标签选择符
    　　　　　　　　                  语法：p#one(注意这里不用空格和任何分隔符)表示针对id为one的p标签

　　　　　　　　　　　　　　　　　　  h1.p1表示针对class为p1的h1标签

<style type="text/css">

    p#one{

        color:#F00;

        font-size:36px;

    }

    p.cla{

        background-color:#00F;

        font-size:24px;

    }

</style>

</head>

<body>

    <p id="one">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>

    <h1>玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>

    <p><strong>热火</strong>今夜还一功臣必须赞 11分不多但却分分是金!</p>

    <p class="cla">詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>

</body>

八、组合选择符：将所有选择符类型组合使用

九、属性选择符：

<style type="text/css">

    input[type="text"]{ border:2px solid red; color:green;}

</style>

<body>

    姓名：<input  type="text" value="姓名"/>

</body>

CSS选择符类型的更多相关文章

  1. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  2. CSS选择符详解

    一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 如下: body {} div {} p {} span {} ...

  3. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  4. 整理CSS选择符

    1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...

  5. &lbrack;css选择器&rsqb;总结：IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  6. CSS选择符-----元素选择符

       通配选择符(*)           选定所有对象 通配选择符(Universal Selector) 通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用 & ...

  7. 编写高效的CSS选择符（节选）

    最右边优先 css选择符是从右向左进行匹配的. 样式系统从最右边的选择符开始向左匹配规则.只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出. ...

  8. CSS选择符详解之关系选择符篇

    原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...

  9. css选择符权重

    css选择符权重 目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属 ...

随机推荐

  1. Java 理论与实践&colon; 正确使用 Volatile 变量--转

    原文地址:http://www.ibm.com/developerworks/cn/java/j-jtp06197.html Java 语言中的 volatile 变量可以被看作是一种 “程度较轻的  ...

  2. 动态链接库dll键盘钩子后台记录代码示例

    //.header #ifndef _DLLHOOK_H_ #define _DLLHOOK_H_ #include <windows.h> #define DLL_EXPORT_FUN ...

  3. &period;Net 下FCKeditor上传图片加水印

    配置FCKEditor请参考网上的. 如果你用的是.net的FCKEditor,把用到的FCKEditor.Net项目解压缩 在FCKEditor.net项目中,依次找到FileBrowser--&g ...

  4. win32画线考虑去锯齿

    整理日: 2015年2月16日 这几天一直在研究win32 SDk下画线去锯齿,之前一直用的QT的画线接口函数,里面有去锯齿的效果,可是突然项目要求不能用QT的只能用win32 SDK下的GDI画线接 ...

  5. 一步一步学习SignalR进行实时通信&lowbar;3&lowbar;通过CORS解决跨域

    原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...

  6. 在Windows7中的DPI与主题的问题

    测试环境Windows7x64,vb6.0 测试在XP系统下,DPI计算似乎没问题 Screen.TwipsPerPixelX=1440/DPI=1440/96=15Screen.TwipsPerPi ...

  7. MYSQL使用PMM进行性能监控

    简介Percona监视和管理(PMM)是一个用于管理和监视MySQL和MongoDB性能的开源平台.它是由Percona与托管数据库服务.支持和咨询领域的专家合作开发的. PMM是一个免费的开源解决方 ...

  8. centos7中安装python3&period;7遇到的问题

    安装python3.7的步骤 wget   https://www.python.org/ftp/python/3.7.3/Python-3.7.3.tar.xz yum install -y gcc ...

  9. ARMV8 datasheet学习笔记3：AArch64应用级体系结构之Atomicity

    1.前言 Atomicity是内存访问的一个属性,描述为原子性访问,包括single-copy atomicity和multi-copy atomicity 2.基本概念 observer 可以发起对 ...

  10. 2、Reactive Extensions for &period;NET（译）

    实验3-引入 .net 中的 events 到 Rx 目标:前面实验中的使用各种工厂构造方法创建一个 可观察序列是一个部分.把 .net 中现有的异步数据源进行关联 是更重要的事情.在这次实验中我们将 ...

相关文章