CSS选择器学习记录

前端 评论
现在各种跨平台框架挺流行的，看了下都要使用js，emm。。。
不会啊，想着学习一下吧，看着看着，觉得，还是把前端过一遍把，找的资料是实验楼提供的资源
资料收集与以下网站，如有冒犯，烦请告知

https://www.shiyanlou.com/courses/1237

之前写的忘记记录，写到 CSS选择器 部分才想起来。

选择器分类

选择器类型选择器内容
基础选择器标签选择器、类选择器、id 选择器、 通配符选择器
组合选择器标签指定式选择器、后代选择器、并集选择器
属性选择器
伪类选择器
标签选择器

标签选择器也叫元素选择器，其实就是html代码中的标签
如：<html> <body> <h1> <p> <img>

1
2
3
4
标签名 {
    属性1:属性值1;
    属性2:属性值2;
}
类选择器

类选择器是对HTML 标签中 class 属性进行选择。CSS 类选择器的选择符是 “.”
类选择器命名规范：不能是纯数字，不能是标签名，不建议使用汉字。一般是 点+对应样式的描述。
如：.shadow

1
2
3
.bgc {
  background-color: yellow;
 }

值得注意的是文档中的多个元素可以具有相同的类名，单个元素可以有多个类名(以空格分开多个类名的形式书写)。

id选择器

对HTML 标签属性进行选择。id选择器的选择符是"#"。任何元素都可以使用id属性设置唯一的id名称。这是选择单个元素最有效的方式。

特别属性注意的是id选择器具有唯一性，也就是说同一个HTML页面不能有相同的id名称(使用多个相同的id选择器，浏览器不会报错但是不符合W3C标准)

1
2
3
4
#id名{
属性1:属性值1;
属性2:属性值2;
}
通配符选择器

通配符选择器用*号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

1
2
3
4
* {
    属性1:属性值1;
    属性2:属性值2;
}

一般使用通配符选择器定义CSS样式,清楚所有HTML标记的默认边距。

1
2
3
4
* {
    margin: 0;
    padding: 0;
}
标签指定式选择器

标签指定式选择器又称交集选择器，有两个选择器构成，其中第一个必须是标签选择器，第二个为class选择器或id选择器。
两个选择器之间不能有空格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
        color: red;
      }
      p.one {
        color: blue;
      }
      p#two {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <p>实验楼</p>
    <p class="one">实验楼</p>
    <p id="two">实验楼</p>
  </body>
</html>
后代选择器

后代选择器又叫包含选择器，用来选择元素或元素组的后代。
其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .one #two p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <div id="two">
        <p>实验楼</p>
      </div>
    </div>
  </body>
</html>
子代选择器

与后代选择器相比，子元素选择器只能选择某个元素的子元素。子选择器使用大于号作为子结合符。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p > strong {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>
      <strong>实验楼</strong>
      <strong>实验楼</strong>
    </p>
    <p>
      <em>
        <strong>实验楼</strong>
        <strong>实验楼</strong>
      </em>
    </p>
  </body>
</html>
并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器、id 选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p,
      #one,
      .two {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>我爱学习</p>
    <span id="one">我爱运动</span>
    <strong class="two">我爱睡觉</strong>
  </body>
</html>
属性选择器

属性选择器是根据元素的属性及属性值来选择元素。

属性选择器含义示例
E[attr]匹配所有具有attr属性的E元素，不考虑它的值。(E指的是元素，也就是标签，attr指的是属性)p[title] {color: red;}
E[attr=val]匹配所有attr属性等于"val"的E元素p[title=“one”]{color: yellow;}
E[attr~=val]匹配所有属性具有多个空格分隔的值，其中一个值等于"val"的E元素td[class~=“name”]{color: #f00}
E[attr |= val]匹配所有attr属性具有多个连字号分割的值、其中一个值以"val"开头的E元素，主要用于 lang属性，比如"en"、 “en-us”、 "en-gb"等等p[lang |= en ]{color: blue;}
伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。

1
2
3
4
:link 应用于未被访问过的链接。IE6 不兼容，解决此问题，直接使用 a 标签。
:hover 应用于有鼠标指针悬停于其上的元素。在 IE6 只能应用于 a 连接，IE7+ 所有元素都兼容。
:active 应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited 应用于已经被访问过的链接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      /*a:link{
            color: red;
        }*/
      /*链接默认状态*/
      a {
        color: red;
        text-decoration: none;
      }
      /*链接访问之后的状态*/
      a:visited {
        color: yellow;
      }
      /*鼠标放到链接上显示的状态*/
      a:hover {
        color: blue;
        text-decoration: line-through;
      }
      /*链接激活的状态*/
      a:active {
        color: pink;
      }
    </style>
  </head>
  <body>
    <a href="">实验楼</a>
  </body>
</html>

注：我们可能会遇到被点击访问过的超链接不再具有 hover 和 active 了，解决办法是改变 CSS 属性的排列顺序，L-V-H-A（link-visited-hover-active）。您可以运行一下，然后更改 L-V-H-A 的顺序后，看看效果。

后面还有 “CSS层叠性和继承性” 还没开始看，脑子有点昏，下次再看了。

XUQMAndroid开发

一个啥也不会的Android开发，励志转型ios开发，后来放弃了。还想搞后台，后台不让！python也不同意！！！