CSS基础与选择器

作者: 原上的小木屋 | 来源:发表于2018-12-18 01:22 被阅读0次

选择器的种类有哪些？每一种都是怎么用的？它们的优先级是怎样的？
css-note
前端入门03 -- CSS选择器
02-CSS基础选择器
基础知识--css
css选择器
css选择器
CSS基础语法(一)
CSS选择器
CSS

CSS加载方式有几种？

外部样式表(推荐)

通过<link>引入外部css<link rel="stylesheet" href="index.css">
通过@import引入样式，放入CSS中（后面一定要加分号）@import url("index.css");

内部样式表

将CSS放在页面的style元素内<style>p{color: red; }</style>
内联样式（不推荐，但有时候很有用）<p style="backgroundcolor:orange; font-size: 24px;">Css</p>
属性样式（已被废弃）<img src="a.png" width=100 height=200>

@charset有什么作用？

指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 @charset @规则被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的字符集相关 <style> 元素内的样式属性内使用。
此 @规则在某些 CSS 属性中使用非 ASCII 字符时非常有用，例如 content。
在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

文件的开头的 Unicode byte-order 字符值。
由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
CSS @规则 @charset。
使用参考文档定义的字符编码： <link> 元素的 charset 属性。该方法在 HTML5 标准中已废除，无法使用。
假设文档是 UTF-8。

@import有什么作用？如何使用？

作用

用来引入外部样式放入css中，告诉 CSS 引擎引入一个外部样式表。这些规则必须先于所有其他类型的规则，@charset规则除外; 因为它不是一个嵌套语句。用法@import 'style.css';
用法

既可以放入CSS中，用于引入外部样式
也可以放入html的style标签内

id 选择器和 class 选择器的使用场景分别是什么？

在CSS文件里书写时，ID加前缀"#"；CLASS用"."
id一个页面只可以使用一次；class可以多次引用。
ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
总结如下

id选择器，用于匹配特定id的元素，具有独一无二不可代替性
class选择器，用于匹配class包含（不是等于）特定类的元素，描述一组元素的样式，你可以多次使用class赋值，来命名元素名

CSS选择器常见的有几种？

基础选择器
四类（*匹配所有元素，#id匹配id，.class匹配相关属性，element匹配元素）
属性选择器
组合选择器
七类

E,F同时匹配E或F。
E F匹配E元素所有的后代元素F。
E>F匹配E元素的子代F。
E+F匹配E之后的相邻同级F。
E~F匹配E之后的同级F。
.class1.class2匹配同时具有class1和clss2属性的元素。
element#id匹配element元素id的元素）**

伪类选择器
伪元素选择器

伪类选择器有哪些？伪元素有哪些？

伪类选择器定义：代表一个元素的另一种状态

E: first-child匹配元素E的第一个子元素
E：link 匹配所有未被点击的链接
E: visited匹配所有已被点击的链接
E：active匹配鼠标已经其上按下，还没被释放的E元素
E：hover 匹配鼠标悬停器上的E元素
E：focus匹配获得当前焦点的E元素
E：lang(c)匹配lang属性等于c的E元素
E：enabled 匹配表单中可用的元素
E：disabled 匹配表单中禁用的元素
checke匹配表单中被选中的radio或checkbox元素
election 匹配用户当前选中的元素
伪元素选择器
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

以下选择器分别是什么意思?

#header{} 匹配id为header的所有元素
.header{} 匹配class为header的所有元素
.header .logo{}匹配class为header的元素后代class为logo的所有元素
.header.mobile{}匹配同时具有header和mobile class的所有元素
.header p, .header h3{}匹配class为header后代里面的所有p元素和所有h3元素
#header a:hover{} 在id为header元素下匹配a元素鼠标悬停属性
#header .logo~p{} 在id为header元素下匹配与class为logo的元素处于后面同级的p元素
#header .logo+p{}在id为header元素下匹配与class为logo的元素处于后面同级的p元素
#header .logo p{}在id为header元素下匹配class为logo元素下的所有后代p元素
#header .logo>p{}在id为header元素下匹配class为logo元素下的所有子代p元素
#header p.logo{}在id为header元素下同时匹配p元素和class为logo元素这类既又关系（并列）的元素的特性
#header .logo.p{}在id为header元素下同时匹配class为logo和p的元素
#header input[checked]{}在id为header元素下匹配checked值的input的元素

选择器的优先级是如何计算的？

优先级从高到低分别是：

在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
Id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
复杂场景情况下

行内样式 <div style="xxx"></div>==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器==> c
标签选择器、伪元素 ==> d
abcd优先级依次降低
举几个例子

a{color: yellow;}特殊性值：0,0,0,1/
·div a{color: green;}特殊性值：0,0,0,2/
.demo a{color: black;}特殊性值：0,0,1,1/
.demo input[type="text"]{color: blue;}特殊性值：0,0,2,1/
.demo *[type="text"]{color: grey;}特殊性值：0,0,2,0/
#demo a{color: orange;}特殊性值：0,1,0,1/
div#demo a{color: red;}特殊性值：0,1,0,2*/

运行如下代码，并对结果做出解释

<style>
 .box:first-child {
  color: red;
}
.box:first-of-type {
  background: blue;
}
.box :first-child {
  font-size: 30px;
}
.box :first-of-type {
  font-weight: bold;
}
</style>
<div class="container">
    <div class="box">div.box</div>
    <p class="box">p.box</p>
    <div class="box">div.box</div>
    <div class="box">
        <div class="item">div.item</div>
        <p class="item">p.item</p>
    </div>
    <p class="box"></p>
</div>

效果图

1.png

.box:first-child {color: red;}选择class为box的父元素下第一个子元素,显示颜色为红色
.box:first-of-type {background: blue;}选择class为box的父元素下的标签子元素,并且这个元素是这个同级中的第一个标签，显示背景色为蓝色
.box :first-child { font-weight: bold;}选择属性为box的父元素下后代中的同级第一个元素，层层选择，使其字体加粗。
.box :first-of-type { font-size: 30px;}选择属性为box的父元素下后代中的同类别第一个元素，层层选择，使其字体大小为30px，