【CSS选择器】𫓰

时间：2019-08-26 14:57:14 阅读：116 评论：0 收藏：0 [点我收藏+]

原文: http://blog.gqylpy.com/gqy/254

            <p id="main-toc"><strong>目录</strong></p>

一、介绍

一、介绍

CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素.
当浏览器读到一个样式表时，便会按照这个样式表来对文档进行格式化（渲染）

优点：内容样式分离，便于团队开发；样式可复用，提高开发效率；页面精确控制，实现精美、简化复杂的页面；更利于搜索引擎的搜索；结构更加突出；

二、语法

CSS样式由两部分组成：选择器: 声明; 声明又包括属性和属性值，每个声明之后用分号结束。
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/b26ffc74-58c4-47e3-8e65-6f96482962f3.png)

三、引入方式

1. 行内样式

行内式是在标记的style属性中设定CSS样式，立即生效，无须引用. 不推荐大规模使用
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/5ff24384-ed1c-4a34-a648-877ee9419e19.png)

2. 嵌入式

嵌入式时将CSS样式集中写在网页的head标签内的style标签中，如下：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        /*class标记前加"."*/
        .class_sign {color: red}
        /*id标记前加"#"*/
        #id_sign {color: green}
    </style>
</head>
<body>
<div class="class_sign">Hello world</div>
<div id="id_sign">Hello world</div>
</body>
</html>

3. 外部样式

写在单独的样式文件中，可对整个网站的所有网页有效，通过链接的方式引入，链接语法：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <!--引入css文件样式，自动匹配标签-->
    <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="class_sign">Hello world</div>
<div id="id_sign">Hello world</div>
</body>
</html>

四、选择器

1. 基本选择器

元素选择器
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/95360d12-fb40-4956-a6ea-658348c95169.png)
ID选择器
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/5ca5f39d-838e-4e63-b46c-5e94ae02c09b.png)
类选择器
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/d17333a2-2999-456d-ac99-03b77ad0a298.png)
样式类名不要以数字开头（有些浏览器不识别）
标签中的class属性如果有多个，可用空格分隔.
通用选择器
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/d03926ee-bdff-4e7d-b9db-ba9de854b417.png)

2. 组合选择器

后代选择器
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/38ea09e6-a685-45a3-bad4-4b91d324c72b.png)
儿子选择器
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/2763d5cc-1be5-438d-ad47-cf1626581432.png)
毗邻选择器
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/3e99c199-66cf-4cfe-ae36-3c70c16506ac.png)
弟弟选择器
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/b4ad922f-ce78-4445-a653-7a7451bc29c1.png)

3. 属性选择器

技术图片

4. 不常用选择器


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>CSS</title>
    <!--不常用选择器-->
    <style>
        /*选择所有带有type属性且其值以cir开头的元素*/
        [type^="cir"] {
            color: red;
        }
        /*选择所有带有type属性且其值以are结尾的元素*/
        [type$="are"] {
            color: blue;
        }
        /*选择所有带有type属性且其值包含(字符串包含)is的元素*/
        [type*="is"] {
            color: green;
        }
        /*选择所有带有class属性且其值包含(多个值中包含)tag1的元素*/
        [class~="tag1"] {
            color: orchid;
        }
    </style>
</head>
<body>
<ul type="circle disc"><li>我是带有type属性且其值以cir开头的元素</li></ul>
<ul type="square"><li>我是带有type属性且其值以are结尾的元素</li></ul>
<ul type="disc"><li>我是带有type属性且其值包含(字符串包含)is的元素</li></ul>
<div class="tag1 tag2"><p>我是带有class属性且其值包含(多个值中包含)tag1的元素</p></div>
</body>
</html>

5. 分组和嵌套

分组


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>CSS</title>
    <!--分组选择器-->
    <style>
        /*（将div标签和span标签统一设置字体为红色）*/
        div,
        span {
            color: red;
        }
    </style>
</head>
<body>
<div>我是div标签</div>
<span>我是span标签</span>
</div>
</body>
</html>

嵌套


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>CSS</title>
    <!--嵌套选择器-->
    <style>
        /*（将类为tag的内部的所有p标签设置字体为蓝色）*/
        .tag p {
            color: blue;
        }
        /*（将id为tag的内部的所有span标签设置字体为绿色）*/
        #tag span {
            color: green;
        }
    </style>
</head>
<body>
<div class="tag" id="tag">
    <p>我是p标签</p>
    <span>我是span标签</span>
</div>
</body>
</html>

6. 伪类选择器


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>CSS</title>
    <!--伪类选择器-->
    <style>
        /*未访问的链接颜色*/
        a:link {
            color: #F00;
        }
        /*已访问的链接颜色*/
        a:visited {
            color: #0F0;
        }
        /*鼠标移动到链接上时的颜色*/
        a:hover {
            color: #F0F;
        }
        /*鼠标点击链接时的颜色*/
        a:active {
            color: #00F;
        }
        /*input输入框获取焦点时的样式*/
        input:focus {
            outline: none;
            background-color: #EEE;
            color: #00F;
        }
        /*（伪类选择器还可应用于更多标签，如select标签）*/
    </style>
</head>
<body>
<div>
    <a href="https://blog.csdn.net/qq_41964425" target="_blank">CSDN</a>
    <a href="http://css.doyoe.com" target="_blank">CSS参考手册</a>
</div>
<div>
    <label><input type="text" placeholder="我是input输入框"></label>
</div>
</body>
</html>

7. 伪元素选择器

first-letter
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/933b629a-2880-4624-b928-9523d6345ba7.png)
before
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/6a42e0aa-bc3e-4f2e-a573-876dd801a6b0.png)
after
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/e7aca279-1dcd-486b-aca4-29cd1c3a5029.png)

before与after多用于清除浮动.

8. 选择器优先级

#. CSS继承：

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的.
继承是一种机制，它允许的样式不仅可以应用于某个特定的元素，还可以应用于它的后代.
（例如一个body标签定义的字体颜色值也会应用到body标签内的所有标签）
CSS继承性的权重是非常低的，其优先级为0，比普通元素的优先级还要低.
（也就是说：只要给后代设置样式，就可覆盖掉祖先定义的样式）
继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但是CSS继承也是有限制的.
（比如border, margin, padding, bacckground等就不能被继承）

#. 选择器的优先级：

上面说明了很多种的选择器，也就是说在一个HTML页面中可以通过很多种方式找到一个元素并且为其设置样式，那么浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/5ea916d5-ae03-4914-89be-c75d2976ea41.png)

此外，还可以通过添加 !important 方式来强制让样式生效，但并不推荐使用，因为过多的使用会使样式文件混乱，以至于难以维护。

除非万不得已，否则不要使用：

技术图片