css基础 属性选择器 属性值以指定字符开头 / 结束

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">

        /* 标签a的class属性的值以Taoists开始 */
        a[class^="Taoists"] {
            color:darkcyan;
        }

        /* 标签a的class属性的值以Taoists结束 */
        a[class$="Taoists"] {
            background-color:cornflowerblue;
        }

    </style>
</head>
<body>

    <a href="#" class="Taoists-1">道德经</a><br />
    <a href="#" class="Confucian">大学</a><br />
    <a href="#" class="Taoists-2">南华经</a><br />
    <a href="#" class="Confucian">论语</a><br />
    <a href="#" class="Buddist">金刚经</a><br />
    <a href="#" class="Confucian">中庸</a><br />
    <a href="#" class="Confucian">孟子</a><br />

    <!--
        虽然下面这个标签a的属性class的值包含了Taoists,
        但并不是以其为开始,而是以其作为结束
        -->
    <a href="#" class="Confucian Buddist Taoists">传统文化</a>
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8440577.html

时间: 2024-10-10 14:40:39

css基础 属性选择器 属性值以指定字符开头 / 结束的相关文章

CSS基础,选择器

一.css:      是层叠样式,用于美化修饰页面的二.html与css的区别    html作用:                   决定了网页的内容和结构    css作用:        美化网页,具体说是美化修饰html标记三.css语法:    选择器{          属性1:值1:           属性2:值2:          }      四.基本选择器:        html标记选择器.类选择器.id选择器 html标记选择器:       声明时:选择器名是h

jquery属性选择器(匹配具有指定属性的元素)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>属性选择器</title> &

CSS基础和选择器

什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里. css的优势 1.内容与表现分离 2.网页的表现统一,容易修改 3.丰富的样式,使页面布局更加灵活 4.减少网页的代码量,增加网页浏览器速度,节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录 CSS语法 CSS基础语法 CSS语法可以分为两部分: 选择器 声明 声

多选框其他,css基础,选择器基础

多选框 在多选框中如果想默认选中时,可以加入 checked 属性,属性值也为 checked 在选择时,如果想要达到,点击文字也能选中的效果,要利用  label  标签, 要在选项标签的 id  和  label  之间建立联系 <input id="app" type="checkbox"/> <label   for=“app”>这里写可以点击的文字</label>    <!-- input 选项标签的 id  作

CSS基础及选择器

CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样式属性(

css基础与选择器——精通css学习笔记(一)

开篇,作者就告诉了我们正确的学习方式——先用后学.在有了一定的基础之后,就要去尝试着做一些小东西.学的过程中要保持入和出的平衡,不输出就等于没有输入.很多经验总是相同的,类似这样正确的道理,总是在能在各种场合被告诫. 学习css的正确方法,也正是在有了一定的基础知识之后,就要多看源码,多看别人的小例子,尝试着大胆的在自己的网站上应用. 新技术的出现,往往是因为旧技术的局限性所导致,css也是如此.在早期,html被承担了太多"功能".font标签用来控制各种样式,繁琐的表格嵌套用来布局

css基础 一个class属性给两个名字(实用技巧)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

CSS基础——position位置属性

relative:相对布局,相对自身进行偏移,并且保留原有位置. absolute:绝对布局,相对容器进行偏移,不保留原有位置.注意:容器必须设置position为relative或absolute,如果没有相对body偏移.  同一行中absolute会对 inline-block 有影响,具体是将原来顶部对齐,变成底部对齐.这时用float不会有影响. fixed:固定布局,相对浏览器窗口位置固定,没有任何依赖感. static:position的默认值. z-index:重叠时设置层次,值

css基础:样式属性

1.背景与前景:background-color::背景色,样式表优先级高. background-image:url(路径):设置背景图片 background-attachment:fixed:背景固定,不随字体滚动.scroll:背景随字体滚动. background-repeat:no-repeat:不平铺.repeat:平铺.repeat-x:横向平铺.repeat-y:纵向平铺. background-position:center 背景图居中,设置背景图时,top 上,left 左