CSS常用选择器总结

东东233
304 阅读4分钟

害！说来遗憾，工作三年了，之前面试遇到给选择符的问题，倒还把自己弄晕了，回来仔细整理一波，发现平时写代码中对选择符并没有做到物尽其用，以下部分资料来自网上和《精通CSS 第三版》代码来自亲身实践

类型选择符

笔者入门的时候就接触到的选择符号之一，术语也有叫做元素选择符，用于选择特定类型的元素

p {
    color: red;
}
div {
    padding: 10px;
}

后代选择符

用于选择某个或者某组元素的后代

p em {
    padding: 0 10px;
}

ID选择符与类选择符

顾明思义，选择对应的id和class的元素，

/* id选择器 */
#title {
    ....
}
/* 类选择器 */
.date {
    ...
}

子选择符（>）、相邻同辈选择符(+)、后续兄弟选择符

这里需要注意的是+选择符只能选中后面的不能选中前面的，主要是网页渲染性能相关，浏览器没做支持，先不做深究

<!--html代码-->
  <article>
    <h1>title</h1>
    <p class="p1">p1</p>
    <p>p2</p>
    <p>p3</p>
  </article>

/* css代码 */
/* h1元素字体红色 */
article > h1 {
    color: red
}
/* p2行高 */
.p1 + p {
    line-height: 1.5;
}
/* p2 p2 字体大小 */
.p1 ~ p {
    font-size: 12px;
}

通用选择符(*)

慎用，一般结合其他选择符使用,比如选择上面HTML代码中article下的所有元素

article > * {
    ...
}

属性选择符

属性选择符基于元素是否有某个属性或者属性是否有某个值来选择元素

/* 所有具有href属性的a标签 */ 
a[href] {
}
/* 所有type等于‘submit’的input */
input[type="submit"] {
}
  • 要匹配以某些字符开头的属性值，在等号前加(^)
  • 要匹配以某些字符结尾的属性值，在等号前加($)
  • 要匹配包含某些字符的属性值，在等号前加(*)
  • 要匹配以空格分隔的字符串中的属性值，在等号前加(~)
  • 匹配开头是指定值或值后面跟一个短划线的情
/* 匹配以http开头的a标签 */
a[href^="http"] {
}
/* 匹配png图片 */
img[src$=".png"] {
}
/*  匹配包含google的连接 */
a[href*="google"] {
}
/* 匹配class有error的p标签 */
p[class~="error"] {
}
/* 匹配class为message-?的类，这种情况需要注意的是如果有多个类，且类名写在message前，则会失效 */
p[class|='message'] {
}

此外属性选择还可以多个一起使用语法如下

a[href*='google'][target='_blank'] {
}

伪元素

::first-line

文本的第一行

::first-letter

文本第一个字符

::before

内容开头假想的元素

::after

内容末尾假想的元素

需要注意的是伪元素应该使用双冒号表示，这样是为了和伪类区分开，但是一些旧版本支持的是单冒号，处于兼容性考虑的话建议使用单引号

/* 实现内容的第一个单词占据两行 */
p {
  font-size: 1rem;
  line-height: 1.5rem;
}
p::first-letter {
  font-size: 2rem;
  line-height: 3rem;
  float: left;
}

伪类

超链接和按钮常用伪类

/* 未访问过 */
a:link {}
/* 访问过 */
a:visited {}
/* 鼠标悬停及获取焦点时候 */
a:hover, a:focus {}
/* 活动状态（鼠标按下） */
a:active {}

目标与反选

:target 当前的锚点（即连接中的hash值部分）为该元素id时

<h1 id="title">标题</h1>
<p id="content">内容</p>

<style>
    /* 当锚点为title时候标题变为红色 */
    h1:target {
      color: red;
    }
    /* 当锚点为content时内容变为红色 */
    p:target {
      color: red;
    }
</style>

反选 :not

<p class="message">message</p>
<p class="message error">message-error</p>
<style>
/* 第一个message为红色 */
.message:not(.error) {
  color: red;
}
</style>

结构化伪类

:nth-child(n) 选取其父元素的第n个子元素

:nth-of-type(n) 选取其父元素的第n个相同标签的子元素

n可以使特殊值得odd|even表示基数或者偶数 也可以是具体的大于1的数值表示选中具体哪一个 还可以是一个表达式比如2n+1，这里n会从0开始网上递增，直达没有可选中时候停止，计算出来的数字即为选中的

:nth-last-child(n)

:nth-last-of-type(n)

这两个和前两个规则相同，不过就是从后面开始计算 此外还有 :first-child :last-child :first-of-type :last-of-type 几个，在实际开发中灵活运用往往能满足很多的需求,比如我们为最后一个元素去掉去掉magin

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

/*  */

<style>
li {
    margin-bottom: 10px;
}
li:last-of-type {
    margin-bottom: 0;
}
</style>

结构化选择符不支持ie8以及更早版本的浏览器

表单类伪类

表单类伪类有许许多多，这里只简单总结几个，笔者写的时候用着实的不多，往后会加强

  • :required 必填控件
  • :optional 非必填
  • :valid 针对email验证是否为有效email
  • :invalid 为无效email
  • :in-range :out-of-range 针对number是否在有效值范围内

参考资料：

《精通CSS:高级Web标准解决方案》

avatar
文章
阅读
粉丝