CSS基础——选择器

时间：2018-10-15 21:46:21 阅读：1460 评论：0 收藏：0 [点我收藏+]

标签：css选择器 fir ... col 不同的 NPU span 鼠标移动字符

CSS

CSS的基础
- CSS定义
  
  ? CSS全称为Cascading Style Sheet，中文翻译为“层叠样式表”。
- CSS的作用
  
  ? 简单地来讲，CSS 能对你制作的网页进行布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。样式是用来控制页面外观、设置元素对象属性的工具，使用样式可使页面产生各种特殊的效果。
- CSS的语法
  - 基本格式：
```
<head>
    <meta charset="UTF-8">
    <title>DOC</title>
    <style type="text/css">
      /*样式表内容*/
    </style>
</head>
```

样式代码存在的位置

直接写在标签内

<p style="color: red">
    你好....
</p>

在head标签内写在style标签内

<head>
    <meta charset="UTF-8">
    <title>DOC</title>
    <style type="text/css">
        /*样式表内容*/
    </style>
</head>
<body>
    <!--body内容-->
</body>

写在独立的CSS文件中，通过link标签引入

<head>
     <link rel="stylesheet" href="css文件路径">
</head>

CSS选择器（定义如何在HTML中找标签）

1. 基本选择器

ID选择器
- 作用：通过标签id选择标签
```
<style>
    #ID {属性名: 属性}
</style>
```
- 特点：
  1、一个 ID 选择器在一个页面只能使用一次。如果使用2次或者2次以上，不符合 w3c 规范，JS 调用会出问题。
  2、一个标签只能使用一个 ID 选择器。
  3.一个标签可以同时使用类选择器和 ID 选择器。
元素选择器
- 作用：通过标签类型选择标签
```
<style>
    标签名 {属性名: 属性}
</style>
```
类选择器
- 作用：通过定义class属性选择标签
```
<style>
    .class {属性名：属性}
</style>
或者
<style>
    标签类型.class {属性名：属性}
</style>
```
- PS：
  
  1、谁调用，谁生效。
  2、一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器。
- 类选择器命名规则
  - 不能用纯数字或者数字开头来定义类名；
  - 不能使用特殊符号或者特殊符号开头（_ 除外）来定义类名；
  - 不建议使用汉字来定义类名；
  - 不推荐使用属性或者属性的值来定义类名。
- 类选择器常用的命名
通配符选择器
- 格式：× {属性名：属性值}
- 作用：匹配所以类型的元素

2.组合选择器

定义：两个或者两个以上的的基础选择器通过不同方式连接在一起

交集选择器

格式：标签类(ID)选择器 {属性: 属性值;}

特点：既要满足使用某个标签，还要满足使用了类选择器或者ID选择器。

例子：
<head>
    <style>
        div.box{
            color: red;
        }
        div#d1{
            width: 400px;
            height: 300px;
            backgroud-color: red;
        }
    </style>
</head>

后代选择器

格式：选择器选择器 {属性：属性值;}
使用条件：
1. 后代选择器首选选择器要满足包含（嵌套）关系；
2. 父级元素在前面，子集元素在后面。

特点：无限制隔代。（多层嵌套全部生效）

<head>
    <style>
        div span{
            font-size: 42px;
        }
        .box span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p class="box">
            <span>我是div标签的孙子级的标签</span>
        </p>
    </div>
    <div><span>我是div标签的子级标签</span></div>
</body>

PS：只要是标签选择器，ID选择器，类选择器就可以自由组合

子代选择器

格式：选择器>选择器 {属性: 属性值}

原则：只会选中子集的元素，下下级的元素不会选中

<head>
    <style>
        div>span{
            font-size: 42px;
        }
    </style>
</head>
<body>
    <div>
        <span>选中我</span>
        <p>
            <span>选不中我</span>
        </p>
    </div>
</body>

毗邻选择器

格式：选择器1+选择器2{属性: 属性值}

作用：选择所以紧接着选择器1之后的选择器2元素

<head>
    <style>
        div+span{
            font-size: 42px
        }
    </style>
</head>
<body>
    <div>
        <span>不能找到我</span>
    </div>
    <span>可以找到我</span>
    <span>不可以找到我</span>
</body>

后续选择器

格式：选择器1～选择器2{属性: 属性值}

作用：选中选择器1后的所有选择器2的元素

<head>
    <style>
        div～span{
            font-size: 42px
        }
    </style>
</head>
<body>
    <div>
        <span>不能找到我</span>
    </div>
    <span>可以找到我</span>
    <span>可以找到我</span>
</body>

并集选择器
- 格式：选择器, 选择器, 选择器{属性: 属性值;}
- 原则：并集选择器应用于多个选择器找到的标签应用相同的样式时，为了避免重复写到一起
```
<head>
    <style>
        .a,#d1,div,h2{
            font-size: 24px
            color: #ffffff
        }
    </style>
</head>
```
PS：×为通配符选择器，也就是可以选中所有元素

3.属性选择器

<!-- 通过属性或者属性值找到标签 -->
<style>
    div[属性] {color: red} or
    div[属性=属性值] {color: red}
</style>

PS：不常用的属性选择器：

<head>
    <style>
        /*找到所有title属性以hello开头的元素*/
        [title^="hello"] {
          color: red;
        }

        /*找到所有title属性以hello结尾的元素*/
        [title$="hello"] {
          color: yellow;
        }

        /*找到所有title属性中包含（字符串包含）hello的元素*/
        [title*="hello"] {
          color: red;
        }

        /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
        [title~="hello"] {
          color: green;
        }
    </style>
</head>

4.伪类选择器

状态：同一个标签在不同时刻会有不同状态

/*未访问的链接*/
a:link {
  color: red;
}
/*已经访问的链接*/
a:visited {
    color: blue;
}
/*鼠标移动到链接上*/
a:hover {
    color: #FF00FF;
}
/*选定的链接，就是在鼠标点击的时候*/
a:active {
    color: pink;
}
/*input输入框获取焦点时的样式*/
input:focus {
    outline: none
    backgroud-color: #eee
}

5.伪元素选择器

使用CSS生成一个新的标签属性

设置标签内容的首个字的形式firist-letter

p:first-letter {
    font-size: 48px;
    color: red;
}

在标签内容的开头加入新的内容before
```
p:before {
  content:"*";
  color:red;
}
```
在标签内容的结尾加入新的内容after
```
p:after {
  content:"[?]";
  color:blue;
} 
```

PS：before and after常用于清除浮动。

6.选择器的优先级

原则一：选择器相同时，谁最后加载就变成什么样子。
原则二：选择器不同的时候，按照权重选择。
PS1：各个选择器的权重：内联选择器权重最高>id选择器权重次之>类选择器权重第三>元素选择器最低

技术分享图片

原则三：权重选择器永不进位。
PS2：紧急情况样式的修改使用：样式!inportant；,不到最后不使用，因为破坏逻辑，使得这个样式始终显示。

CSS基础——选择器

标签：css选择器 fir ... col 不同的 NPU span 鼠标移动字符

原文地址：https://www.cnblogs.com/abner28/p/9794862.html

踩

(1)

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

CSS基础——选择器

CSS

CSS的基础

CSS定义

CSS的作用

CSS的语法

样式代码存在的位置

CSS选择器（定义如何在HTML中找标签）

1. 基本选择器

2.组合选择器

3.属性选择器

4.伪类选择器

5.伪元素选择器

6.选择器的优先级