CSS选择器总结

时间 2019-12-06

标签 css 选择器总结栏目 CSS 繁體版

原文原文链接

前言

作过前端开发的程序员几乎都对CSS选择器或多或少了解些，由于你们几乎都是按照HTML–CSS–JS的顺序来学习。固然，即便你是”半路出家“，直接上手JS的，那你也至少了解ID，类与标签。而本文就对CSS选择器简单作个总结，主要是起到巩固基础的做用。javascript

选择器

选择符是指一条CSS样式规则的最左边部分，总的可分为五大类十八种。css

并联选择器：即群组选择器，即以“,”合并多个分组结果
简单选择器：标签，ID，类，属性，通配符
关系选择器：即派生选择器，亲子，后代，相邻，兄长
伪类选择器：动做伪类，目标伪类，语言伪类，状态伪类，结构伪类，取反伪类
伪元素选择器：这个比较具体点，仅指如下几种。::before(:before) ::after(:after) ::first-line(:first-line) ::first-letter(:first-letter) ::selection

并联选择器

并联选择器即群组选择器，以”, “分割，这个没什么好说的。html

简单选择器

简单选择器分为上面列的五种，其中，通配符选择器即”*”，最简单的避免浏览器内置样式表的影响的方式就是使用该选择器，* { margin: 0; padding: 0;},这里主要说下属性选择器：具体可参考以前的文章CSS各属性选择符区别前端

ps：若是浏览器不支持getElementsByClassName，咱们能够将”div.test”转换div[class~=test]来处理。java

关系选择器

亲子选择器”div > p” 选择做为div元素子元素的全部p元素
后代选择器”div p” 选择div元素全部后代元素中的p元素，由此可知，后代选择器的范围大于亲子选择器
相邻选择器”h1 + p” 选择和h1元素同级且紧接在h1后面出现的p元素，元素h1和元素p拥有共同的父元素
兄弟选择器”h1 ~ p” 选择和h1元素同级且在h1后面出现的全部p元素，元素h1和元素p拥有共同的父元素

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> h1 + p {color: #ff0000;} h2 ~ p {color: #00ff00;} </style>
</head>

<body>
    <p>This is paragraph.</p>
    <h1>This is a h1.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <h2>This is a h2.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>
</html>

伪类选择器

1.动做伪类：:link :hover :focus :hover :active
:focus伪类通常用于input标签，若是用于a标签，则只在使用键盘tab命令选中时实现效果。而其他四个用于a标签要保证“Love-Hate”的顺序。
2.目标伪类：:target,指其id或者name属性与URL中的hash部分(即#以后的部分)匹配上的元素。
3.语言伪类：:lang用来设置使用特殊语言的内容样式。另外，lang虽然做为DOM元素的一个属性，但:lang伪类与属性选择器有所不一样，具体表现为:lang伪类具备”继承性“。程序员

<body lang='de'><p>something</p></body>

若是使用[lang=de]则只能选择到body元素，由于p元素没有lang属性。可是使用:lang(de)则能够同时选择到body元素和p元素，表现出继承性。
4.状态伪类::checked :enabled :disabled :indeterminate
前三个都好理解，最后一个:indeterminate可参考MDN上说名。即，用于多选框中的input元素切在js中设置了其DOM属性indeterminate为true.并且也可用于匹配那些不肯定的<progress>进度条。浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> input, span { background: blue; } :indeterminate, :indeterminate + span { background: red; } </style>
</head>
<body>
    <input type="checkbox"><span>China</span>
    <script type="text/javascript"> document.getElementsByTagName("input")[0].indeterminate = true; </script>
</body>
</html>

5.结构伪类:markdown

:root用于选取根元素，在HTML文档中一般是html元素
:nth-child() :nth-last-child()是全部子元素过滤伪类的蓝本，其余8种都是有它衍生出来的。带有参数，能够是纯数字、代数式或单词。若是是纯数字，数字是从1计起，若是是代数式，n则从零递增。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> li { border: 1px solid limegreen; } li:nth-child(2) { background: #ccc; } </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

:nth-of-type() :nth-of-last-type()与nth-child相似，规则是将当前元素的父节点的全部元素按照tagName分组，只要参数符合它在那一组的位置就被匹配到。
:first-child 用于选择第一个子元素，效果等同于:nth-child(1)
:last-child 效果等同于:nth-last-child(1)
:first-of-type :last-of-type效果等同于:nth-of-type(1) :nth-last-of-type(1)
:only-child 用于选择惟一的子元素，当子元素个数超过1个时，选择器失效
:only-of-type 将父节点的子元素按tagName分组，若是某一组只有一个元素，那么就选择这些组的元素返回。
:empty 用于选择那些不包含任何节点的元素，但容许里面包含注释。

6.取反伪类::not()其参数为一个或多个简单选择器，里面用逗号隔开。学习

选择器权重

简单的权重记忆口诀：从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类选择器+10，一个元素名或者伪元素+1。
具体可参考：你应该知道的一些事情——CSS权重spa