css后代选择器和子选择器的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css后代选择器和子选择器的区别相关的知识,希望对你有一定的参考价值。

参考技术A

后代 包括 子、孙、重孙……乃至千秋万代

那肯定就只是指 儿子 咯

参考技术B 后代选择器包含了之后的所有层级,子选择器只包含一个层级 参考技术C 回答

您好,您的问题我已经看到了,正在整理答案,请稍等一会儿哦~

类选择器和后代选择器的区别

1.子类选择器 子类选择器仅仅指的是父元素的直接后代,大家可以理解为仅作用于第一代子元素,通过“>”进行选择。2.后代选择器 后代选择器则指的是作用于所有后代元素,通过空格来进行选择。

css学习归纳总结 转

原文地址:css学习归纳总结(二)

标签与元素

<p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别。<p><div>等指的是HTML分隔符,而元素则是由一对开始结束标签构成的,用来包含某一些内容

子选择器和后代选择器的区别:

后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。
子选择器只对直接后代有影响的选择器,而对“孙子后代”以及多层后代不产生作用。

注意:在IE6中,只支持后代选择器,不支持子选择器

链接伪类

a:link {color: black}     /* 未访问的链接 */
a:visited {color: blue}  /* 已访问的链接 */
a:hover {color: red}    /* 当有鼠标悬停在链接上 */
a:active {color: purple}   /* 被选择的链接 */

为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:linka:visited 之后!a:active 必须位于 a:hover 之后!!

:after和:before伪元素

“伪元素”,顾名思义。它创建了一个虚假的元素,并插入到目标元素内容之前或之后。
伪元素如果没有设置“content”属性,伪元素是无用的。

插入的元素默认情况下是内联元素,如果你要为其设置宽高等属性,你需要将他定义为块级元素

#element:before{
    content : "";
    display : ‘block‘
    height : 1000px;
    width : 1000px;
}

注入的内容将是有关联的目标元素的子元素,但它会被置于这个元素的任何内容的“前”或“后”。

web标准的构成

1.结构:用来对网页中的信息进行整理与分类,常用的技术有:HTML,XHTML,XML
2.表现:用于对已经被结构化的信息进行显示上的修饰,主要技术就是CSS
3.行为:是指对整个文档内部的一个模型进行定义及交互行为的编写;主要技术有:Javascript

那么如何让关键选择器更有效,性能化更高呢?其实很简单,主要把握一点“越具体的关键选择器,其性能越高”

技术分享

cellpadding与cellspacing

cellpadding(表格填充) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
cellspacing(表格间距) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离

技术分享

css的三性

CSS叠加性:同一个元素被多条样式规则指定。
CSS继承性:后代元素会继承前辈元素的一些样式和属性。
CSS优先级:由于CSS的叠加性和继承性,将产生优先级,这指的是哪条样式规则会最终作用
于指定的元素,他只遵循一条规则,指定的越具体,优先级越高

浏览器读取你的选择器,遵循的原则是从选择器的右边到左边读取。换句话说,浏览器读取选择器的顺序是由右到左进行

并非所有css属性都具有继承性,那么,哪些属性具有继承性呢?

1.文本相关属性是继承的:font-family,font-size,line-height,font-weight,font-style,text-transform
2.列表相关属性是继承的:list-style,list-style-image,list-style-position
3.颜色相关属性是继承的:color

无继承的属性:

1.所有背景属性,盒子属性,布局属性

我们在ul下设置color属性,并不会使ul>li>a下的a的字体发生样式的改变,但会使li下的字体样式发生改变

background属性

background:background-color ||background-image || background-repeat || background-attachment || background-position||background-size

background-image:url("图片的网址"); 背景图 
background: url(" 图片的网址 "); 背景 
background-color:#色码; 背景色彩 
background-position:默认值:0%  0%,可能值:top left ,center left等
background-repeat:默认值:repeat
scroll 拉动卷轴时,背景图片会跟着移动(缺省值) 
fixed 拉动卷轴时,背景图片不会跟着移动 
repeat 背景图片并排 
background-size:是css3规定的属性,50%为缩放图片;100px 50px:把图片调整到100像素宽,50像素高;cover:拉大图片,使其完全填满背景区;container:缩放图片,使其恰好适合背景区

background-position:X坐标 Y坐标

技术分享

各浏览器默认的css样式

地址:http://www.iecss.com/

伪类与伪元素选择符

伪类选择符

技术分享

伪元素选择符

技术分享

常用css hack技巧

地址:http://www.css88.com/book/css/hack/index.htm

IE条件注释法:
01.只在IE下生效

<!-- [if IE]>
<link type="text/css" href="text.css" rel="stylesheet" />
<![endif] -->

02.只在IE6下生效

<!-- [if IE 6]>
<link type="text/css" href="text.css" rel="stylesheet" />
<![endif] -->

css整理与优化工具

地址:http://www.css88.com/tool/csstidy/

css的缩写

font缩写

缩写前
element{
    font-style:italic //设置或检索对象中的字体样式
    font-variant:normal //设置或检索对象中的文本是否为小型的大写字母
    //前2项如果没有特殊设置,可以不写,用默认值即可
    font-weight:bold;
    font-size:12px;
    line-height:20px;
    font-family:"宋体";  
}

缩写后
element{
    font:bold 12px/20px "宋体";
    //属性依次为:字体的粗细 - 字体大小/行高 - 文本的字体 
}

