什么是选择器? 选择器的作用是通过它可以找到元素, 把 CSS 样式传递给元素! CSS 选择器主要分为: 基本选择器, 属性选择器, 组合选择器与伪类选择器四个大类!
CSS 基本选择器
基本选择器又分为: 通配符, 标签选择器, class 选择器, id 选择器, 在这里需要注意的编程思想在 CSS 层叠样式表中元素有且仅有一个 id. 注意以下几点 1.id 唯一性 2. 元素 id 不相同, 就像每一个人只有一个身份证一样, ID 就代表身份证 3.class 选择器不具有唯一性, 它可以重复使用! 此外这个通配符代表的是全局
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CSS 基本选择器</title>
- <style type="text/css">
- *{
- color: skyblue;
- }/** 通配符 */
- div{
- color: red;
- }/* 标签选择器 */
- .box{
- color: steelblue;
}/*class 选择器 */.box{color: steelblue;}也可以写成 *.box{color: steelblue;}代表的所有的 box 字体颜色为 steelblue 17 #content{
- color: tomato;
- }/*id 选择器 */
- </style>
- </head>
- <body>
- <div class="box" id="content">
学习 Q-q-u-n: 784783012 </div>
- </body>
- </HTML>
CSS 组合选择器
把基本选择器通过特殊符号串在一起有意见称之为 CSS 组合选择器, 常见的 CSS 组合选择器有: 分组选择器, 嵌套选择器, 子选择器, 相邻同级别选择器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CSS 组合选择器</title>
- <style type="text/css">
- /* div{ 9 color: teal; 10 font-size: 24px; 11 } 12 p{ 13 color: teal; 14 } */
- div{
- font-size: 24px;
- }
- div,p{
- color: teal;
- }/* 分组选择器 */
- div p{
- color: red;
- }/* 嵌套选择器 */
- ul>li{
- font-size: 24px;
- list-style: square;
- }/* 子选择器 */
- div+p{
- color: blue;
- }/* 相邻同级别选择器 */
- </style>
- </head>
- <body>
- <div>
成功的花, 人们只惊羡她现时的明艳! 然而当初她的芽儿, 浸透了奋斗的泪泉, 洒遍了牺牲的血雨 36 <p > 自以为懂得很多了经历很多了最后才知道都是那么的可笑</p>
- </div>
- <p > 我们不要只看成功者荣誉的瞬间, 更要看到成功者为之努力, 为之奋斗的过程, 从而激励自己也不断付出, 奔着那个成功的目标前进.</p>
- <p > 成功的花, 人们只惊羡她现时的明艳! 然而当初她的芽儿, 浸透了奋斗的泪泉, 洒遍了牺牲的血雨 < span > 我们不要只看成功者荣誉的瞬间, 更要看到成功者为之努力, 为之奋斗的过程, 从而激励自己也不断付出, 奔着那个成功的目标前进.</span></p>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </body>
- </HTML>
CSS 属性选择器
基本选择器 [属性], 基本选择器[属性 = 值], 基本选择器[属性~= 值] 空格符隔开多个, 基本选择器 [属性 ^= 值] 以什么开始, 基本选择器 [属性 $= 值] 以什么结束
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS 属性选择器</title>
- <style type="text/css">
- div[title]/* 基本选择器[属性]*/
- div[title=english]{
- color: blue;
- }/* 基本选择器[属性 = 值]*/
- div[title~=en]{
- color:#f90;
- font-weight: bold;
- }/* 基本选择器[属性~= 值] 任意包含有属性中的一个 */
- p,div[title^=zh]{
- font-size:24px;
- color: brown;
- }/* 基本选择器 [属性 ^= 值] 以什么开始 */
- div[title$=china]{
- letter-spacing: 10px;
- text-decoration: line-through;
- font-style: italic;
- }/* 基本选择器 [属性 $= 值] 以什么结束 */
- </style>
- </head>
- <body>
- <div title="english">
- If you can NOT explain it simply, you do NOT understand it well enough 30 </div>
- <div title="english en yingyu">
32 你们没发现嘛? 2013 爱你一生, 2014 爱你一世, 2015 爱你一屋, 2016 爱你一路, 2017 爱你一切, 2018 爱你一半, 2019 爱你依旧, 2020 爱你爱你, 2021 爱你而已 33 </div>
34 <p title="zh en">
35 CSS 选择器四大类: 基本, 组合, 属性, 伪类 36 </p>
- 37 <div title="zh en china">
- 38 http://www.cnblogs.com/dhnblog/p/12293463.html 39 </div>
- 40 </body>
- 41 </HTML>
CSS 伪类选择器
从字面意思来讲, 伪就是假的, 元素是标签与标签包裹的内容, 简单来说伪元素就是假的元素, 假的反义词是真的, 在页面中这些又是我们自己写的, 所以它是真的. 在这个 HTML 页面中, 所有元素都会被偷偷加上开始与结束标签, 这个就是伪元素, 伪类选择器指的是一种操作状态!
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- CSS 伪类选择器
- </title>
- <style type="text/css">
- p{ color: brown; border: 1px solid black; height: 40px; line-height: 40px;
- } p::before{ content: "before 开始"; } p::after{ content: "after 结束"; } /*
- 针对块元素 21 第一个字母::first-letter 22 第一行文字::first-line */ div::first-letter{
- font-size: 24px; color: blue; } div::first-line{ color: yellowgreen; font-style:
- initial; font-weight:bolder; }
- </style>
- </head>
- <body>
- <div class="box">
- http://www.dhnblog.com/ 大灰牛博客技术为王世界, 拼搏成就梦想, 高度取决态度 36
- <!--before 开始 -->
- <p>
- 情人节祝福语送女朋友, 很甜很撩, 瞬间收服她的心!
- </p>
- <!--after 结束 -->
- </div>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/d9c598d6a6a6