宜宾市网站建设,虚拟网站建设,二维码转链接,iis如何做同时运行两个网站80端口前言
主要内容来自菜鸟教程
CSS 选择器 | 菜鸟教程
分类是我自己理解的分类#xff0c;示例说明优化统一了表述风格。
正文
选择器CSS示例示例说明基础*2*选择所有元素:root3:root选择文档的根元素element1p选择所有p元素:not(selector)3:not(p)选择所有并非p元素…前言
主要内容来自菜鸟教程
CSS 选择器 | 菜鸟教程
分类是我自己理解的分类示例说明优化统一了表述风格。
正文
选择器CSS示例示例说明基础*2*选择所有元素:root3:root选择文档的根元素element1p选择所有p元素:not(selector)3:not(p)选择所有并非p元素的元素element,element1div,p选择所有div元素和 p 元素#id1#firstname选择所有idfirstname的元素.class1.intro选择所有classintro的元素element.class1p.hometown选择所有 classhometown 的 p 元素位置关系element element1div p选择div元素内的所有p元素elementelement2divp选择所有父级是 div 元素的 p 元素element1~element23p~ul选择p元素之后的所有ul元素elementelement2divp选择所有 div 元素之后紧跟的第一个 p 元素:first-letter1p:first-letter选择所有p元素的第一个字母:first-line1p:first-line选择所有p元素的第一行:before2p:before在所有p元素之前插入内容:after2p:after在所有p元素之后插入内容包含关系:first-of-type3p:first-of-type选择是其父级第一个p元素的所有p元素:nth-of-type(n)3p:nth-of-type(2)选择是其父级第二个p元素的所有p元素:last-of-type3p:last-of-type选择是其父级最后一个p元素的所有p元素:nth-last-of-type(n)3p:nth-last-of-type(2)选择是其父级倒数第二个p元素的所有p元素:only-of-type3p:only-of-type选择是其父级唯一p元素的所有p元素:empty3p:empty选择没有任何子级的所有p元素包括文本节点父子关系:first-child2p:first-child选择是其父级第一个子级的所有p元素:nth-child(n)3p:nth-child(2)选择是其父级第二个子元素的所有p元素:last-child3p:last-child选择是其父级最后一个子级的所有p元素:nth-last-child(n)3p:nth-last-child(2)选择是其父级倒数第二个子级的所有p元素:only-child3p:only-child选择是其父级唯一子级的所有p元素属性[attribute]2[target]选择所有设置target属性元素[attributevalue]2[target-blank]选择所有target属性等于-blank的元素:lang(language)2p:lang(it)选择所有lang属性的起始值it的p元素[attribute|language]2[lang|en]选择所有lang 属性等于 en或者以 en- 为开头的元素[attribute^value]3a[src^https]选择所有src属性的值以https开头的元素[attribute$value]3a[src$.pdf]选择所有src属性的值以.pdf结尾的元素[attribute*value]3a[src*runoob]选择所有src属性的值包含子字符串runoob的元素[attribute~value]2[title~flower]选择所有title属性包含单词flower的元素链接状态:link1a:link选择所有未访问链接:visited1a:visited选择所有访问过的链接:active1a:active选择活动链接:hover1a:hover选择鼠标在链接上面时:target3#news:target选择当前活动的#news元素包含该锚名称的点击的URL表单状态:focus2input:focus选择获取焦点的input元素:enabled3input:enabled选择所有已启用的输入元素:disabled3input:disabled选择所有禁用的输入元素:checked3input:checked选择所有选中的输入元素::selection3::selection选择被用户选中或处于高亮状态的部分表单属性:out-of-range3:out-of-range选择值在指定区间之外的input元素:in-range3:in-range选择值在指定区间之内的input元素:read-write3:read-write选择可读及可写的元素:read-only3:read-only选择设置 readonly只读 属性的元素:optional3:optional选择可选的输入元素:required3:required选择设置 required 属性的元素:valid3:valid选择输入值合法的元素:invalid3:invalid 选择输入值非法的元素测试代码
测试代码
!DOCTYPE
htmlheadmeta charsetutf-8 /metanameviewportcontentwidthdevice-width,initial-scale1.0,minimum-scale1.0,maximum-scale1.0,user-scalableno/title测试css/titlestylediv {width: 400px;min-height: 100px;border: 1px solid #999;}div p {color: red;}p.testp::first-letter {color: blue;font-weight: bold;font-size: 2rem;}p.testp::first-line {background-color: #ccc;}p:first-of-type {font-size: 2rem;}p:empty {width: 200px;height: 36px;background-color: green;}/style/headbodydiv classtest1测试div1/divdivp测试p文档中第一个p/pp测试p文档中第二个p/p/divp测试p1/pdiv classtest2测试div2/divp测试p2/pdiv classtest3测试div3/divp测试p3/phr /p classtestpLorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, idprovident! Ex eum harum recusandae, ab ut, enim odit necessitatibusimpedit eligendi soluta, magnam eveniet perferendis a nihil hic minima./pp/pscript/script/body
/html
