1、属性
通过属性的复杂叠加才能做出漂亮的网页
2、选择器
通过选择器找到对应的标签设置样式
选择器的作用:选择对应的标签,为之添加样式
1 > 标签选择器:根据标签名找到标签
2 > 类选择器
格式:. 类名
- <p class="high">
- 第一段文件
- </p>
- <p>
- 第二段文字
- </p>
- <div class="high">
- div1
- </div>
- <div>
- div2
- </div>
- //通过类选择器设置标签.high{ color:red;}//结果:"第一段文件"、"div1"的字体颜色是红色
3>id 选择器:唯一
格式:#id
- <p id="first">
- 第一段文件
- </p>
- <p>
- 第二段文字
- </p>
- //通过id选择器设置标签#first{ color:red;}//结果:"第一段文件"的字体颜色是红色
4 > 并列选择器:多个标签有相同样式
- <p class="high">
- 第一段文件
- </p>
- <p>
- 第二段文字
- </p>
- <div class="high">
- div1
- </div>
- <div>
- div2
- </div>
- //通过并列选择器设置标签div,.high{ color:red;}//结果:"第一段文件"、"div1"、"div2"的字体颜色是红色
5 > 复合选择器:快速定位 相当于逻辑 "与"
- <p class="high">
- 第一段文件
- </p>
- <p>
- 第二段文字
- </p>
- <div class="high">
- div1
- </div>
- <div>
- div2
- </div>
- //通过复合选择器设置标签div.high{ color:red;}//结果:"div1"的字体颜色是红色
6 > 后代选择器
- <p id="first">
- 第一段文件
- </p>
- <p>
- 第二段文字
- </p>
- <div class="high">
- div1
- </div>
- <div>
- <p>
- div里面的p
- </p>
- <span>
- <p>
- div里面的span里面的p
- </p>
- </span>
- </div>
- </div>
- <p>
- 外面的p
- </p>
- //通过后代选择器设置标签div p{ color:red;}//结果:"div里面的p"、"div里面的span里面的p"的字体颜色是红色
7 > 直接后代选择器
- <p id="first">
- 第一段文件
- </p>
- <p>
- 第二段文字
- </p>
- <div class="high">
- div1
- </div>
- <div>
- <p>
- div里面的p
- </p>
- <span>
- <p>
- div里面的span里面的p
- </p>
- </span>
- </div>
- </div>
- <p>
- 外面的p
- </p>
- //通过直接后代选择器设置标签div p{ color:red;}//结果:"div里面的p"的字体颜色是红色
8 > 相邻兄弟选择器
- <div>
- <p>
- div里面的p
- </p>
- <span>
- <p>
- div里面的span里面的p
- </p>
- </span>
- </div>
- <p>
- 与div相邻的p
- </p>
- <p>
- 与p相邻的p
- </p>
- //通过相邻兄弟选择器设置标签div+p{ color:red;}//结果:"与div相邻的p"的字体颜色是红色
9 > 属性选择器
一维:
- <div name="jack">
- 1111
- </div>
- <div name="rose">
- 2222
- </div>
- <div>
- 3333
- </div>
- //通过属性选择器设置标签div[name] { color:red;}//结果:"1111"、"2222"的字体颜色是红色
二维:
- <div name="jack">
- 1111
- </div>
- <div name="rose" age="20">
- 2222
- </div>
- <div age="10">
- 3333
- </div>
- //通过属性选择器设置标签div[name][age] { color:red;}//结果:"2222"的字体颜色是红色//通过属性选择器设置标签div[name="jack"]
- { color:red;}//结果:"1111"的字体颜色是红色
10 > 伪类选择器:在对应的选择器后加冒号,加属性,当属性被激活、触发时改变样式
- 属性 描述:active 向被激活的元素添加样式。:focus 向拥有键盘输入焦点的元素添加样式。:hover 当鼠标悬浮在元素上方时,向元素添加样式:link 向未被访问的链接添加样式:visited 向已被访问的链接添加样式。:first-child 向元素的第一个子元素添加样式。:lang 向带有指定lang属性的元素添加样式。
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: