经验总结

  1. 首页 > 生活 > >

CSS选择器大全48式

生活百科


CSS选择器大全48式

文章插图
00、CSS选择器CSS的选择器分类如下图，其中最最常用的就是基础选择器中的三种：元素选择器、类选择器、id选择器 。伪类选择器就是元素的不同行为、状态，或逻辑 。然后不同的选择器组合，基于不同的组合关系，产生了6中组合关系选择器 。
CSS选择器大全48式

文章插图
01、基础选择器（5）1.1、通配选择器：*{}针对所有HTML标签全部适用，选择器名=星号*（通配符），一般只做初始化使用 。在 CSS3 中，星号 (*) 可以和命名空间组合使用，如 ns|*{} 。
【CSS选择器大全48式】/* 通用选择器，针对所有标签 */* {color: black;font-size: 15px;box-sizing: border-box; margin: 0px; padding: 0px;font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;}1.2、元素选择器：元素名{}用元素名称作为选择器名称，如p、h1、div、img等，对作用域内所有该标签元素生效，所以常用来描述某一元素的共性 。
hr {margin: 32px 5px;}h1 {background-color: lightblue;text-indent: 0.5em;}1.3、类选择器：.类名{}定义时前面加点.类名，在标签的属性“class”使用该样式，这应该算是最常用的选择器了 。
/* 类名class选择器 */.particle{font-size: 18px;font-family: 楷体;}.pindent{text-indent: 2em;}<p class="particle pindent">一段文字内容-section</p>类选择器可以给所有需要的元素使用，可同时给多个元素使用，应用广泛 。
  • 类名字母开头（小写），不能以数字开头 。
  • 同一个标签可以用多个类选择器，空格隔开 。基于此，一般会将样式抽象、分类为多个类样式，便于复用 。
1.4、id选择器：#id{}用标签的id作为选择器名称，加井号“#”，针对作用域内指定id的标签生效，所以只能使用一次 。
  • ID是标签的唯一标识，不能重复 。如果id重复，样式其实是会生效的，但查找元素（document.getElementById(id)）只会返回第一个 。
  • ID字母开头（小写），不能以数字开头 。
/* id选择器 */#a1{color:blueviolet;font-size: 16px;text-decoration-line:underline ;}1.5、属性选择器：[属性=value]{}元素都有属性，属性选择器是在其他选择器的基础上加上属性的筛选，用来筛选有特定属性、或属性值的元素，css3特性 。这里的属性值匹配是大小写敏感的，结尾加上字符i（li[title*= "a" i]），则会忽略大小写敏感 。
属性选择器示例描述[attr]li[title] .cli[title]包含属性，筛选li元素且有属性title的元素[attr=value]li[title="a"]包含属性+值相等，筛选li元素+title属性，且值为“a”的元素[attr^=value]li[title^= "a"]属性值开头字符：开头字符匹配[attr$=value]li[title$= "a"]属性值结尾字符：结尾字符匹配[attr*=value]li[title*= "a"]属性值包含字符：包含字符匹配[attr~=value]li[title~="a"]包含属性-值包含（完整单词），注意是值包含（如多个样式名，空格隔开的多个值），不是字符匹配包含，空格隔开的字符也算 。[attr|=value]li[title|="a"]包含属性-值开头（完整单词），同上，属性值是a，或开始为a且后面跟连字符-（中划线）<style>li[title]{color: red;}li[title="a"]{font-weight: bold;}li[title~="a"]{text-decoration: underline;}li[title|="a"]{text-indent: 2em;}li[title^= "a"]{text-shadow: 2px 2px 3px black;}li[title$= "a"]{background: center url(../res/bimg.jpg);}li[title*= "a"]{background-color: azure;}.cli[title]{font-style: italic;}</style>

经验总结扩展阅读


上一篇：2023年1月27日制作猫窝好吗 2023年农历正月初六宜制作猫窝吗

下一篇：2023年9月15日是拆卸的黄道吉日吗 2023年农历八月初一宜拆卸吗