css进阶（一）——css选择符

前言
在介绍css选择符之前，先科普一下css选择符的意义，它是用于指出规则所要选择的元素，换句话就是定位特定元素，例如p,li，定位到p元素或者li元素上面，而选择符分为上下文选择符，ID和类选择符，属性选择符。
内容

上下文选择符 ——基于祖先和同胞中选择一个元素

html代码：
<html>
    <head>
        <meta charset="utf-8" />
        <title>上下文选择符</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <section>
            <h2>An H2 Heading</h2>
            <p>This is paragraph 1</p>
            <p>Paragraph 2 has <a href="#">a link</a> in it.</p>
            <a href="#">Link</a>
        </section>
   </body>
</html>

/*
 作者：cyl
 时间：2018-02-02
 描述：上下文选择符
@charset "utf-8";
**/

/*1.css样式：实现section下的p元素颜色为绿色>*/
section p{
   color:green
}
/*等价方式*/
section>p{
  color:green
 }
/*2.将h2紧邻的p元素改变字体的颜色为红色*/
h2+p{
  color:red
}
/*3.将h2后面的p元素的字体全部改变为红色*/
h2~p{
  color:red
}

/*4.将所有元素的字体全部改红色*/
*{
   color:red
}

总结归纳起来上下文选择符其实分为三种，一种是普通的父与子的关系，一种同胞的关系，最后一种比较特殊那就是上下没有关系，用*表示：
这里写图片描述

ID和类选择符

什么时候使用ID，什么时候使用类？
ID的用途在页面上唯一标识一个元素，类的目的是为了唯一标识相同特征的元素。

类和ID选择符使用非常广泛，小编这次着力介绍一种伪类，放在这里讲解一下：
伪类主要UI和结构化伪类，UI会在html中处于某一种状态，为该元素应用css样式，结构化伪类在标记中存在某种结构上的关系，比如为某一个元素是一组元素的一个或者最后一个。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>伪类</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <p class="age">25</p>
        <ol class="results">
            <li>my name</li>
            <li>my age</li>
            <li>my college</li>
        </ol>

        <a href="#more_info">你来点我啊</a>
        <h2 id="more_info">this is the infomation you are looking for</h2>
        <input type="text" />
    </body>
</html>

/*
 作者：cyl
 时间：2018-02-02
 描述：伪元素,结构化伪类，伪类
 * ::before::after*/
@charset "utf-8";
/*在age类前加内容"age"和"years:"*/
p.age::before{
    content: "Age:";
}

p.age::after{
    content: "years.";
}


 /*将age类的第一个字母放大3倍*/
p.age::first-letter{
    font-size: 300%;
}
 /*将age类段落的第一行设为小型大写字母*/
p.age::first-line{
    font-variant: small-caps;
}

/*结构化伪类:first-child :last-child :nth-child(?)*/
ol.results li:first-child{
    color:red;
}

ol.results li:last-child{
    color: green;
}

ol.results li:nth-child(2){
    color: peachpuff;
}

/*等待用户点击时字体为黑色*/
a:link{
    color: black;
}
/*当访问过链接后字体编程灰色*/
a:visited{
    color: gray;
}
/*当鼠标悬浮在链接上时去掉下划线*/
a:hover{
    text-decoration: none;
}
/*正在被点击时字体为红色*/
a:active{
    color: red;
}

/*target为页面中另一个元素的目标元素*/
#more_info:target{
    background: #eee;
}
/*input框获取焦点时设置框边界大小为1px 实线，颜色为蓝色*/
input:focus{
    border: 1px solid blue;
}

属性选择符
属性选择符结构如下：
标签名[属性名]或者标签名[属性名=值]

<img src="images/yellow_flower.jpg"  title="yellow flower" alt="yellow flower" />

/*带有title属性的html元素显示2像素的蓝色边框*/
img[title] {border:2px solid blue;}
/*更加明确的方式*/
img[title="red flower"] {border:2px solid green;}

介绍完这些选择符之后，在我们实践却又一些样式没有达到我们预想的结果，原因可能是因为我们没有搞清楚层叠样式规则：
找

1 找到应用给每一个元素和属性的所有声明
2 按照顺序和权重排序
权重可以声明：

/**空格 !important 分号（ ; ）用于加重声明的权重。*/
p {color:green  !important; font-size:12pt;}

3 按照特指度排序
    层叠样式优先级可以通过计算特指度来达到：
      I（指id值）-C（指类值）-E（指标签值）
     ICE并非真正的三位数，只不过大多情况下看成一个三位数没有问题，三位数最大的胜出。
     选择符中有一个id，在I的位置上+1，有一个class，在C的位置上加1，有一个标签名，在E的位置上加1。
4 顺序决定权重
总结
系统的学习一下css基础知识对于更加快速得到自己想要的页面效果具有很大的作用，希望对你有帮助！

css进阶（一）——css选择符

猜你喜欢