search

博客列表 >CSS选择器基础知识和实例

CSS选择器基础知识和实例

赵大叔
赵大叔原创
2020年04月08日 00:06:51715浏览

CSS选择器基础知识

代码演示效果链接：

简单选择器

上下文选择器

伪类选择器-不分组匹配

伪类选择器-分组匹配

其它伪类选择器

1. 简单选择器

简单选择器优先级：标签 < class属性 < id属性

序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...}
  • 元素是使用标签和属性进行描述,所以使用标签和属性来选择元素非常自然和直观
  • 以上 6 种,其实可分为二类: 元素选择器和属性选择器, 其它的只是二者的特例罢了
  • 当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略

2. 上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li

3. 伪类选择器

3.1 不分组匹配

序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n)

3.2 分组匹配

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)

3.3 其它伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时，向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素

CSS选择器应用实例

  1. <!--简单选择器-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>简单选择器</title>
  7.     <style>
  9.         /* 元素选择器:根据元素标签名选择 */
  10.         h2 {
  11.             color: hotpink;
  12.         }
  14.         /*群组选择器:同时选择多个，用逗号隔开*/
  15.         h2, ul {
  16.             background-color: grey;
  17.         }
  19.         /*通配选择器,选择全部元素*/
  20.         * {
  21.             width: 400px;
  22.         }
  24.         /* 属性选择器: 元素属性--class, id, title... */
  25.         [title="one"] {
  26.             color: #55a532;
  27.         }
  29.         /*类选择器:按照元素的class属性选择*/
  30.         .item {
  31.             color: red;
  32.         }
  34.         /*id选择器:根据元素id属性选择--# + id值*/
  35.         #ba {
  36.             color: yellow;
  37.         }
  39.         /* 多个类选择器:两个点，不要有空格 */
  40.         .item.ttu {
  41.             background-color: #fff;
  42.         }
  44.         /*简单选择器优先级：标签 < class属性  < id属性*/
  45.         span {
  46.             background-color: forestgreen;
  47.         }
  49.         #sau {
  50.             background-color: red;
  51.         }
  53.         .utien {
  54.             background-color: yellowgreen;
  55.         }
  57.     </style>
  58. </head>
  59. <body>
  60. <h2>购物清单</h2>
  61. <ul>
  62.     <li title="one">用title属性选择，设置字体颜色</li>
  63.     <li class="item">用class属性选择，设置字体颜色</li>
  64.     <li id="ba">用id属性选择，设置字体颜色</li>
  65.     <li class="item ttu">演示多个类选择器</li>
  66.     <li></li>
  67.     <li></li>
  68.     <li></li>
  69.     <li></li>
  70.     <li></li>
  71. </ul>
  73. <span class="utien" id="sau">合计：用来演示选择器优先级</span>
  75. </body>
  76. </html>
  78. <!--上下文选择器-->
  79. <!DOCTYPE html>
  80. <html lang="en">
  81. <head>
  82.     <meta charset="UTF-8" />
  83.     <title>上下文选择器</title>
  84.     <style>
  86.         /*后代选择器`空格`：选择当前元素的所有后代元素*/
  87.         ul a {
  88.             color: red;
  89.         }
  91.         /*父子选择器`>`：选择当前元素的所有子元素;span不会被选中*/
  92.         ul > a {
  93.             color: yellow;
  94.         }
  96.         /*同级相邻选择器`+`：选择拥有共同父级且相邻的元素 */
  97.         .haiba + a {
  98.             color: greenyellow;
  99.         }
  101.         /*同级所有选择器`~` ：选择拥有共同父级的该元素之后的所有元素*/
  102.         .ba ~ a {
  103.             background-color: dodgerblue;
  104.         }
  106.     </style>
  107. </head>
  108. <body>
  109. <ul>
  110.     <a href="">1</a>
  111.     <li>
  112.         <a href="">2.1</a>
  113.         <a href="">2.2</a>
  114.         <a href="" class="haiba">2.3</a>
  115.         <a href="">2.4</a>
  116.         <a href="">2.5</a>
  117.         <a href="">2.6</a>
  118.         <div>
  119.             <a href="" class="ba">3.1</a>
  120.             <a href="">3.2</a>
  121.             <a href="">3.3</a>
  122.         </div>
  123.     </li>
  124. </ul>
  126. </body>
  127. </html>
  129. <!--伪类选择器-不分组匹配-->
  130. <!DOCTYPE html>
  131. <html lang="en">
  132. <head>
  133.     <meta charset="UTF-8">
  134.     <title>伪类选择器-不分组匹配</title>
  135.     <style>
  136.         /*grid画九宫格*/
  137.         .container {
  138.             width: 300px;
  139.             height: 300px;
  140.             display: grid;
  141.             grid-template-columns: repeat(3, 1fr);
  142.             gap: 5px;
  143.         }
  145.         /* 类选择器 */
  146.         .item {
  147.             font-size: 2rem;
  148.             background-color: #0086b3;
  149.             display: flex;
  150.             justify-content: center;
  151.             align-items: center;
  152.         }
  154.         /*匹配第一个子元素:`:first-child`*/
  155.         .container > :first-child {
  156.             color: red;
  157.         }
  159.         /*匹配最后一个子元素:`:last-child`   */
  160.         .container > :last-child {
  161.             color: greenyellow;
  162.         }
  164.         /*选择元素的唯一子元素:`:only-child` */
  166.         /*匹配任意位置的子元素:`:nth-child(n)`*/
  167.         .container > :nth-child(5) {
  168.             color: yellow;
  169.         }
  171.         /*匹配任意位置的子元素-表达式:`:nth-child(2n、ven)偶数`*/
  172.         .container > :nth-child(2n) {
  173.             font-size: 40px;
  174.         }
  176.         /*匹配任意位置的子元素-表达式:`:nth-child(2n-1、odd)奇数`*/
  177.         .container > :nth-child(2n-1) {
  178.             font-size: 5px;
  179.         }
  181.         /*表达式选择前3*/
  182.         .container > :nth-child(-n + 3) {
  183.             border-radius: 10px;
  184.         }
  186.         /*表达式选择后2*/
  187.         .container > :nth-child(-n + 3) {
  188.             border-radius: 10px;
  189.         }
  191.         /*匹配倒数任意位置的子元素:`:nth-last-child(n)`*/
  192.         .container > :nth-last-child(3) {
  193.             background-color: #fff;
  194.         }
  196.         /* 从第6个开始,选择剩下的所有元素 */
  197.         .container > :nth-child(n + 6) {
  198.             border: 5px solid coral;;
  199.         }
  201.     </style>
  202. </head>
  203. <body>
  204. <div class="container">
  205.     <div class="item">1</div>
  206.     <div class="item">2</div>
  207.     <div class="item">3</div>
  208.     <div class="item">4</div>
  209.     <div class="item">5</div>
  210.     <div class="item">6</div>
  211.     <div class="item">7</div>
  212.     <div class="item">8</div>
  213.     <div class="item">9</div>
  214. </div>
  216. </body>
  217. </html>
  219. <!--伪类选择器-分组匹配-->
  220. <!DOCTYPE html>
  221. <html lang="en">
  222. <head>
  223.     <meta charset="UTF-8">
  224.     <title>伪类选择器-分组匹配</title>
  225.     <style>
  226.         /*grid画九宫格*/
  227.         .container {
  228.             width: 300px;
  229.             height: 300px;
  230.             display: grid;
  231.             grid-template-columns: repeat(3, 1fr);
  232.             gap: 5px;
  233.         }
  235.         /* 类选择器 */
  236.         .item {
  237.             font-size: 2rem;
  238.             background-color: #0086b3;
  239.             display: flex;
  240.             justify-content: center;
  241.             align-items: center;
  242.         }
  244.         /*`:first-of-type`:匹配按类型分组后的第一个子元素*/
  245.         .container > div:first-of-type{
  246.             color: red;
  247.         }
  249.         /*`:last-of-type`:匹配按类型分组后的最后一个子元素*/
  250.         .container > div:last-of-type{
  251.             color: greenyellow;
  252.         }
  254.         /*`:only-of-type`:匹配按类型分组后的唯一子元素*/
  256.         /*`:nth-of-type()`:匹配按类型分组后的任意位置的子元素*/
  257.         .container > span:nth-of-type(2){
  258.             color: yellow;
  259.         }
  261.         /* span分组前三个 */
  262.         .container span:nth-of-type(-n + 3) {
  263.             background-color: grey;
  264.         }
  265.         /*`:nth-last-of-type()`:匹配按类型分组后倒数任意位置的子元素*/
  266.         .container div:nth-last-of-type(-n + 2) {
  267.             background-color: coral;
  268.         }
  270.         .container > div:first-of-type:hover {
  271.             background-color: black;
  272.         }
  274.     </style>
  275. </head>
  277. <body>
  278. <div class="container">
  279.     <div class="item">1</div>
  280.     <div class="item">2</div>
  281.     <div class="item">3</div>
  282.     <div class="item">4</div>
  283.     <!-- 分为二组 -->
  284.     <span class="item">5</span>
  285.     <span class="item">6</span>
  286.     <span class="item">7</span>
  287.     <span class="item">8</span>
  288.     <span class="item">9</span>
  289. </div>
  291. </body>
  292. </html>
  294. <!--其它伪类选择器-->
  295. <!DOCTYPE html>
  296. <html lang="en">
  297. <head>
  298.     <meta charset="UTF-8">
  299.     <title>其它伪类选择器</title>
  300.     <style>
  301.         /*:root-指html*/
  302.         :root {
  303.             background-color: lightgreen;
  304.         }
  305.         /*enabled：可用*/
  306.         input:enabled {
  307.             background-color: blanchedalmond;
  308.         }
  310.         /*disabled：禁用*/
  311.         input:disabled {
  312.             background-color: lightgreen;
  313.         }
  315.         /*required：必填*/
  316.         input:required {
  317.             background-color: yellow;
  318.         }
  321.     </style>
  322. </head>
  323. <body>
  324. <h3>用户登录</h3>
  325. <form action="" method="post">
  326.     <div>
  327.         <label for="email">邮箱:</label>
  328.         <input
  329.                 type="email"
  330.                 id="email"
  331.                 name="email"
  332.                 required
  333.                 placeholder="example@email.com"
  334.         />
  335.     </div>
  337.     <div>
  338.         <label for="password">密码:</label>
  339.         <input
  340.                 type="password"
  341.                 id="password"
  342.                 name="password"
  343.                 required
  344.                 placeholder="不得少于6位"
  345.         />
  346.     </div>
  348.     <div>
  349.         <label for="save">保存密码:</label>
  350.         <input type="checkbox" id="save" name="save" checked readonly />
  351.     </div>
  353.     <div>
  354.         <label for="save_time">保存期限:</label>
  355.         <select name="save_time" id="save_time">
  356.             <option value="7" selected>7天</option>
  357.             <option value="30">30天</option>
  358.         </select>
  359.     </div>
  361.     <div>
  362.         <input type="hidden" name="login_time" value="登陆时间戳" />
  363.     </div>
  365.     <div>
  366.         <label for="warning">警告:</label>
  367.         <input
  368.                 type="text"
  369.                 id="warning"
  370.                 value="一天内仅允许登录三次"
  371.                 style="border: none;"
  372.                 disabled
  373.         />
  374.     </div>
  376.     <script>
  377.         // js未学,暂时忽略,只须知道功能即可: 自动生成时间戳,填充到表单隐藏域中
  378.         document.querySelector('[type="hidden"]').value = new Date().getTime();
  379.     </script>
  380. </form>
  381. </body>
  382. </html>

总结

1、css选择器十分重要，以前总是觉得别人的css代码简洁明了，自己一上手写就会很长很长。

2、最长用的选择器应该是元素选择器和类选择器，应该重点掌握。

3、本节难点我觉得是伪类选择器中的分组和不分组匹配，但是它也有规律，多上手练习，然后背下来; 其它伪类可以使代码样式更丰富多彩，鼠标悬浮:hover 比较常用，应该用心记下来。

上一条：css之选择器下一条：css基本、上下文、伪类、表单选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多