CSS概念，引入，选择器

时间 2019-12-01

标签 css 概念引入选择器栏目 CSS 繁體版

原文原文链接

概念

层叠样式表,定义如何显示HTML元素.css

使用方式

行内样式

不推荐使用此方式字体

　　结构和样式的杂糅会影响后期的维护spa

<p style="color: red">Hello world.</p>

内嵌样式表

将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中code

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式表

推荐使用此方式. link 标签写在 head 标签内blog

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

href　　外部 CSS 文件的路径继承

rel　　固定为 stylesheet字符串

type　　固定为 text/cssinput

import 导入式

导入式会在整个网页装载完后再装载CSS文件it

　　所以这就致使了一个问题，若是网页比较大则会儿出现先显示无样式的页面，闪烁一下以后，再出现网页的样式。class

　　使用连接式时与导入式不一样的是它会以网页文件主体装载前装载CSS文件，所以显示出来的网页从一开始就是带样式的效果。

CSS 选择器

基本选择器

标签名
#id
.类名
*

组合选择器

后代选择器

/*li内部的a标签设置字体颜色*/
li a {
color: green;
}

儿子选择器

/*选择全部父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

/*选择全部紧接着<div>元素以后的<p>元素*/
div+p {
margin: 5px;
}

弟弟选择器

/*i1后面全部的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}

/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}


不怎么经常使用的属性选择器:
/*找到全部title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}

/*找到全部title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}

/*找到全部title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}

/*找到全部title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
}

分组

当多个元素的样式相同的时候，咱们没有必要重复地为每一个元素都设置样式，咱们能够经过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

div标签和p标签统一设置字体为红色。

div, p {
color: red;
}

分两行来写更清晰一些

div,
p {
color: red;
}

嵌套

多种选择器能够混合起来使用

.c1类内部全部p标签设置字体颜色为红色。

.c1 p {

color: red;
}

伪类选择器

/* 未访问的连接 */
a:link {
color: #FF0000
}

/* 已访问的连接 */
a:visited {
color: #00FF00
}

/* 鼠标移动到连接上 */
a:hover {
color: #FF00FF
}

/* 选定的连接 */ 
a:active {
color: #0000FF
}

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

伪元素选择器　　　　

first-letter

/*在每一个<p>元素内容首字母添加样式*/ 
 p:first-letter {
 font-size: 48px;
 color: red;
 }

before

/*在每一个<p>元素以前插入内容*/
p:before {
content:"*";
color:red;
}

after

/*在每一个<p>元素以后插入内容*/
p:after {
content:"[?]";
color:blue;
}

ps:

　　before 和 after 多用于清除浮动

选择器的优先级

CSS继承

CSS的继承机制得以让样式能够给予标签和其后代

选择器的优先级权重　

内联样式　　1000

　　id选择器　　 100

　　类选择器　　 10

　　元素选择器　1

ps:

　　可是某些属性是没法继承的好比: border, margin, padding, background等

　　权重计算永不进位

　　群组选择器中 , 各个选择器由自身的权重决定 , 互相之间是独立的

　　后代 / 子代 / 伪类选择器优先级计算按照各组成部分相加获得

特殊方式

除此以外还能够经过添加 !important 方式来强制让样式生效，但并不推荐使用。

过多的使用!important 会使样式文件混乱不易维护。

万不得已再用 !important 吧