如果能够灵活运用属性选择器,目前为止需要依靠id或class名才能实现的样式 完全可以使用属性选择器来实现。
E[att] {}
: 选择具有att属性的E元素
E[att="val"]{}
: 选择具有att属性且属性值等于val的E元素
E[att~="val"]{}
:用于选取属性值中包含指定词汇的元素
E[att|="val"] {}
:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择
E[att*="val"]{}
:选择具有att属性且属性值为包含val的字符串的E元素
E[att^="val"] {}
:选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"] {}
:选择具有att属性且属性值为以val结尾的字符串的E元素
伪类选择符
1. 结构性伪类选择器
css中已经定义好的选择器,不能随便起名字
选择符 | 含义 |
---|---|
:root | 将样式绑定到页面的根元素中 |
:not | 排除某个选择器样式 |
:empty | 使用该选择器来制定当元素内容为空白时使用的样式 |
:first-child | 单独指定第一个子元素的样式 |
:last-child | 单独指定最后一个子元素的样式 |
2. 选择奇偶行
nth-child(odd)与nth-child(even)
:
不足之处:
nth-child选择器在计算子元素时,第奇数个元素还是偶数个元素时,是连同父元素内的所有 子元素一起计算的(默认匹配他们得是相同的子元素)
nth-of-type(odd)奇数和:nth-of-type(even)偶数
:完美解决上面的问题
3.循环使用样式
:nth-child(n)
:选取每一行
n:所有的行
2n:每2行选择一行
3n:每3行选择一行
n+2:除第1行外所有的行
2n+4:从第4行开始隔1行选择1行
:nth-last-child(n)
:从后向前选择,n为参数
n:所有行
2:倒数第2行
-n+3:最后3行
:only-child:只有一个元素时使用
4.目标伪类选择器
:target
:
5.UI 元素状态伪类选择器
选择器 | 含义 |
---|---|
E:enabled | 匹配所有用户界面(form表单)中处于可用状态的E元素 |
E:disabled | 匹配所有用户界面(form表单)中处于不可用状态的E元素 |
E:checked | 匹配所有用户界面(form表单)中处于选中状态的元素E |
E:selection | 匹配E元素中被用户选中或处于高亮状态的部分 |
6.动态伪类选择器
选择器 | 含义 |
---|---|
E:link | 选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过 |
E:visited | 选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过 |
E:active | 选择匹配的E元素,且匹配元素被激活。(以上常用于链接描点和按钮上) |
E:hover | 选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover |
E:focus | 选择匹配的E元素,而且匹配元素获取焦点 |
7.伪类和伪元素的区别
css伪类
:
css伪元素
:
8.层级选择器
相邻兄弟选择器
:
通用兄弟选择器
:
子选择器
:
9.渐进增强、优雅降级
渐进增强(Progressive Enhancement)
:
优雅降级(Graceful Degradation)
:
区别
:
a)文本阴影
:
例:
text-shadow:5px 5px 5px #f66;
指定多个阴影:(参数形式为X坐标 Y坐标 阴影的模糊程度 阴影颜色)
text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;
b)自动换行
:
word-break
normal :使用浏览器默认换行规则
keep-all:只能在半角空格或连接字符处换行
break-all:允许在单词内换行(对于标点符号来说,允许标点符号位于行首,不过在IE中是不可以的)
c)word-wrap
:
让长单词与URL地址自动换行
normal:只在允许的断字点换行(浏览器保持默认处理)
break-word:属性允许长单词或 URL 地址换行到下一行。
d)RGB
:
语法:
color:rgba(R,G,B,A)
以上R、G、B三个参数,正整数值的取值范围为:0 - 255。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
A为透明度参数,取值在0~1之间,不可为负值。
e)圆角
:
border-radius:5px;
如果有两个值:第一个值表示左上角、右下角;第二个值表示右上角、左下角。
如果有三个值:第一个值表示左上角;第二个值表示右上角、左下角;第三个值表示右下角。
f)盒子阴影
:
box-shadow:5px 5px 10px #f66;
添加多个阴影,用逗号隔开即可。
如:
.box_shadow{
box-shadow:4px 2px 6px #f00,
-4px -2px 6px #000,
0px 0px 12px 5px #33CC00 inset;
}
CSS3自适应
width
:
fill-available/fit-content/max-content/min-content
fill-available
:充满整个可用宽度和可用高度
fit-content
:将元素宽度收缩为内容宽度
max-content
:内部元素宽度值最大的那个元素的宽度=最终容器的宽度。如 出现文本,则相当于文本不换行
min-content
:内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度
注意:以上属性值需要加前缀
补充:
calc函数
:此CSS函数让你在声明CSS属性值时执行一些计算
语法:
width: calc(100% - 80px); // +-×÷运算符都可使用
注:
用 0 作除数会让 HTML 解析器抛出异常;
“+” 和 “-” 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。 而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。 “*” 和 “/” 运算符不需要空白符,但考虑到统一性,仍然推荐加上空白符。 huangfuyk 原创文章 106获赞 1875访问量 43万+ 关注 私信 展开阅读全文