css规则的三种引入样式:
1.内部样式:仅对当前文件的元素有效,使用style标签
2.外部样式:适用于所有引入了这个CSS样式表的html文档,使用link标签
3.行内样式:仅适用于当前的页面中的指定的元素,style属性
以下示例：
内部样式表:<style>h1 { color: violet;border: 1px solid #000;} </style><body> <h1>php.cn</h1></body>
效果如下:
外部样式表: <head> <meta charset="UTF-8"> <title></title> <style></style> //使用link 标签引入外部公共样式表 <link rel="stylesheet" href="css/style.css"></head><body> <h1>php中文网</h1></body>
效果如下:
行内样式:<body> //通过style指定元素自定义/定制样式 <h1 style="color: blue;">css真的非常好用</h1></body>!
效果如下:
标签选择器、class选择器、id选择器、结构伪类选择器
标签选择器:<style>li { background-color: violet; }</style><body> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul></body>
效果如下:
class选择器:<style>li[class="on"]{ background-color: violet;}//class选择器可简化为 . .on{ background-color: violet;}</style><body> <ul> <li>item1</li> <li class="on">item2</li> <li>item3</li> <li class="on">item4</li> <li class="on">item5</li> </ul></body>
效果如下:
id选择器:<style>li[id="foo"]{ backgroundcolor:violet;} //因为浏览器不检查id的唯一性,必须由开发者自行保证 //id选择器使用 # 简化#foo{ background-color: violet;}</style><body> <ul> <li id="foo">item1</li> <li>item2</li> <li id="foo">item3</li> <li>item4</li> <li>item5</li> </ul></body>
效果如下:
上下文选择器：
1空格:所有层级 2.>：父子级 3. +: 相邻的兄弟 4.~: 所有相邻兄弟
<style> //1. 后代选择器: 所有层级 ul li { background-color: violet; } //2. 子元素选择器: 仅父子层级 body>ul>li { background-color: #bbbbbb; } // 3. 同级相邻选择器: 仅选中与之相邻的第一个兄弟元素 .start+li { background-color: tomato; } // 4. 同级所有选择器：仅选中与之相邻的后面所有兄弟元素 .start ~ li { background-color: yellow; } </style></head><body> <ul> <li>item1</li> <li class="start">item2</li> <li>item3</li> <li>item4 <ul> <li>item4-1</li> <li>item4-2</li> <li>item4-3</li> </ul> </li> <li>item5</li> </ul></body>
效果如下:
结构伪类选择器://匹配第3个li<style>ul li:nth-of-type(3) { background-color: #bbbbbb; } //选择所有索引为偶数的子元素, 2,4,6,8... ul li:nth-of-type(2n){ background-color: violet; } //选择第一个子元素: :first-of-type :nth-of-type(1) 的语法糖 :first-of-type ul li:first-of-type{ background-color: salmon; } //如果只是想匹配父元素的唯一子元素,使用 :only-of-type就可快速实现 ul li:only-of-type{ background-color: slateblue; }</style><body> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ul> <ul> <li>今天是个好日子</li> </ul></body>
效果如下:
