CSS选择器

姐一如既往的优雅
73 阅读9分钟

基础选择器

通配符选择器

语法结构：*{css属性名：属性值;}

作用：找到页面中所有的标签，然后设置样式。

注意

  1. 开发中应用极少，只有在特殊的情况下才会使用。
  2. 在页面中可能会用于去除页面中默认的margin和padding。
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <div>
        111
    </div>
</body>

标签选择器

语法结构：标签名{css属性名：属性值;}

作用：通过标签名，找到页面中所有的这类标签，并设置样式。

注意

  1. 标签选择器选择的是一类标签，而不是单独的一个。
  2. 标签选择器无论嵌套关系有多深，都能够找到对应的标签。
<style>
    p {
        color: red;
    }
</style>
<body>
    <div>
        111
        <p>
            2222
            <div>
                333
                <p>444</p>
            </div>
        </p>
    </div>
</body>

类选择器（class选择器）

语法结构：.类名{css属性名：属性值;}

作用：通过类名，找到页面中所有的带有这个类名的标签，并设置样式。

注意

  1. 所有的标签上都有class属性，class属性的属性值成为类名。
  2. 类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头。
  3. 一个标签中可以同时有多个类名，类名之间用空格隔开。
  4. 类名可以重复，一个类选择器可以同时选中多个标签。
<style>
    .class-one {
        color: red;
    }
    .class-two {
        font-weight: bold;
    }
</style>
<body>
    <div class="class-one">
        111
        <div>
            <div class="class-one class-two">
                222
            </div>
        </div>
    </div>
</body>

id选择器

语法结构：#id属性值{css属性名：属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，并设置样式。

注意

  1. 所有的标签上都有id属性。
  2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的。
  3. 一个标签上只能有一个id属性值。
  4. 一个id选择器只能选中一个标签。
<style>
    #id-one {
        color: red;
    }
</style>
<body>
    <div id="id-one">
        111
    </div>
</body>

复合选择器

交集选择器

语法结构：选择器1选择器2{css样式}

作用：选中页面中同时满足多个选择器的标签。

注意

  1. 多个选择器之间没有任何东西隔开，紧挨着的。
  2. 交集选择器中如果有标签选择器，标签选择器必须放在前面。
<style>
    div.class-one {
        color:red;
    }
    div#id-one {
        color:green;
    }
</style>
<body>
    <div class="class-one">
        111
    </div>
    <div id="id-one">
        222
    </div>
    <div>
        333
    </div>
</body>

并集选择器

语法结构：选择器1,选择器2{css样式}

作用：同时选择多组标签，设置相同的样式。

注意

  1. 选择器与选择器之间用,隔开。
<style>
    p, div, .class-one {
        color: red;
    }
</style>
<body>
    <div class="class-one">
        111
    </div>
    <div>
        222
    </div>
    <p>
        333
    </p>
</body>

属性选择器

[属性]

语法结构：[属性]{css样式}

作用：选中含有指定属性的元素。

<style>
    [title] {
        color: red;
    }
</style>
<body>
    <div title="111">
        111
    </div>
    <div>
        222
    </div>
</body>

[属性=属性值]

语法结构：[属性=属性值]{css样式}

作用：选中含有指定属性和指定属性值的元素

注意

  1. 属性值只能由数字、字母、下划线、中划线组成，并且不能以数字开头。
<style>
    [title=aaa] {
        color: red;
    }
</style>
<body>
    <div title="aaa">
        aaa
    </div>
    <div title="bbb">
        bbb
    </div>
</body>

[属性^=属性值]

语法结构：[属性^=属性值]{css样式}

作用：选中含有指定属性和指定属性值开头的元素。

注意

  1. 属性值只能由数字、字母、下划线、中划线组成，并且不能以数字开头。
<style>
    [title^=aaa] {
        color: red;
    }
</style>
<body>
    <div title="aaa-one">
        aaa
    </div>
    <div title="aa">
        bbb
    </div>
</body>

[属性$=属性值]

语法结构：[属性$=属性值]{css样式}

作用：选中含有指定属性和指定属性值结尾的元素。

注意

  1. 属性值只能由数字、字母、下划线、中划线组成，并且不能以数字开头。
<style>
    [title$=aaa] {
        color: red;
    }
</style>
<body>
    <div title="aaa-one">
        aaa
    </div>
    <div title="bbb-aaa">
        bbb
    </div>
