css复习

秒速五厘米 2022-06-12 07:17 532阅读 0赞

3.10选择器总结

除了内联样式（用style属性描写的），对于样式的描述格式有

样式的描述包括两部分：即选择器和样式内容

样式内容：是键值对的形式描述样式的细节描述，比如字体大小，颜色、高度等

选择器：描述后面的样式施加到哪些目标，或者说是根据某个依据来选择应用样式的目标

根据选择依据的不同，就产生了各种不同的选择器

元素选择器

按照标签（元素）的名称来选择相应的目标

div\{

background-color：red

id选择器

根据元素的id属性来选择，比方下列中的是选择器就是选中id=“tt”的目标，来施加样式

\#id name

\#tt\{

font-size：24px

类选择器

根据元素的class属性来选择

选择器选中class=“tt”的元素

.class name

.tt\{

font-size：24px

属性选择器

根据属性的特征来选择应用样式的目标，所以从这个意义上来讲，它包含了id选择器和class选择器

\[title\]：选择设置了title属性的元素

\[title=”tt”\]: 选择title属性等于“tt”的元素

\[title^=”tt”\]: 选择title属性以“tt”开头的元素

\[title~=”tt”\]: 选择title属性包含完整“tt”单词的元素

\[title$=”tt”\]: 选择title属性以“tt”结尾的元素

\[title\*=”tt”\]: 选择title属性包含“tt”的元素

关系选择器

根据元素的家族关系来选择目标

E  F:在选择器E选中的目标中在去选中后代F选择器的目标

E > F选择直接后代

E + F选择第一个“弟”元素

E ~ F选择所有“弟”元素

这些细节有可能记不住，但只要理解了就好，需要用时就可以查一下

伪类、伪元素选择器

伪元素：其效果与增加一个元素来实现的效果等价，所以称之为伪元素

伪类：其效果与增加一个类来实现的效果等价，所以称之为伪类

组合（并）选择器：多个选择器使用同一个样式描述，以逗号隔开

5.CSS三大特性

5.1继承

子代可以直接使用父代的某些样式（特征），当然有些可以继承，有些不能继承。

比如人可以从父母继承姓、肤色等，但性格不能继承  
    <style>  
        \#div1\{  
            font-size:24px;  
            color: red;  
        \}  
    </style>  
</head>  
<body>  
<div id="div1">  
    这是div1中的内容  
    <div id="div2">  
        这是div1的后代div2的内容  
    </div>  
</div>  
</body>

div2虽然没有设定这种样式，但是实际上却使用了该样式，说明div2从它的父代div1那里继承而来

通过开发者工具查看

但并不是所有的属性都可以继承

\#div1\{  
    font-size:24px;  
    color:red;  
    border:2px solid green;  
\}

从结果反映出来div2并没有边框，也就是说border没有被继承

什么属性能继承，什么属性不能被继承

5.2层叠性

公司发了两条通知

通知一

所有员工本月奖金500元

通知二

每位党员加发96元