background的缩写

缩写前
element{
    background-color:#ccc;
    background-image:url(sample.gif);
    background-repeat:repeat-x;
    background-attachment:scroll;//scroll是背景图像随对象内容滚动为默认值,可以不写
    background-position:top right;
}
缩写后
element{
    background:#ccc url(sample.gif) repeat-x top right;
    //属性依次为:颜色-背景图-X轴平铺-背景图像位置(背景图片路径不需要加引号)
}

css超出 自动换行

只针对单行文本有效;

01.针对块状元素
ul li{
    width: 180px;
    text-overflow: ellipsis;/*超出部分显示省略号*/
    white-space: nowrap;/*禁止自动换行*/
    overflow: hidden;
}


02.针对table
table{
    table-layout:fixed;
}
table td{
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

css-常用reset

1.body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td,var {margin:0;padding:0; font-size:12px;} 

2.table {border-collapse:collapse;border-spacing:0;} 

3.fieldset,img {border:none} 

4.address,caption,cite,code,dfn,em,strong,th {font-style:normal;font-weight:normal} 

5.ol,ul {list-style:none} 

6.caption,th,td{text-align:center} 

7.h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} 

8.q:before,q:after {content:‘‘} 

9.abbr,acronym { border:0}

注:

code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
acronym - 首字
abbr - 缩写
u - 下划线
var - 定义变量

浮动与清除浮动 clear

对内联元素设置floatabsolute属性,可以让元素脱离文档流,并且可以设置其宽高。

  • float: left的元素会尽量靠近父元素的左上角

  • float: right的元素会尽量靠近父元素的右上角

    
    /*======万能Float闭合======*/
    .clear:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clear {display: inline-block;} /* for IE/Mac */
    .clear {
        zoom: 1; /* triggers hasLayout */
        display: block; /* resets display for IE/Win */
    } 
    /*======万能Float闭合3======*/
    .clear{
     height:0px;
     clear:both;
     font-size:0px;
     line-height:0px;
     zoom: 1;
    }
    

浮动框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

编写更好的 css

避免过度约束

作为一般规则,不添加不必要的约束。

// 糟糕
ul#someid {..}
.menu#otherid{..}

// 好的
#someid {..}
#otherid {..}

后代选择符最烂

不仅性能低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,这是多么糟糕,特别是在大公司里,写htmlcss的往往不是同一个人。

// 烂透了
html div tr td {..}

尽可能使用复合语法

// 糟糕
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: #000;
background-image: url(../imgs/carrot.png);
background-position: bottom;
background-repeat: repeat-x;
}

// 好的
.someclass {
padding: 20px 10px 20px 10px;
background: #000 url(../imgs/carrot.png) repeat-x bottom;
}

避免不必要的重复

// 糟糕
.someclass {
color: red;
background: blue;
font-size: 15px;
}

.otherclass {
color: red;
background: blue;
font-size: 15px;
}

// 好的
.someclass, .otherclass {
color: red;
background: blue;
font-size: 15px;
}

组织好的代码格式

代码的易读性和易维护性成正比。下面是我遵循的格式化方法。

// 糟糕
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
...
}

// 好的
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
...
}

// 好的做法
.someclass {
    background-image:
        linear-gradient(#000, #ccc),
        linear-gradient(#ccc, #ddd);
    box-shadow:
        2px 2px 2px #000,
        1px 4px 1px 1px #ddd inset;
}

div>ul>li>a 结构

结构为:div>div>ul>li>a div与div默认是重合在一起的,为了作区分,第二个div弄了个margin :5px 的间距

在谷歌和火狐浏览器下,divul的默认顶底部间距为20px,ul始终包裹着li,ul的高度由li撑起,块级元素的宽度默认为浏览器宽度。li距离ul左边有一小段间距,用来存放无序列表的小圆点(这里设置了 list-style :none )。

技术分享

技术分享

定义一张图片也要为其设置宽高属性,否则无法进行定位设置,同理,很多元素必须设置其宽高属性才能进行定位

块级元素盒子会扩展到与父元素同宽,所有块级元素的父元素都是body,而它的宽度默认与浏览器窗口一样宽(当然有少量边距)。因为块级元素始终与浏览器窗口同宽。这样一来,一个块级元素旁边也就没有空间容纳另一个块级元素了。

如何居中一个浮动元素

方法一

设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距

 div{
        width:500px;
        height:300px;
        margin:-150px 0 0 -250px;
        position:absolute;
        left:50%;
        top:50%;
        background-color:#000;
}

方法二

父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。

 
<!DOCTYPE html><html><head>
    <title>Demo</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        .p{
            position:relative;
            left:50%;
            float:left;
        }
        .c{
            position:relative;
            float:left;
            right:50%;
        }
    </style></head><body>
    <div class="p">
        <h1 class="c">Test Float Element Center</h1>
    </div>
</body>
</html>

以上是关于css后代选择器和子选择器的区别的主要内容,如果未能解决你的问题,请参考以下文章

css选择器的1.5 子选择器

H5 14-后代选择器和子元素选择器

课时73.后代选择器和子元素选择器(理解)

CSS系列之后代选择器子选择器和相邻兄弟选择器

在css中 比较 后代选择器和相邻选择器有啥区别 设计一个示例

css学习归纳总结 转