首页 > > 网页制作 > css >

CSS节选——选择器

2018-06-24 02:24:57来源：未知阅读 ()

CSS，cascading style sheet，层叠样式表，请留意层叠概念。

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after伪元素的用法

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
举例：网站有些联系电话，希望在它们前加一个icon?，就可以使用:before伪元素，如下：

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'\FFFD';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

::before 示例

::before 和:before有什么区别？
这个问题看来很简单，但如果之前没有琢磨这个问题，给人感觉也是门头一垂，听到这个题目就懵逼了，因为原来从来没有注意过这个问题，即便有注意这个问题也不能很好的回答清楚。回答的技巧就是从相同点和不同点，以及他们的作用，及注意事项上去回答。

解答要点
 
相同点
都可以用来表示伪类对象，用来设置对象前的内容
:befor和::before写法是等效的
 
不同点
:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

加分项
伪类对象要配合content属性一起使用
伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪类对象的特效通常要使用:hover伪类样式来激活

.test:hover::before { /* 这时animation和transition才生效 */ }

序列选择器

#1、作用：
css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个

#2、格式
#2.1 同级别
:first-child    p:first-child    同级别的第一个
:last-child    p:last-child    同级别的最后一个
:nth-child(n)                    同级别的第n个
:nth-last-child(n)            同级别的倒数第n个

#2.2 同级别同类型
:first-of-type                    同级别同类型的第一个
:last-of-type                    同级别同类型的最后一个
:nth-of-type(n)                    同级别同类型的第n个
:nth-last-of-type(n)            同级别同类型的倒数第n个

#2.3 其他
:only-of-type                    同类型的唯一一个
:only-child                         同级别的唯一一个

