最新消息:阿里云双12优惠,史上最低折扣。

css元素选择器全面解析

服务器租用 aliyun 105浏览

活动可视化搭建(拖拽生成页面)

基于此开发一个活动可视化搭建项目,让运营可以通过,点击和拖拽组件,选择或导入数据的的方式,快速生成活动页面上线。

一.元素选择器

首先需要知道元素之间的关系:

父元素:直接包含子元素的元素

子元素:直接被父元素包含的元素

祖先元素:直接或间接包含后代元素的元素

后代元素:直接或间接被祖先元素包含的元素

兄弟元素:拥有相同父元素的元素

二、后代元素选择器

作用:选中指定元素的指定后代元素。

语法:祖先元素 后代元素 {}(空格隔开)

div span {

    color: red;

}

<div>

    <span>第一个span。</span>  <!–颜色为red–>

    <span>第二个span。</span>  <!–颜色为red–>

</div>

三、子元素选择器

作用:选择指定父元素的指定子元素

语法:父元素 > 子元素

div > span {

    color: red;

}

<div>

    <span>第一个span。</span>  <!– 颜色为red –>

    <span>第二个span。</span>  <!– 颜色为red –>

    <ul>

     <span>ul下的span</span><!– 颜色不变 –>

    </ul>      

</div>

四、伪类

表示元素的一种特殊状态。

:active 向被激活的元素添加样式。

:focus 向拥有键盘输入焦点的元素添加样式。

:hover 当鼠标悬浮在元素上方时,向元素添加样式。

:link 向未被访问的链接添加样式。

:visited 向已被访问的链接添加样式。(隐私问题只能设置颜色)

:first-child 向元素的第一个子元素添加样式。

:lang 向带有指定 lang 属性的元素添加样式。

::selection匹配被用户选中或处于高亮状态的部分。

a:link {      /* 未访问的链接 */

    color: #FF0000

}

五、伪元素

表示元素中一些特殊的位置。

:first-letter 向文本的第一个字母添加特殊样式。

:first-line 向文本的首行添加特殊样式。

:before 在元素之前添加内容。

:after 在元素之后添加内容。

h1:after {

  content:url(logo.gif);

}

六、属性选择器

作用:可以根据元素中的属性或属性值来选取指定元素。

语法:

[属性名] 选取含有指定属性的元素

[属性名=”属性值”] 选取含有指定属性值的元素

[属性名^=”属性值”] 选取属性值以指定内容开头的元素

[属性名$=”属性值”] 选取属性值以指定内容结尾的元素

[属性名*=”属性值”] 选取属性值以包含指定内容的元素

p[title] {

background-color: yellow;

}

p[title=”hello”] {

background-color: yellow;

}

<p title=”hello”>文字</p>

七、其他子元素选择器

:first-child

指定父元素中第一个元素且为指定元素的样式。

p:first-child { //匹配作为任何元素的第一个子元素的 p 元素

  color: red;

}

<div>

<div>段落</div>    <!–如果该元素为p,则字体为红色–>

<p>段落</p>

<p>段落</p>

</div>

<div>

<p>段落</p>        <!–因为是div的第一个子元素且为p元素,所以字体为红色–>

<p>段落</p>

</div>

提示:最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

:last-child

指定父元素中最后一个元素且为指定元素的样式。

p:last-child { //匹配作为任何元素的第一个子元素的 p 元素

  color: red;

}

<div>

<p>段落</p>

<p>段落</p>

<div>段落</div>    <!–如果该元素为p,则字体为红色–>

</div>

<div>

<p>段落</p>

<p>段落</p>        <!–因为是div的最后一个子元素且为p元素,所以字体为红色–>

</div>

提示:最常见的错误是认为 p:last-child 之类的选择器会选择 p 元素的最后一个元素。

:nth-child

匹配第n个位置,且为指定元素的元素。even表示偶数位置,odd表示奇数位置的元素。

p:nth-child(2) // 匹配其父元素的第二个子元素为 p 的颜色

{

color:red;

}

<div>

<div>段落</div>

<p>段落。</p>

<p>段落。</p>

</div>

:first-of-type

选择特定类型的第一个元素。

p:last-of-type

{

background:red;

}

<div>第一个段落。</div>

<p>第二个段落。</p>  <!–颜色为red–>

<p>第三个段落。</p>

<p>第四个段落。</p>

:last-of-type

选择特定类型的最后一个元素。

p:last-of-type

{

background:red;

}

<p>第一个段落。</p>

<p>第二个段落。</p>

<p>第三个段落。</p>  <!–颜色为red–>

<div>第四个段落。</div>

:nth-of-type

选择特定类型的第n个元素。

p:nth-child(3) // 匹配其父元素的第二个子元素为 p 的背景色

{

background:red;

}

<p>第一个段落。</p>

<p>第二个段落。</p>

<p>第三个段落。</p>  <!–颜色为red–>

<div>第四个段落。</div>

八、兄弟元素选择器

作用:选择一个元素紧挨着的指定的兄弟(不能有任何元素隔着)

语法:元素1 ~ 元素2 (选中元素1的紧挨着的前一个元素是元素2的元素);

元素1 + 元素2(选中元素1的紧挨着的后一个元素是元素2的元素)

否定伪类

作用:可以从已选中的元素中剔除某些元素

语法: :not(选择器)

p:not(.hello) {

background: yellow

}

<p>第一个段落。</p>                <!– 背景yellow –>

<p>第二个段落。      <!– 无背景 –>

<p>第三个段落。</p>                <!– 背景yellow –>

<p>第四个段落。</p>                <!– 背景yellow –>

转载请注明:小猪云服务器租用推荐 » css元素选择器全面解析