前端课程——CSS选择器

Dreamy.TZK

发布于 2020-04-09 14:33:57

4920

发布于 2020-04-09 14:33:57

文章被收录于专栏：小康的自留地

css选择器

什么是选择器

CSS 选择器的作用是按照 CSS 规则定位 HTML 页面的一个或多个元素。浏览器在解析 HTML 页面时，会根据 CSS 规则中的选择器定位 HTML 页面的元素，并为对应的元素设定样式。

选择器的分类

基本选择器：共有 5 个基本选择器，是 CSS 选择器的最为基本的用法。
层级选择器：共有 4 个层级选择器，是根据 HTML 元素之间的关系来定位 HTML 元素。
组合选择器：具有交集和并集两种用法，是将之前基本选择器和层级选择器进行组合。
伪类选择器：允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。
伪元素选择器：定位所有未被包含 HTML 的实体。

基本选择器

类型（Type）选择器（有些中文资料中称为“元素选择器”）简单来说，就是元素选择器

div {
      color: lightcoral;
      font-size: 24px;
    }

类（Class）选择器类名选择器，以.区分,对应的名称是标签中指定的class名

.demo {
      color: lightcoral;
      font-size: 24px;
    }

ID 选择器 id选择器，以#区分,一个html文件中id只允许出现一次

#Demo {
      color: lightcoral;
      font-size: 24px;
    }

通用选择器（有些中文资料中称为“通配符选择器”）用于指定html文件中所有元素的属性

#Demo {
      color: lightcoral;
      font-size: 24px;
    }

属性选择器
- [attr] 属性选择器：通过 HTML 元素的 attr 属性名来定位具体 HTML 元素，而不关注 attr 属性的值是什么。

[lang]{
        color: red;
    }
    
<div lang="pt">哈哈哈哈</div>

