CSS选择器

image

工作再忙，也不能忘记时间充电。
技术学习再多年，也要时刻注重基础。

大纲

1.css简介
2.css代码语法
3.css注释代码
4.css引入方式及其优先级

css名称是层叠样式表。用来美化网站。主要用来定义HTML内容在浏览器内的显示样式。例如：字体加粗、颜色等等。优势：极大的提高了工作效率.
语法:

selector{
    property:value
}
例如:
h1 {
    color:blue;
    font-size:20px;
}
当有多个属性的时候，属性之间用“;”(分号)隔开。

注释语法

/* 我是注释 */

webstorm快捷键 ctl+?

css引入方式

1.内部样式
    index.html
    <html>
        <style>
            p {
                width:100px;
                height:100px;
            }
        </style>
        <body>
            <p>我是内部样式</p>    
        </body>
    </html>
2.行内样式
    index.html
     <html>
        <body>
            <p style=" width:100px;height:100px;">我是行内样式</p>    
        </body>
    </html>
3.外部样式
    a.css
    p {
        width:100px;
        height:100px;
      }
    
    index.html
    <html>
        <head>
            <link href="a.css" rel="stylesheet" type="text/css">
           <!-- link标签中，href是要引入的外部样式的地址; rel是当前文件与被引入文件的关系,是stylesheet。 type是被引入文件的类型 -->
        </head>
        <body>
            <p>我是行内样式</p>    
        </body>
    </html>
4.导入样式
     a.css
    p {
        width:100px;
        height:100px;
      }
    
    index.html
     <html>
     <head>
        <style>
            @import "a.css";
        </style>    
     </head>
     <body>
        <p>我是行内样式</p>    
     </body>
    </html>

常用内部样式和外部样式，导入样式比较少用，行内样式 ==尽量少用==。

四种方式的优先级

行内样式 > 内部样式 > 外部样式 > 导入样式

【注意】
内部样式 > 外部样式有一个前提：那就是，内部样式的位置一定在外部样式的后面。==就是说，html文件内的css样式必须在从外部link的后面，这样才会，内部样式 > 外部样式。=== 否则，优先级相反。

CSS 选择器

元素选择器
关系选择器
属性选择器
伪类选择器
伪对象选择器

元素选择器。包括:

通配符: *{ }
i.通配符， $\color{red}{通常用来进行初始化的工作}$ 。比如: 设置网站的外边距.字繁体样式

       * { 
           padding: 0;
           margin: 0;
           font-famliy:"微软雅黑";
        }

类选择器: .类名称{ }
i. 即 class 选择器
id选择器: #id名称{ }
类型选择器(标签选择器): 标签{ }

关系选择器

子元素选择器: 父亲 > 儿子。 $\color{red}{就是选择其儿子，并包含孙子的元素。}$

<html>
<head>
   <style>
       div > p {
           color : red
       }
   </style>   
</head>
<body>
   <div>
       <h3>这是一个标题1</h3>
       <p>这是一个文字段落1</p>
       <p>这是一个文字段落2</p>
       <h3>这是一个标题2</h3>
       <p>这是一个文字段落3</p>
       <h3>这是一个标题3</h3>
       <p>这是一个文字段落4</p>
       <p>这是一个文字段落5</p>
   </div>
</body>
</html>

显示效果:

i子元素选择器

兄弟选择器: 你自己 ~ 你的兄弟。就是选择与自己的同级别的元素。但不包含自己!!!

 <html>
<head>
    <style>
        p~p {
            color : red
        }
    </style>   
</head>
<body>
    <div>
        <h3>这是一个标题1</h3>
        <p>这是一个文字段落1</p>
        <p>这是一个文字段落2</p>
        <h3>这是一个标题2</h3>
        <p>这是一个文字段落3</p>
        <h3>这是一个标题3</h3>
        <p>这是一个文字段落4</p>
        <p>这是一个文字段落5</p>
    </div>
</body>
</html>

显示效果:

兄弟选择器.png

相邻选择器: E + F 。 ==就是选择与自己相邻的元素。不包含自己!!!==

 <head>
    <style>
        p+p {
            color : red
        }
    </style>   
