QQ:275487025
QQ群：854312770
欢迎各种大牛指点，和小白一起学习。

css选择器分类：

标签选择器（元素选择器）
类选择器
ID选择器
通配符选择器
伪类选择器
伪元素选择器
派生选择器
    后代选择器（包含选择器）
    子元素选择器
    相邻兄弟选择器
组合选择器

常用的：

标签选择器:（选择器名称为html标签名称）

p{text-indent:3em;}     /*当前的选择器是p*/
h1{color:red}           /*当前的选择器是h1*/

类选择器：
（定义一类HTML元素的样式。选择器名称以 . 开始，后面再加上对应元素class属性值）
HTML页面：对应元素的class值设为类选择器名称

<p class=给值命名>内容</p>

scc页面：选择器名称以 . 开始，后面再加上对应元素class属性值

.给值命名{background-color:#EAEAEA;}  /*注意是用  .   开头！！*/

id选择器：
（选择器名称以#开始，后面再加上对应元素的id属性值
将对应元素的id属性值设为id选择器名称）
HTML页面：

<p id="给值命名">内容</p>                   <!– 在html的p标签中指定id属性main 这个值前面 不 加# -->

css页面：

#给值命名{background-color:#EAEAEA;}       /*ID名称main前加上一个#号*/

通配符选择器：
（所以元素！但是这个选择器的优先性很低！！）html里面头部标签里面写就可以了

*{font-size:12px;color:#888}

组合选择器：

多元素选择器:
同时匹配所以的E元素和F元素，两个元素之间用；号分隔。

p,h1,h2{mergin:0px;}

后代元素选择器:
匹配所有属于E元素后代的F元素，E和F之间用空格分隔。

#slidebar p{mergin:0px;}

子元素选择器：
匹配所有的E元素的子元素F。

div>p{mergin:0px;}

相邻兄弟选择器：
匹配紧接在

元素之后的所有

元素。

div+p{mergin:0px;}

伪类a：
通过a标签链接。

a：link，a:hover,a:visited,a:active

CSS伪类是用来添加一些选择器的特殊效果
超链接特殊效果
a:link {color:#FF0000;} /* 未访问的链接 /a:visited {color:#00FF00;} / 已访问的链接 /a:hover {color:#FF00FF;} / 鼠标划过链接 /a:active {color:#0000FF;} / 已选中的链接 */

提示：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的

伪元素：
作用于额外元素而不是元素本身，这就是“伪元素”
:first-letter 首字母
:first-line 首行
:before 元素前插入内容
:after 元素后插入内容

p:before
    {
        ontent:"内容为"
        font-size:16px;
        font-weight:bold;
    }

css的继承特性：
CSS继承性
HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。
HTML中，是其他元素的容器，是其他元素的最外层元素，所以元素中定义的样式将影响其他所有元素的显示格式。
具有继承的CSS属性
文本相关的属性是继承的
text-align、color、text-indent、font-family、font-size
font-style、font-weight、 letter-spacing、word-spacing
text-transform、line-height等

继承
通用 0 从低
标签 1
类 10
伪类 10
ID 100
行内 1000
!important 到高

css优先级：
组合选择器的优先级是如何计算的？
特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。
一般而言，选择器指向的越准确，它的优先级就越高。通常我们用1表示标签选择器的优先级，用10表示class选择器的优先级，用100标示ID选择器的优先级，用1000表示行内样式。
叫做“I-C-E”计算公式
举例：
div.box span{ } 优先级为12
.box span{ } 优先级为11，优先级小于上边

注意：!important 优先级最高！高于上面的一切！！！*选择器最低，低于一切！！！

CSS指定URL地址方式：
body{background-image:url(bg.jpg)}
body{background-image:url(http://www.lp.cn/im/bg.jpg)}
body{background-image:url(‘bg.jpg’)}
body{background-image:url(“bg.jpg”)}

CSS中的颜色值：

rrggbb可以缩写#rgb

rgb(x,x,x) 其中x是一个0-255的整数值,如rgb(255,204,0)
rgb(x%,x%,x%) 其中x是一个0-100的整数值,如rgb(100%,80%,0)

css长度：
em：
1em等于默认的字体尺寸，2em等于默认的两倍。
px：
计算机上的一个点，像素。

css选择器以及基础

rrggbb可以缩写#rgb

猜你喜欢