[attr=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值为 value 来定位具体 HTML 元素。

[lang="pt"] {
      color: green;
    }

[attr~=value] 属性选择器：通过 HTML 元素的 attr 属性名，属性值是一个以空格分隔的列表并且 value 值是该值列表中的之一，来定位具体 HTML 元素。

[lang~='pt']{
        color: red;
    }
<div lang="pt pp">pt加空格</div>
<div lang="pt">pt不加空格</div>

[attr|=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值为 value 或者以 value- 为前缀来定位具体 HTML 元素。

[lang|='zz']{
        color: blue;
    }

[attr^=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值是以 value 为开头来定位具体 HTML 元素。

[lang|='zz']{
        color: blue;
    }

[attr$=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值是以 value 为结束来定位具体 HTML 元素。与上一个类似
[attr*=value] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值是包含 value 来定位具体 HTML 元素。包含即可，不会因为位置而无法匹配

优先级

计算法则（后定义的覆盖先定义的）

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。

内联样式总会覆盖内嵌样式表和外联样式表的任何样式。

!important 例外规则

破坏优先级，被修饰的成为最高级。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>!important规则</title>
  <style>
    div {
      color: blue !important;
    }

    .demo {
      color: red;
    }
  </style>
</head>

<body>
  <div class="demo">这是一个测试内容.</div>
</body>

</html>

最终的颜色为blue

一定要优化考虑使用样式规则的优先级来解决问题而不是 !important。
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important。
永远不要在你的插件中使用 !important。
永远不要在全站范围的 CSS 代码中使用 !important。

层级选择器

HTML元素之间的关系

类似于套娃，层与层之间的关系。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML元素之间的关系</title>
</head>

<body>
  <div id="ancestor1">
    <div id="parent1">
      <div id="child11"></div>
      <div id="child12"></div> 
        
    </div>
    <div id="parent2">
      <div id="child2"></div>
    </div>
  </div>
  <div id="ancestor2"></div>
</body>

</html>

兄弟元素：ancestor1 元素和 ancestor2 元素、parent1 元素和 parent2 元素，以及 child11 元素和 child12 元素。
父级与子级元素：
- 如果 `` 元素是父级元素的话，那 ancestor1 元素和 ancestor2 元素就是子级元素。
- 如果 ancestor1 元素是父级元素的话，那 parent1 元素和 parent2 元素就是子级元素。
- 如果 parent1 元素是父级元素的话，那 child11 元素和 child12 元素就是子级元素。
祖先与后代元素：
- 如果 `` 元素是祖先元素的话，那其包含的所有元素都是后代元素。
- 如果 ancestor1 元素是祖先元素的话，那其包含的所有元素都是后代元素。
- 如果 parent1 元素是祖先元素的话，那其包含的所有元素都是后代元素。

层级选择器种类

后代选择器简单来说，该元素的所有后代元素。

div span {
      background-color: lightcoral;
    }
<div>
    <span>Span 1.
      <span>Span 2.</span>
    </span>
  </div>
<span>Span 3.</span>

这样只会影响到div里的span标签，而div外的标签则不会受到影响

这样只会影响到div里的span标签，而div外的标签则不会受到影响
子级选择器定位该元素的所有子级元素。并不会影响孙子级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    span{
        color: teal;
    }
    div>span{
        color: violet;
    }
    
    </style>
</head>
<body>
    <div>
        <span>
            哈哈哈
            <span>hahah </span>
            <a href="http://antmoe.com">ce </a>
        </span>
    </div>
</body>
</html>

相邻兄弟选择器定位与该目标元素拥有同一个父级元素的下一个指定元素不包括当前元素，只包括后边的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #a+li{
        color: red;
    }
    </style>
</head>
<body>
    <ul>
        <li id="a">1sadsada</li> <!-- 不会变色 -->
        
        <li>555555</li><!-- 变色 -->
    </ul>
</body>
</html>

普通兄弟选择器简单来说就是p~codep元素之后的元素定位与该目标元素拥有同一个父级元素的之后任意指定元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>普通兄弟选择器</title>
  <style>
    span {
      background-color: lightgreen;
    }

    p~code {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <span>This is not red.</span>
  <p>Here is a paragraph.</p>
  <code>Here is some code.</code> 会变色
  <span>And here is a span.</span>
</body>

</html>

组合选择器

组合（并集）选择器

h1, h2, h3, h4, h5, h6 { color:blue; }同时定义多个标签的属性。

组合（交集）选择器

p.cls {
	color: blueviolet;
}

表示把所有class名为cls的p标签都设置成blueviolet颜色

伪类选择器

伪类选择器是一种允许通过未包含在 HTML 元素的状态信息来定位 HTML 元素的用法。伪类选择器的具体用法就是向已有的选择器增加关键字，表示定位的 HTML 元素的状态信息。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

否定伪类选择器

:not(selector) {
	属性 : 属性值;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>否定伪类选择器</title>
  <style>
    .fancy {
      text-shadow: 2px 2px 3px gold;
    }

    p:not(.fancy) { /*匹配class名不是fancy的p标签*/
      color: green;
    }

    body :not(p) { /*匹配body中不是p标签的标签*/
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <p>我是一个段落。</p>
  <p class="fancy">我好看极了！</p>
  <div>我不是一个段落。</div>
</body>

</html>

注意：

可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素。但是前者的优先级更高。
:not(foo) 将匹配任何非 foo 元素，包括 html 和 body 元素。
这个选择器只会应用在一个元素上，你无法用它排除所有父元素。

伪元素选择器

CSS 中伪元素选择器的用法与伪类选择器的用法类似，都是在指定 CSS 选择器增加关键字。但这两者的作用并不相同，伪类选择器是用来描述某个指定元素的状态信息，而伪元素选择器是用来描述某个指定元素的特定部分设定样式。

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

伪元素选择器的语法格式为 ::伪元素，一定不要忘记 ::。伪元素选择器只能和基本选择器配合使用，并且一个选择器只能使用一个伪元素选择器，如果要为一个选择器增加多个伪元素选择器需要分别编写。

before和after

::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素，::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a::after{
            content: "→";
        }
        a::before{
            content: "♥";
        }
    </style>
</head>
<body>
    <div>
        <a href="https://antmoe.com">这是一个测试内容</a>
    </div>
</body>
</html>

first-letter

::first-letter 伪元素的作用是为匹配元素的文本内容的第一个字母设置样式内容。如下示例代码展示了**::first-letter 伪元素**的用法：

p::first-letter {
  font-size: 130%;
}

first-line伪元素

::first-line 伪元素的作用是为匹配 HTML 元素的文本内容的第一行设置样式内容。如下示例代码展示了**::first-line 伪元素**的用法：

.line::first-line{
            background-color: tomato;
        }

::selection 伪元素

::selection 伪元素的作用是匹配用户在 HTML 页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了**::selection 伪元素**的用法：

p::selection {
	color: gold;
	background-color: red;
}

只有一小部分 CSS 属性可以用于::selection 伪元素：

color 属性
background-color 属性
cursor 属性
caret-color 属性
outline 属性
text-decoration 属性
text-emphasis-color 属性
text-shadow 属性

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-01-02，如有侵权请联系 cloudcommunity@tencent.com 删除

html

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

css

登录后参与评论

0 条评论

热度