</head>
<body>
    <div>
        <h3>这是一个标题1</h3>
        <p>这是一个文字段落1</p>
        <p>这是一个文字段落2</p>
        <h3>这是一个标题2</h3>
        <p>这是一个文字段落3</p>
        <h3>这是一个标题3</h3>
        <p>这是一个文字段落4</p>
        <p>这是一个文字段落5</p>
    </div>
</body>
</html>

显示效果:

相邻选择器.png

包含选择器: E F 。 ==就是选择自己包含的所有的元素。包含儿子、孙子、以及孙子的孙子 ....==

 <html>
<head>
    <style>
        ul li{
            color : red
        }
    </style>   
</head>
<body>
    <ul>
        <li>第一行</li>
        <li>第2行</li>
        <li>第3行</li>
        <li>第4行</li>
        <li>第5行</li>
    </ul>
</body>
</html>

显示效果:

包含选择器.png

属性选择器

 语法:
    1. 当前元素[属性] { }
    2. 当前元素[属性=“属性值”] { }

例子:

<html>
<head>
    <style>
        a[href]{
            color : red
        }
    </style>   
</head>
<body>
    <a href="#">我是属性选择器的超链接</a>
    <a>我是来充数的</a>
</body>
</html>

效果:

属性选择器.png

<html>
<head>
   <style>
       a[href="www.sina.com"]{
           color : red
       }
   </style>   
</head>
<body>
   <a href="www.sina.com">新浪啊~</a>
   <a href="www.sina11.com">新浪啊~111</a>
   <a href="www.sina22.com">新浪啊~222</a>
   <a href="www.sina33.com">新浪啊~333</a>
   <a href="www.sina44.com">新浪啊~444</a>
</body>
</html>

效果:

属性选择器.png

伪类选择器

定义:
它用来给 HTML 标签的某种状态设置样式
i. 元素link: 设置超链接a在未被访问前的样式
ii. 元素: visited: 设置超链接a在其链接地址已被访问过时的样式
iii. 元素：hover: 设置元素在其鼠标悬停时的样式
iv. 元素：active: 设置元素在被用户激活（在鼠标点击与释放之间发生的时间）时的样式
注意:::!!!
i. a:hover 必须位于 a:link 和 a:visited 之后，a:active必须位于a:hover之后
ii. 可靠的顺序是: l(link)o v(visited)e h(hover)a(active)te。即爱与恨两个字来记忆.

伪对象（伪元素）选择器
i. 元素: before{ } : 设置在对象前发生的内容。用来和content属性一起使用，并且必须定义content属性。
ii. 元素:after{ } : 设置在对象后发生的内容。用来和content属性一起使用，并且必须定义content属性。

选择器的优先级

    !important > 内联 > ID > 类 > 标签[伪类][属性]选择器 > 伪对象 > 继承 > 通配符

注意：
!important 要写在属性值的后面，分号(";")的前面

例子:
    p{
        color:red !important;
    }

选择器	优先级数值
!important	无穷大
内联	1000
ID	100
类	10
标签	1

数值越大，优先级越高.

例子:

<html>
<head>
    <style>
        span{
            /* 当前 优先级数值为1 */
            color: red;
        }
        p span {
            /* 当前 优先级数值 1+1=2 */
            color: blue;
        }

        p .sc {
            /* 当前 优先级数值 1 + 10=11 */
            color: aqua;
        }
        p #s1{
            /* 当前 优先级数值 1+100=101 */
            color: green;
        }
    </style>   
</head>
<body>
    <p>
         <span class="sc" id="s1">优先级</span>
    </p>   
</body>
</html>

效果:

选择器的优先级

如果，想让字体呈现红色的话。直接在对于的选择器的属性值后面加入 !important 即可。
例子: (将上面的改造)

<html>
<head>
    <style>
        span{
            /* 当前 优先级数值为 1 + 无穷大 */
            color: red !important; 
        }
        p span {
            /* 当前 优先级数值 1+1=2 */
            color: blue;
        }

        p .sc {
            /* 当前 优先级数值 1 + 10=11 */
            color: aqua;
        }
        p #s1{
            /* 当前 优先级数值 1+100=101 */
            color: green;
        }
    </style>   
</head>
<body>
    <p>
         <span class="sc" id="s1">优先级</span>
    </p>   
</body>
</html>

效果:

优先级.png

part 1

CSS选择器

大纲

四种方式的优先级

CSS 选择器

选择器的优先级

推荐阅读更多精彩内容