css选择符类型详细介绍

网页制作 2024/11/16 佚名

3 2 1

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

复制代码代码如下:
<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>
部署进一步加强和改进低保工作
<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></p> <p><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></p> <p><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></p> <p><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>

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

css选择符

标签：

css选择符

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

岱庙资源网 Copyright www.zgmyg.com

评论“css选择符类型详细介绍”

css选择符类型详细介绍

暂无“css选择符类型详细介绍”评论...

www.zgmyg.com 岱庙资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

css选择符类型详细介绍

css选择符

css基础知识之选择器使用示例

css文字控制与css文本样式示例和属性

评论“css选择符类型详细介绍”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

css选择符类型详细介绍

css选择符

css基础知识之选择器使用示例

css文字控制与css文本样式示例和属性

评论“css选择符类型详细介绍”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存