CSS基础——选择器

时间：2018-10-15 21:46:21 收藏：0 阅读：1460

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

CSS的基础

CSS定义

CSS的作用

CSS的语法