一、前缀属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器的使用(前缀)</title>
<style type="text/css">
p[id^=one]{
font-family: "微软雅黑";
font-size: 16px;
color: red;
text-indent: 2em;
}
</style>
</head>
<body>
<p id="one">
为了看日出,我常常早起。那时天还没有大亮,周围非常清静,船上只有机器的响声。
</p>
<p id="two">
天空还是一片浅蓝,颜色很浅。转眼间天边出现了一道红霞,慢慢地在扩大它的范围,加强它的亮光。我知道太阳要从天边升起来了,便转眼地望着那里。
</p>
<p id="one1">
果然过了一会儿,在那个地方出现了太阳的小半边脸,红是真红,却没有亮光。这个太阳好象负着重荷似地一步一步、慢慢地努力上升,了最后,终于冲破了云霞,完全跳出了海面,颜色红得非常可爱。一刹那间,这个深红的圆东西,忽然发出了夺目的亮光,射得人眼睛发,它旁边的云片也突然有了光彩。
</p>
<p id="two1">
有时太阳走进了云堆中,它的光线却从云里射下来,直射到水面上。这时候要分辨出哪里是水,哪里是天,倒也不容易,因为我就只看见片灿烂的亮光。
</p>
</body>
</html>

结果:

二、后缀属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器的使用(后缀)</title>
<style type="text/css">
p[id$=main]{
font-family: "微软雅黑";
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<p id="old1">
盼望着,盼望着,东风来了,春天的脚步近了。
</p>
<p id="old2">
小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟,捉几回迷藏。风轻悄悄的,草绵软软的。
</p>
<p id="oldmain">
桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味,闭了眼,树上仿佛已经是桃儿、杏儿、梨儿!花下成千成百的蜜蜂嗡嗡地闹着……
</p>
<p id="newmain">
“吹面不寒杨柳风”,不错的,像母亲的手抚摸着你。风里带来些新翻的泥土的气息,混着青草味,还有各种花的香,都在微微润湿的空气酝酿。鸟儿将窠巢安在繁花嫩叶当中,高兴起来了……
</p>
</body>
</html>

结果:

三、包含属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器的使用(包含)</title>
<style type="text/css">
p[id*=demo]{
font-family: "微软雅黑";
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<p id="demo1">
我们消受得秦淮河上的灯影,当四月犹皎的仲夏之夜。
</p>
<p id="main1">
在茶店里吃了一盘豆腐干丝,两个烧饼之后,以至歪的脚步踅上夫子庙前停泊着的画访,就懒洋洋到躺到藤椅上去了。好郁蒸的江南,傍也还是热的。"快开船罢!"桨声响了。
</p>
<p id="newdemo">
小的灯舫初次在河中荡漾;于我,情景是颇朦胧,滋味是怪羞涩的。我要错认它作七里的山塘;可是,河房里明窗洞启,映着玲珑入画的栏干,顿然省得身在何处了……
</p>
<p id="olddemo">
又早是夕阳西下,河上妆成一抹胭脂的薄媚。是被青溪的姊妹们所薰染的吗?还是匀得她们脸上的残脂呢?寂寂的河水,随双桨打它,终没言语。密匝匝的绣恨逐老去的年华,已都如蜜饧似的融在流波的心窝里、连呜咽也将嫌它多事,更哪里论到哀嘶……
</p>
</body>
</html>

结果:

Html学习之八(CSS选择器的使用--属性选择器)的更多相关文章

  1. css:id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

  2. js实现类选择器和name属性选择器

    jQuery的出现,大大的提升了我们操作dom的效率,使得我们的开发更上一层楼,如jQuery的选择器就是一个很强大的功能,它包含了类选择器.id选择器.属性选择器.元素选择器.层级选择器.内容筛选选 ...

  3. css笔记04:属性选择器

    1.属性选择器: 带有 title 属性的所有元素设置样式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  4. css基础知识之属性选择器

    css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. 前端学习 -- Html&Css -- 条件Hack 和属性Hack

    条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...

  6. CSS基础学习-14 CSS visibility与overflow属性

  7. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  8. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  9. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

随机推荐

  1. Python 获 Mozilla 和扎克伯格夫妇 40 余万美金资助

    Python 软件基金会近日发文宣布,收到来自 Mozilla Corporation 和 Chan Zuckerberg Initiative(CZI)的资金赞助,共计 407,000 美元.这笔款 ...

  2. TensorFlow从1到2(十五)(完结)在浏览器做机器学习

    TensorFlow的Javascript版 TensorFlow一直努力扩展自己的基础平台环境,除了熟悉的Python,当前的TensorFlow还实现了支持Javascript/C++/Java/ ...

  3. 80道最新java基础部分面试题(七)

    自己整理的面试题,希望可以帮到大家,需要更多资料的可以私信我哦,大家一起学习进步! 70.TreeSet里面放对象,如果同时放入了父类和子类的实例对象,那比较时使用的是父类的compareTo方法,还 ...

  4. 《移动WEB前端高级开发实践@www.java1234.com.pdf》

    HTTP服务器: http-server 3.6.4 利用 Performance API 分析网站性能 页面加载生命周期 4. CSS3 伪类.伪元素, 看https://www.runoob.co ...

  5. asp.net的原理

    Asp.net的作业流是指什么?很多人都不是很了解,也不知道是用来干什么的有怎样运用,其实能够从简略的基础了解. 作业流(Workflow),便是“事务进程的部分或全体在核算机使用环境下的主动化”(i ...

  6. Servlet一次乱码排查后的总结

    由来 在写一个小小的表单提交功能的时候,出现了乱码,很奇怪request上来的参数全部是乱码,而从数据库查询出来的中文显示到页面正常,锁定肯定是request对象那里出了问题.后来经过排查,发现是我封 ...

  7. 【洛谷5335】[THUSC2016] 补退选(指针实现Trie)

    点此看题面 大致题意: 三种操作:加入一个字符串,删除一个字符串,求最早什么时候以某个字符串为前缀的字符串个数超过给定值. \(Trie\) 这道题显然是\(Trie\)的暴力裸题. 考虑我们对于\( ...

  8. MacOS命令行打包+签名+公证+生成dmg文件

    关于dmg文件是什么,和为什么要进行公证? 简单说下,dmg文件就是一个可直接在mac上安装的安装包,我自己的理解是就像windows上的exe安装包一样: 公证是将app传到苹果商店去做认证,如果不 ...

  9. MySQL数据库实战之优酷

    目录 一.项目总结三步骤 二.项目需求分析 三.搭建框架 四.ORM框架分析 五.数据库设计 六.项目中各个功能模块分析 七.项目中遇到的问题及怎么解决的 八.客户端代码框架 8.1 conf 8.1 ...

  10. Redis 内存淘汰机制

    Redis内存淘汰指的是用户存储的一些键被可以被Redis主动地从实例中删除,从而产生读miss的情况,那么Redis为什么要有这种功能?这就是我们需要探究的设计初衷.Redis最常见的两种应用场景为 ...