关于css的一些总结

最新推荐文章于 2024-05-27 00:00:00 发布

dhtabck325779

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量74

点赞数

原文链接：http://www.cnblogs.com/zhiwudenengliang/p/5760368.html

版权

属性选择器

1.x[xxx]{xx：xx} 选择含有xxx属性x元素例如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p[class]{color: #f00;}
    </style>
</head>
<body>
    <p class="abc">哈哈哈哈</p>
    <p class="ab-cab">哈哈哈哈</p>
    <p class="aaccbb">哈哈哈哈</p>
    <p class="abcabc">哈哈哈哈</p>
    <p class="cba">哈哈哈哈</p>
    <p class="a-bca">哈哈哈哈</p>
    <p id="d 2ca">哈哈哈哈</p>
    <p id="dy ac">哈哈哈哈</p>
　　

</body>
</html>

2.x[x="y"]{xxx:xx} 选择属性x的值是y的x元素例如

p[class="abc"]{color: #f00;}

3.x[x^="y"]{xxx:xxx} 选择属性x的值开头是y的x元素例如

p[class^="ab"]{color: #f00;}

4.x[x$="y"]{xx:xxx} 选择属性x的值结尾是y的元素x 例如

p[class$="a"]{color: #f00;}

5.x[x*="y"]{xxx:xxx} 选择属性x的值含有y的元素x 例如

p[class*="bc"]{color: #f00;}

6.x[x~="y"]{xxx:xx} 选择属性x的值开头是y接着就是空格的x元素例如

p[id~="d"]{color: #f00;}

7.x[x|="a"]{xxx:xx} 选择属性x的值开头是y接着就是-的的x元素例如

p[class|="a"]{color: #f00;}

伪对象选择符

E::first-letter 选择E元素的第一个字符例如

p[class*="a"]::first-letter{color: #f00;}

E::first-line 选择E元素的文本的第一段落例如

p[class*="a"]::first-line{color: #f00;}

E::before

E:after/E::after

E::placeholder 选择E元素的占位符（要加上前缀比如input::-webkit-input-placeholder{color:#f00}）

E::selection 选择被选中E元素（就是拉拽选中的那种也是最好也是加上前缀）

字体样式（font）

缩写：font{（非必要：style，weight，variant等）size/(非必要：line-height) family}

font-style ：字体样式比如斜体(italic)

font-weight:粗细比如粗体（bold）

font-variant:大写设置比如小型大写（small-caps）

font-size:字体大小比如16px

font-family:字体名称比如宋体

line-height:行高比如22px

text-decoration：文本装饰线条比如下划线

color：字体颜色比如red

text-shadow: 文字阴影比如2px（x轴偏移） 2px（y轴偏移） #f00（颜色）;

元素样式

width:宽度比如90%（是父元素的90%）

height:高度比如100px

margin：外边距比如0 auto（外边距是0且居中）

padding：内边距比如5px

以上属性的缩写是{上右下左}或{上下左右}又或者{上下左右}和{上下左右}

转载于:https://www.cnblogs.com/zhiwudenengliang/p/5760368.html

dhtabck325779

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css的一些总结

属性选择器1.x[xxx]{xx：xx} 选择含有xxx属性x元素例如：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style t...
复制链接

扫一扫