#1、同级别的第一个
#1.1 示范一
p:first-child { 
    color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

这样的话第一个p和div中的第一个p都变成红色，

#1.2 示范二
p:first-child {
    color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签

<h1>w我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p

注意点：
    :fist-child就是第一个孩子，不区分类型

#2、同级别的最后一个
p:last-child {
    color: red;
}
代表：同级别的最后一个，并且最后一个要求是一个p标签

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>
<p>我是段落7</p>
这样的话只有6跟7都变红

#3、同级别的第n个
p:nth-child(3) {
    color: red;
}
代表：同级别的第3个，并且第3个要求是一个p标签

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落2”变红

#4、同级别的倒数第n个
p:nth-last-child(3) {
    color: red;
}
代表：同级别的倒数第3个，并且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落6.1”和“我是段落5”被选中

同级别

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
#1、同级别同类型的第一个
p:first-of-type {
    color: red;
}
“我是段落1”和“我是段落6.1”被选中

#2、同级别同类型的最后一个
p:last-of-type {
    color: red;
}
“我是段落7”和“我是段落6.2”被选中

#3、同级别同类型的第n个
p:nth-of-type(2) {
    color: red;
}
“我是段落2”和“我是段落6.2”被选中

#4、同级别同类型的倒数第n个
p:nth-last-of-type(2) {
    color: red;
}
“我是段落5”和“我是段落6.1”被选中

同级同类型

#1、同类型的唯一一个
p:only-of-type {
    color: red;
}

<h1>我是标题</h1>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>

“我是段落7“被选中

#2、同级别的唯一一个
p:only-child {
    color: red;
}

<h1>我是标题</h1>
<div>
    <p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被选中

其他

属性选择器

#1、作用：根据指定的属性名称找到对应的标签，然后设置属性
       该选择器，最常用于input标签
 
#2、格式与具体用法：
    [属性名]
    其他选择器[属性名]
    [属性名=值]
    [属性名^=值]
    [属性名$=值]
    [属性名*=值]


    例1：找到所有包含id属性的标签
        [id]
    
    例2：找到所有包含id属性的p标签
        p[id]
    
    例3：找到所有class属性值为part1的p标签
        p[class="part1"]
    
    例4：找到所有href属性值以https开头的a标签
        a[href^="https"]
        
    例5：找到所有src属性值以png结果的img标签
        img[src$="png"]
        
    例6：找到所有class属性值中包含part2的标签
        [class*="part"]

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        [id] {
            color: red;
        }
        p[id] {
            font-size: 30px;
        }
        p[class="part1"] {
            color: green;
        }
        a[href^="https"] {
            font-size: 50px;
        }
        img[src$="png"] {
            width: 100px;
        }
        [class*="part"] {
            text-decoration: line-through;
        }

    </style>
</head>
<body>
    <h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落</p>
    <p class="part1">我是段落</p>
    <p class="xxx part2 yyy">我是段落</p>
    <a href="#">我是我</a>
    <a href="http://www.baidu.com">http://www.baidu.com</a>
    <a href="https://www.baidu.com">https://www.baidu.com</a>
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>

示例

兄弟选择器

#1、作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性

#2、格式
选择器1+选择器2 {
    属性：值;
}

#3、注意点：
1、相邻兄弟选择器必须通过+号链接
2、相邻兄弟选择器只能选中你紧跟其后的那个标签，不能选中被隔开的标签

相邻兄弟选择器，CSS2推出

#1、作用：给指定选择器后面的所有选择器中的所有标签设置属性

#2、格式：
选择器1~选择器2 {
    属性：值;
}

#3、注意点：
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
无论有没有被隔开，都可以被选中

通用兄弟选择器，CSS3推出

伪类选择器

#1、作用：常用的几种伪类选择器。

#1.1 没有访问的超链接a标签样式：
a:link {
  color: blue;
}

#1.2 访问过的超链接a标签样式：
a:visited {
  color: gray;
}

#1.3 鼠标悬浮在元素上应用样式：
a:hover {
  background-color: #eee; 
}

#1.4 鼠标点击瞬间的样式：
a:active {
  color: green;
}

#1.5 input输入框获取焦点时样式：
input:focus {
  outline: none;
  background-color: #eee;
}

#2 注意：
1 a标签的伪类选择器可以单独出现，也可以一起出现
2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
    link，visited，hover，active
3 hover是所有其他标签都可以使用的
4 focus只给input标签使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        a:link {
            color: #cccccc;
        }
        a:visited {
            color: #55BBBB;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: red;
        }

        input:hover {
            outline: none;
            background-color: #cccccc;

        }

    </style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>
<input type="text">
</body>
</html>

示例

伪元素选择器

#1、常用的伪元素。
#1.1 first-letter：杂志类文章首字母样式调整
例如：
p:first-letter {
  font-size: 48px;
}

#1.2 before
用于在元素的内容前面插入新内容。
例如：

p:before {
  content: "*";
  color: red;
}
在所有p标签的内容前面加上一个红色的*。

#1.3 after
用于在元素的内容后面插入新内容。
例如：

p:after {
  content: "?";
  color: red;
}
在所有p标签的内容后面加上一个蓝色的?。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        p:first-letter {
            font-size: 50px;
        }
        /*两个冒号与一个是一样的，老版本用的是一个冒号，考虑到兼容性推荐使用一个冒号*/
        a::after {
            content: "?";
            color: red;
        }
        a:before {
            content: "-";
            color: green;
        }

    </style>
</head>
<body>
<p>英雄不问出处，流氓不论岁数</p>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
</body>
</html>

示例

CSS三大特性

1、继承性

#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性

#2、注意：
    1、只有以color、font-、text-、line-开头的属性才可以继承
    2、a标签的文字颜色和下划线是不能继承别人的
    3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
    
    ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
#3、应用场景：
    通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

2、层叠性

#1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果

#2、注意：
1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，
才会发生层叠性
ps：通过谷歌浏览器可以查看到，一些属性被划掉了

3、优先级

#1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定

#2、优先级
    整体优先级从高到底：行内样式>嵌入样式>外部样式

    行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级

注意：

1、大前提：直接选中 > 间接选中(即继承而来的)
2、如果都是间接选中，那么谁离目标标签比较近，就听谁的
3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的
4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
    id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
5、优先级之!important

#1、作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。
  
#2、注意：
    1、!important只能用于直接选中，不能用于间接选中
    2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升
    3、!important必须写在属性值分号的前面

6、优先级之权重计算

#1、强调
如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级

#2、计算方式
#1、id数多的优先级高
#2、id数相同，则判定类数多的优先级高
#3、id数、class数均相同，则判定标签数多的优先级高
#4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有