</body>

[属性*=属性值]

语法结构：[属性*=属性值]{css样式}

作用：选中指定属性和含有指定属性值的元素。

注意

  1. 属性值只能由数字、字母、下划线、中划线组成，并且不能以数字开头。
<style>
    [title*=a] {
        color: red;
    }
</style>
<body>
    <div title="aaa-one">
        aaa
    </div>
    <div title="bbb-aaa">
        bbb
    </div>
</body>

关系选择器

父亲>儿子

作用：选择某元素后面的第一代子元素。

<style>
    .class-one > .class-two {
        color: red;
    }
</style>
<body>
    <div class="class-one">
        <div class="class-two">
            aaa
        </div>
        <div>
            <div class="class-two">
                bbb
            </div>
        </div>
    </div>
</body>

祖先 后代

作用：选择某元素后面的所有子元素。

<style>
    .class-one .class-two {
        color: red;
    }
</style>
<body>
    <div class="class-one">
        <div class="class-two">
            aaa
        </div>
        <div>
            <div class="class-two">
                bbb
            </div>
        </div>
    </div>
</body>

兄+弟

作用：可选择紧接在另一元素后的元素，且二者有相同父元素。

<style>
    .class-one+.class-two {
        color: red;
    }
</style>
<body>
    <div class="class-one">
       aaa
    </div>
    <div class="class-two">
        bbb
    </div>
</body>

兄~弟

作用：选取某个元素之后的所有相同元素。

注意

  1. 比如.class-one ~ h2 这句就是选取 .class-one后面所有的 h2。
  2. 这个选择器两种元素必须处于同一个父元素内，被选取的元素不必直接紧随。
<style>
    .class-one ~ .class-two {
        color: red;
    }
</style>
<body>
    <div class="class-one">
       aaa
    </div>
    <div>
        <div class="class-two">
            bbb
        </div>
    </div>
    <div class="class-two">
        ccc
    </div>
</body>

伪类选择器

动态伪类

动态伪类作用
:link链接没有被访问前的样式效果
:visited链接被访问后的样式效果
:hover鼠标悬停在元素上面时的样式效果
:active点击元素时的样式效果，即按下鼠标左键时发生的样式
:focus用于元素成为焦点时的样式效果，常用与表单元素
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  a:link {
    color: #333;
  }
  a:visited {
    color: #ddd;
  }
  a:hover {
    color: red;
  }
  a:active {
    color: green;
  }
  input:focus {
    color: orange;
  }
</style>
<div class="province">
  <a target="_blank" href="https://www.baidu.com">福建</a>
  <input value="111">
</div>

</html>

结构伪类

结构伪类作用
:first-child选择某个元素的第一个子元素
:last-child选择某个元素的最后一个子元素
:nth-child()选择某个当前元素的兄弟节点下的一个或多个特定的子元素
nth-last-child()选择某个当前元素的兄弟节点的一个或多个特定的子元素，从后往前数
:nth-of-type()当前元素的同类型兄弟节点的第n个当前元素
:nth-last-of-type()当前元素的同类型兄弟节点的第n个当前元素，从后往前数
:first-of-type选择一个父级元素下第一个同类型子元素
:last-of-type选择一个父级元素下第一个同类型子元素，从后往前数
:only-child选择的元素是它父元素的唯一 一个子元素
:only-of-type选择一个元素是上级元素下唯一相同类型的子元素
:empty选择的元素里面没有任何内容（空标签）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  .province:first-child {
    color: red;
  }
  .province:last-child {
    color: green;
  }

</style>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
  /* 代码中的n表示一个从0开始的自然数，他会逐渐+1
下面代码作用：从第2个元素开始字体颜色都是红色 */
  .province:nth-child(n + 2) {
    color: red
  }

</style>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>

</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
 /* 用法和:nth-child()相似，只不过它是从下往上的顺序。
下面代码作用：倒数第2个元素字体变为红色。 */
  .province:nth-last-child(2) {
    color: red
  }

</style>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
/* nth-of-type他是当前元素的同类型兄弟元素的第n个，而nth-child是当前元素的兄弟节点的第n个当前元素*/
  .province:nth-of-type(4) {
    color: red
  }
  .province:nth-child(4) {
    color: green
  }

</style>
<div class="province">
  1111
</div>
<li>
  内鬼
</li>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
    .province:nth-last-of-type(2) {
        color: red
    }

    .province:nth-last-child(3) {
        color: green
    }
</style>
<div class="province">
    1111
</div>
<li>
    内鬼
</li>
<div class="province">
    1111
</div>
<div class="province">
    1111
</div>
<div class="province">
    1111
</div>
<div class="province">
    1111
</div>

</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
/* :first-of-type和:nth-of-type(1) 是一个意思
   :last-of-type和:nth-last-of-type(1)是一个意思 */
  .province:first-of-type {
    color: red
  }
  .province:last-of-type {
    color: green
  }

</style>
<div class="province">
  1111
</div>
<li>
  内鬼
</li>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>
<div class="province">
  1111
</div>

</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  .province:only-child {
    color: red
  }

</style>
<div>
  <div class="province">33</div>
</div>

<div>
  <div class="province">13</div>
  <div class="province">23</div>
</div>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
  .province:only-of-type {
    color: red
  }

</style>

<div>
  <div class="province">00</div>
  <div class="province">00</div>
  <li>00</li>
</div>

<div>
  <div class="province">11</div>
  <li>22</li>
  <li>33</li>
</div>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
/* 下面代码中第二个div标签里面有空格，所以:empty伪类不会生效。 */
  .province:empty {
    background: red;
  }
  .province {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    margin-bottom: 10px;
  }

</style>
<div class="province"></div>
<div class="province"> </div>

</html>

否定伪类

否定伪类作用
:not()排查或者过滤掉特定元素
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  .province:not(:first-child) {
    color: red;
  }
  a:not(a[class="nav_item"]) {
    text-decoration: none;
  }

</style>
<div class="province">11</div>
<div class="province">22</div>
<div class="province">33</div>
<a href="#" class="nav_item">第一个a标签</a>
<a href="#">第二个a标签</a>
<a href="#">第三个a标签</a>

</html>

状态伪类

状态伪类作用
:enabled选择匹配指定范围内所有可用UI(用户界面)元素
:disabled选择匹配指定范围内所有不可用UI(用户界面)元素
:checked选择匹配指定范围内所有可选中的UI(用户界面)元素

目标伪类

目标伪类作用
:target选择匹配父元素的所有元素，且匹配元素被相关URL指向
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  div {
    display: none;
  }

  :target {
    display: block;
  }

</style>
<a href="#nav">我要敲代码</a>
<a href="#nav_item">我要睡觉</a>
<div id="nav">
  那就敲代码吧
</div>
<div id="nav_item">
  那就睡觉吧
</div>
</html>

伪元素选择器

::before和::after

::before 伪元素可以用来创建一个内部元素，它的内容会覆盖在父元素的内容之前。

::after 伪元素可以用来创建一个外部元素，它的内容会覆盖在父元素的内容之后。

这里有个注意点，content是必须的，如果不写content，伪元素会失效。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
    div::before {
        content: '哈哈，';
        color: red
    }

    div::after {
        content: '，您好！';
        color: green
    }
</style>
<div>杨杨吖</div>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
  div {
    position: relative;
    width: 200px;
    height: 35px;
    line-height:35px;
  }
  div::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
    transition: all 0.3s;
  }
  div:hover::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(225deg);
    transition: all 0.3s;
  }

</style>
  <div>杨杨吖</div>
</html>

::first-line和::first-letter

::first-line 只能用于块级元素。用于设置附属元素的第一个行内容的样式。

::first-letter 只能用于块级元素。用于设置附属元素的第一个字母的样式。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  div::first-line {
    color: green;
  }

</style>
  <div>杨杨吖<br/>杨杨吖</div>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  div::first-letter {
    color: green;
  }

</style>
  <div>杨杨吖<br/>杨杨吖</div>
</html>

::selection

::selection 匹配鼠标长按拖动选中的内容。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
    div::selection {
        color: green;
    }
</style>
<div>杨杨吖杨杨吖杨杨吖杨杨吖杨杨吖杨杨吖杨杨吖杨杨吖杨杨吖杨杨吖杨杨吖杨杨吖</div>

</html>

::placeholder

::placeholder 用于设置input元素的placeholder内容的样式。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  input::placeholder {
    color: red;
  }

</style>
  <input placeholder="请输入"/>
</html>
avatar
文章
阅读
粉丝