欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS选择器类型

程序员文章站 2022-07-04 20:06:42
...

关系选择器

包含选择符（E F）

选择所有被E元素包含的F元素，中间用空格隔开

<head>
    <style>
        ul li{color:red;}
    </style>
</head>

<ul>
    <li>12</li>
    <li>12</li>
    <li>12</li>
    <li>12</li>
</ul>
<ol>
    <li>33</li>
    <li>33</li>
    <li>33</li>
    <li>33</li>
</ol>

子选择符（E>F）

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用大于号表示。

<style>
    p>a{color:red;}
</style>

<div>
   <a href="#">子元素</a>
   <p><a href="#">子孙元素</a></p>
   <span><a href="#">猜猜看</a></span>
</div>

相邻选择符 （E+F）

选择紧贴在E元素之后的F元素，用+号表示，选择相邻的第一个兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p+span{color:red;}
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <span>这是紧挨着p元素的第一个</span>
    <span>这是第二个</span>
</body>
</html>

兄弟选择符（E~F）

选择E元素之后的所有F元素，作用于多个元素，用~隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p~span{color:red;}
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <span>这是紧挨着p元素的第一个</span>
    <span>这是第二个</span>
</body>
</html>

属性选择器

1.E[att]

选择具有attr属性的E元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        option[disabled]{color:red;}
    </style>
</head>
<body>
    <select name="交通工具" id="老司机">
        <option value="0">汽车</option>
        <option value="1" disabled>火车</option>
        <option value="2">飞机</option>
        <option value="3">轮船</option>
    </select>
</body>
</html>

2.E[att=”val”]

选择具有att属性且属性值等于val的E元素
他不仅要符合属性，值也要符合才行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       input[type="text"]{color:red;height: 100px;}
    </style>
</head>
<body>
    <form action="">
        <input type="text">
        <input type="password">
        <input type="radio">
        <input type="submit">
    </form>
</body>
</html>

3.E[att~=”val”]

选择有att属性的元素，且属性值列表中有一个符合val的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p[class~="p1"]{color:red;}
    </style>
</head>
<body>
   <p class="p1 pMore">随便写写</p>
   <p class="pMore">随便写写</p>
   <p class="p2 pMore">随便写写</p>
   <p class="p3 pMore">随便写写</p>
   <p class="pMore p1">随便写写</p>
</body>
</html>

4.E[att^=”val”]

选择E元素中，有att属性，且以“val”开头的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p[class^="p"]{color:red;}
    </style>
</head>
<body>
   <p class="p1 pMore">随便写写</p>
   <p class="More">随便写写</p>
   <p class="p2 pMore">随便写写</p>
   <p class="3 pMore">随便写写</p>
   <p class="pMore p1">随便写写</p>
</body>
</html>

5.E[att$=”val”]

选择E元素中，有att属性，，且以“val”结尾的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p[class$="p"]{color:red;}
    </style>
</head>
<body>
   <p class="p1 pMore">随便写写</p>
   <p class="More">随便写写</p>
   <p class="p2 pMore">随便写写</p>
   <p class="3 pMorep">随便写写</p>
   <p class="pMore p1">随便写写</p>
</body>
</html>

5.E[att*=”val”]

选择具有att属性并包含“val”的字符串的E元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      a[href*="jd"]{color:yellow;}
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.jd.com">京东</a>
    <a href="http://www.taobao.com">淘宝</a>
</body>
</html>

伪类选择器

通过冒号来定义，定义了元素的状态，如点击按下，点击完成等等 。我们之前都是直接操作元素的样式。现在可以为元素的状态改变样式，是元素看上去更“动态”。

1.E：link

设置超链接a在未被访问前的样式（特指a标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      a:link{color:red;}
    </style>
</head>
<body>
    <a href="#">百度</a>
</body>
</html>

2.E：visited

设置超链接a在链接已被访问过时的样式（特指a标签）

a:visited{color:aqua;}

3.E：hover

鼠标悬停在元素上时的样式。不限于a标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      ul li{display: inline-block;
          list-style: none;
          width: 100px;
          height: 40px;
          text-align: center;
          font-size: 16px;
          font-family: "Microsoft YaHei UI";
          line-height: 40px;
      }
      ul li:hover{background-color: #ff4400;
      color: #fff;
      }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>第二页</li>
        <li>第三页</li>
        <li>第四页</li>
        <li>第五页</li>
    </ul>
</body>
</html>

4.E：active

设置元素在鼠标按下时的样式（不限于a标签）

ul li:active{color: aqua;}

5.E：not(s)

匹配不含有s选择器的元素E

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:not(#div2){color: aquamarine;}
        div:not(.d2){color:aqua;}
    </style>
</head>
<body>
   <div class="d1">块元素</div>
   <div class="d1">块元素</div>
   <div class="d1">块元素</div>
   <div class="d2 d1">块元素</div>
   <div class="d3" id="div2">块元素</div>
</body>
</html>

6.E:first-child

本身具有父元素，且是子元素的第一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       li:first-child{color: #ff4400;}
    </style>
</head>
<body>
   <ul>
       <h2>标题</h2>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
   </ul>

   <ol>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
   </ol>
</body>
</html>

7.E:last-child

本身具有父元素，且是父元素里面的最后一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       li:last-child{color: #ff4400;}
    </style>
</head>
<body>
   <ul>
       <h2>标题</h2>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
   </ul>

   <ol>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
   </ol>
</body>
</html>

8.E:only-child

E元素是唯一的子元素时被匹配。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       ol:only-child{color: #ff4400;}
    </style>
</head>
<body>

   <ol>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
   </ol>
</body>
</html>
相关标签： css

上一篇： html 边框样式

下一篇： Android EditText设置边框

推荐阅读