HTML CSS3 CSS引入样式 选择器

CSS：Cascading Style Sheet 级联样式表

选择器，CSS属性

/*注释*/

p{
    font-size:12px; 设置字体大小
    color:red; 设置字体颜色
}

CSS引入样式

css注释用 /**/

行内样式>内部样式表>外部样式表 就近原则

1.行内样式

在HTML标签中使用style属性

<h1 style="font-size:14px; color: green;">行内样式</h1>

2.内部样式

在HTML页面中使用style

<style>
        h1{color: green; }
</style>

3.外部样式

需要创建.css文件，使用连接式或导入式引用

外部样式，连接式引入
<link href="css/index.css" rel="stylesheet"/>
外部样式，导入式引入
<style>
    @import url("css/index.css");
</style>

选择器

基本选择器

ID选择器>类选择器>标签选择器 不遵循就近原则

标签选择器：使用HTML标签

<p>{}、<h>{}、<div>{}...

类选择器：使用HTML标签中class属性并且使用.操作符

<标签名 class= "类名称">标签内容</标签名>
.class { font-size:16px;}

ID：使用HTML标签中id属性并且使用#操作符（唯一）

全局选择器：使用*操作符

#id{}、*{}

高级选择器

层次选择器：

选择器	类 型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

<style>
    ul li{color:red;} 可
    ul>span{color:red;}只能选儿子
    span+li{color:red;}只能选相邻弟弟
    span~li{color:red;}后面弟弟都能选择
</style>
body中：<ul>
        <span>123</span>
        <li>孙悟空</li>
        <li>唐三藏</li>
        <li>猪八戒</li>
</ul>

结构伪类选择器：

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

ul li:first-child{ background: red;}   ul中第一个子元素的样式
ul li:last-child{ background: green;}  ul中最后一个元素的样式
p:nth-child(1){ background: yellow;}   选择父元素第一子元素p，变为黄色背景
p:nth-of-type(2){ background: blue;}   选择父元素里第2个类型为p的元素，变为蓝色背景

属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）*
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

a[id] { background: yellow; }   含有id属性的a元素
a[id=first] { background: red; }  含有id属性,并且属性值为first的a元素
a[href^=http] { background: red; }  有href属性的a元素,并且属性值是以"http"开头的
a[href$=png] { background: red; }   有href属性的a元素,并且属性值是以"png"结尾的
a[class*=links] { background: red; } 有class属性的a元素,并且属性值中都包含links字符串