基本选择器包括标签选择器.类选择器和ID选择器三类,其他选择器都是在这三类选择器的基础上组合形成 ##标签选择器 示例: <style type="text/css"> p{ font-size:12px; color:red; } </style> 类选择器 标签选择器虽然方便,但是也存在缺陷,因为每个标签选择器所定义的样式不仅仅影响某一个特定对象,而且会影响到页面中所有同名的标签. 类选择器可以为网页对象定义不同的样式类,实现不同元素拥有相同的样式.相同的元…
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣…
类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" c…
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式规则应用于元素属性 id="para1": #para1 { text-align:center; color:red; } ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用. class 选择器 class 选择器用于描述一组元素的样式,clas…
前言  过去零零星星地了解和使用:link.::after和content等伪类.伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理. 伪类  伪类选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果.具体有:link.:visited.:hover.:active.:focus.:focus-within.:target.:root和:checked. HTMLAnchorElement的4大经典伪类 :link,用于设置链接初始状态时的样式…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 .text{ color: red; } #div2 .text{ color: yellow; } </style> <title>类选择器</title> </head> <body> <…
首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"…
一.问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式 二.id选择器 1.定义:根据指定的id名称找到对应的标签,然后设置属性 2.格式: #id名称{ 属性:值: } 3.例如: <style> p{ color: rgb(255,45,45); } #label1{ color:black; } #label2{ color: #37fa1e; } #label3{…
有些时候,我们可以将多个class选择器或者id选择器,html选择器的共同部分提取出来,写在一起,这样的好处是是可以简化css文件 1.首先我们先看一段代码.css,如下: @charset "utf-8"; /* CSS Document */ /*招生广告*/ .ad_stu { width: 136px; height: 196px; background-color: #FC7E8C; margin: 5px 0 0 5px; float: left; } /*广告2*/ .…
li:first-child {color:red} li:nth-child(3n) {color: red} 在对nth-child传参的时候,已经直接用公式,3n就表示3的倍数.多用伪类和伪元素,可以使代码更精简,多看一下. display:table-cell实现垂直居中挺好用的,看别人的文章 另外,CSS3有个grid 布局,挺好用的,只是目前很多浏览器没有实现.…