AY H5笔记9-css选择器,伪元素选择器,伪类选择器

时间：2020年09月21日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 723次 | 评论 0 人

元素选择器

    *{
        border: 1px solid #F00;
    }

就是type类型，比如div，p，直接写这个节点，这里*号是全部

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
    <style type="text/css">
    *{
        border: 1px solid #F00;
    }
    </style>
</head>

<body>
    <div>
        <table>
            <tr>
                <td>AY</td>
            </tr>
            <tr>
                <td>WPF</td>
            </tr>
            <tr>
                <td>WEB学习</td>
            </tr>

        </table>
    </div>
</body>

</html>

增加两个元素选择器

    <style type="text/css">
    *{
        border: 1px solid #F00;
    }
    div{
        border: 10px solid #00F;
    }
    td{
        color: rgb(121, 168, 131);
    }
    </style>

属性选择器

下面以div举例子

div{...}

div[id] 元素[attr特性] 。具有id特性的div

div[id=xx] id=xx的div

div[id ~=value] id属性里值以空格隔开的系列值，比如说class="show bigfont"

div[id |=value] id属性值以连字符分隔的系列值，其中第一个值为value的Tag元素起作用

div[id^="xx"] id属性值以xx开头的 div

div[id$="xx"] id属性值以xx结尾的div

div[id*="xx"] id属性值包含xx的div

ID选择器

html节点都有id特性，取个名字，比如取 <div id="idvalue"></div>

可以这样获取到这个div，然后附加样式

#idvalue

如果还有个<p id="idvalue"></p>

也叫这个

可以 div#idvalue

事实上很少有重复的id

class选择器

对class=ayclass的所有元素起作用

.ayclass{

border:1px solid #f00;

}

也可以更精确点,对class=ayclass的div元素起作用

div.ayclass

{

border:1px solid #f00;

}

使用

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

包含选择器

用空格表示层级，不限多少层，比如div是第一层，内部的元素随便多少层才出现的

例如： div下的所有a元素

div a{

...

}

div下的所有class=a的元素

div .a{

...

}

div下的所有class=a的p元素

div p.a{

...

}

子级选择器

用>表示下级，限多少层，比如div是第一层，则只对第二级生效

例如： div下的内部第一级别的a元素

div>a{

...

}

div下的内部第一级别的所有class=a的元素

div .a{

...

}

div下的内部第一级别的所有class=a的p元素

div p.a{

...

}

css3.0新增的兄弟选择器

用~表示后面的同级节点

例如：

id=idvalue的元素后面，同级别的a元素

#idvalue ~ a{

...

}

id=idvalue的元素后面，同级别的 class="a"的元素

#idvalue ~ .a{

...

}

选择器组合

用, 英文号表示组合使用

div,a,#abc,#idvalue ~ a{

...

}

伪元素选择器

:first-letter 指定对象类第一个字符。

仅对块元素，例如 div,p,section等，如果想对行内元素例如span,必须设定对象的width和height。或者设置position:absolute.或者设置display:block,通过该选择器配合font-size，float可以制作首字母下沉效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first-letter</title>

    <style type="text/css">
        span {
            display: block;
        }
        span:first-letter{
            color: #f00;
            font-size: 20pt;
        }
        section:first-letter{
            color: #00f;
            font-size:30pt;
            font-weight: bold;
        }
        p:first-letter{
            color: #00f;
            font-size:40pt;
            font-weight: bold;
        }
        div:first-letter{
            color: #00f;
            font-size:50pt;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <span>abc</span>
    <section>杨洋的web</section>
    <p>神说ay的一圈一圈</p>
    <div>
        div而已
    </div>
</body>

</html>

:first-line 指定对象内第一行内容

仅对块元素，例如 div,p,section等，如果想对行内元素例如span,必须设定对象的width和height。或者设置position:absolute.或者设置display:block

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first-letter</title>

    <style type="text/css">
        span {
            display: block;
        }
        span:first-line{
            color: #f00;
            font-size: 20pt;
        }
        section:first-line{
            color: #00f;
            font-size:30pt;
            font-weight: bold;
        }
        p:first-line{
            color: #00f;
            font-size:40pt;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <span>abc<br/>def</span>
    <section>杨洋的wpf<br/>学习css</section>
    <p style="width:140px;">神说ay的一圈一圈</p>
</body>

</html>

:before 与内容相关的属性结合使用，在指定对象内部的前端插入内容

配合content属性使用

比如在p前面增加一个content

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first-letter</title>

    <style type="text/css">
        span {
            display: block;
        }
        span:first-line{
            color: #f00;
            font-size: 20pt;
        }
        section:first-line{
            color: #00f;
            font-size:30pt;
            font-weight: bold;
        }
        /* p:first-line{
            color: #00f;
            font-size:40pt;
            font-weight: bold;
        } */
        p:before{
            content: "html5：";
            background-color:yellow;
            color:red;
            font-weight:bold;
            font-size:40pt;
        }
    </style>
</head>

<body>
    <span>abc<br/>def</span>
    <section>杨洋的wpf<br/>学习css</section>
    <p style="width:140px;">神说ay的一圈一圈</p>
</body>

</html>

继续增加一个p元素

<body>
    <span>abc<br/>def</span>
    <section>杨洋的wpf<br/>学习css</section>
    <p style="width:140px;">神说ay的一圈一圈</p>
    <p style="width:140px;">ay的两圈</p>
</body>

写html在content是没用的，就显示普通文本。

:after 与内容相关的属性结合使用，在指定对象内部的尾端插入内容

顾名思义，添加在后面

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first-letter</title>

    <style type="text/css">
        span {
            display: block;
        }
        span:first-line{
            color: #f00;
            font-size: 20pt;
        }
        section:first-line{
            color: #00f;
            font-size:30pt;
            font-weight: bold;
        }
        /* p:first-line{
            color: #00f;
            font-size:40pt;
            font-weight: bold;
        } */
        p:after{
            content:"html5";
            background-color:yellow;
            color:red;
            font-weight:bold;
            font-size:40pt;
        }
    </style>
</head>

<body>
    <span>abc<br/>def</span>
    <section>杨洋的wpf<br/>学习css</section>
    <p style="width:140px;">神说ay的一圈一圈</p>
    <p style="width:140px;">ay的两圈</p>
</body>

</html>

内容相关的属性

include-source: 应该为url

content： Url(url),attr(alt),counter(name),counter(name,list-style-type),open-quote,close-quote等格式，用于 :before和:after

quotes:用于为content属性定义open-quote和close-quote,该属性的值可以是两个以空格分隔的字符串

counter-increment 定义一个计数器，需要与content结合使用

counter-reset 计数器复位，需要与content结合使用

插入图片

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:after</title>

    <style type="text/css">
        p:after{
            content:url("http://www.wpfui.com/abl/o_37.jpg");
            background-color:yellow;
            color:red;
            font-weight:bold;
            font-size:40pt;
        }
    </style>
</head>

<body>
    <p>神说ay的一圈一圈</p>
    <p>ay的两圈</p>
</body>

</html>

content支持字符串，还支持url

选择器插入

下面是 class="ayz"的p元素后面插入一个图片

    <style type="text/css">
        p.ayz:after{
            content:url("http://www.wpfui.com/abl/o_37.jpg");
            background-color:yellow;
            color:red;
            font-weight:bold;
            font-size:40pt;
        }
    </style>
</head>

<body>
    <p>神说ay的一圈一圈</p>
    <p class="ayz">ay的两圈</p>
</body>

配合quotes，

实现前后插入，quotes的值，两个字符串用空格隔开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>quotes</title>

    <style type="text/css">
div#pid>p{
    quotes: "<<" ">>";
}
div#pid>p:before{
    content: open-quote;
}
div#pid>p:after{
    content: close-quote;
}

    </style>
</head>

<body>
    <div id="pid">
        <p>神说ay的一圈一圈</p>
        <p>神说ay的两圈</p>
    </div>

</body>

</html>

配合counter-increment添加编号

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>counter-increment</title>

    <style type="text/css">
div#pid>p{
    counter-increment: aycnter;
}
div#pid>p:before{
    content: counter(aycnter) '.';
    font-size: 20pt;
    color:green;
}


    </style>
</head>

<body>
    <div id="pid">
        <p>神说ay的一圈一圈</p>
        <p>神说ay的两圈</p>
    </div>

</body>

</html>

再复杂点，二级编号

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 属性。</p>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

数字项目模板 Section 计数 .

然后全局body开始section计数器重置，遇到h1元素，就重置subsection计数器

修改代码，每次递增3

使用自定义编号，我们上面使用的是数字

修改这里的值

值的列表

decimal:数字，默认

disc实心圈

circle:空心圈

square:实心方块

lower-roman:小写罗马数字

upper-roman:大写罗马数字

其他的如下

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

伪类选择器

:root 全局根节点

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style type="text/css">
:root{
    background-color: #f00;
}

    </style>
</head>

<body>
    <div id="pid">
        <p>神说ay的一圈一圈</p>
        <p>神说ay的两圈</p>
        <p>神说ay的三圈</p>
    </div>

</body>

</html>

必须是第一个元素，如果第一个是p，然后是li，都不能生效

:first-child

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style type="text/css">
        li:first-child {
            color: lightcoral;
        }
    </style>
</head>

<body>
    <ol>
        <li>www.baidu.com</li>
        <li>www.ayjs.net</li>
        <li>www.wpfui.com</li>
        <li>ayjs.net</li>
        <li>wpfui.com</li>
    </ol>
    <br />
    <ul>
        <li>WWW.baidu.com</li>
        <li>WWW.ayjs.net</li>
        <li>WWW.wpfui.com</li>
        <li>AYJS.net</li>
        <li>WPFUI.com</li>
    </ul>
</body>

</html>

对作为其父元素的第一个子节点的li元素

:last-child

对作为其父元素的最后一个子节点的li元素

  <style type="text/css">
        li:first-child {
            color: lightcoral;
        }
        li:last-child {
            color: #00FFdd;;
        }
    </style>

:nth-child 和 :nth-last-child

第几个子节点

    <style type="text/css">
        li:first-child {
            color: lightcoral;
        }
        li:last-child {
            color: #00FFdd;;
        }

        li:nth-child(2) {
            color: blue;
        }
        li:nth-last-child(2) {
            color:purple;
        }
    </style>

上面是对其父元素第二个li 颜色改为蓝色，倒数第二个li改为紫色

:only-child

它的父节点，只有他一个子节点，就生效

测试

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style type="text/css">
        li:first-child {
            color: lightcoral;
        }

        li:last-child {
            color: #00FFdd;
            ;
        }

        li:nth-child(2) {
            color: blue;
        }

        li:nth-last-child(2) {
            color: purple;
        }

        span:only-child {
            color: gold;
            font-size: 60px;
        }
    </style>
</head>

<body>
    <ol>
        <li>www.baidu.com</li>
        <li>www.ayjs.net</li>
        <li>www.wpfui.com</li>
        <li>ayjs.net</li>
        <li>wpfui.com</li>
    </ol>
    <br />
    <ul>
        <li>WWW.baidu.com</li>
        <li>WWW.ayjs.net</li>
        <li>WWW.wpfui.com</li>
        <li>AYJS.net</li>
        <li>WPFUI.com</li>
    </ul>
    <span>ay的css1</span>
    <div>
        <span>ay的css2</span>
    </div>

</body>

</html>

ay的css2上级是div，它下面只有span一个节点，符合唯一子节点的条件

奇数行应用

li:nth-child(odd){
            background-color: gray;
        }

偶数行应用

      li:nth-child(even){
            background-color:lightblue;
        }

倒数奇数行

  li:nth-last-child(odd){
            background-color: rgb(160, 210, 243);
        }

倒数偶数行

       li:nth-last-child(even){
            background-color:peru;
        }

上方再增加一个li

正数 :nth-child(xn+y)

       li:nth-child(3n+1){
            background-color: rgb(160, 210, 243);
        }

当n=0时，表示 3n+1等于1

当n=1时，表示 3n+1等于4

当n=2时，表示 3n+1等于7

倒数 nth-last-child(xn+y)

     li:nth-last-child(3n+2){
            background-color:peru;
        }

当n=0时，表示 3n+2等于2

当n=1时，表示 3n+2等于5

当n=2时，表示 3n+2等于8

...

示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style type="text/css">
        li:nth-child(3n+1){
            background-color: rgb(160, 210, 243);
        }
        li:nth-last-child(3n+2){
            background-color:peru;
        }
    </style>
</head>

<body>
    <ol>
        <li>www.baidu.com1</li>
        <li>www.ayjs.net2</li>
        <li>www.wpfui.com3</li>
        <li>ayjs.net4</li>
        <li>wpfui.com5</li>
        <li>www.bbs.com6</li>
        <li>www.bbs2.com7</li>
        <li>www.bbs3.com8</li>
        <li>WWW.baidu.com9</li>
        <li>WWW.ayjs.net10</li>
        <li>WWW.wpfui.com11</li>
        <li>AYJS.net12</li>
        <li>WPFUI.com13</li>
    </ol>


</body>

</html>

下面的5个和上面 5个的区别，是在他的父元素，下面，没必要第一个是就是指定类型的。

:first-of-type

如果是 :first-child 由于p的上级是body，然后第一个元素div，最近的一个p是第二个元素，所以不生效

换成

p:first-of-type

:last-of-type

:nth-of-type 正数第N个

 p:nth-of-type(2) {
            background: rgb(124, 124, 233);
        }

第二个p节点

:nth-last-of-type 倒数第N个

:only-of-type

增加一个only的p

<div>
    <p id="d3">测试only p</p>
</div>

样式

  p:only-of-type{
            color: rgb(210, 233, 8);
        }

修改div，保证只有一个p，但是它的父元素不止它一个子元素，有3个，此时 only-of-type就有用处了

only-child无效的

<div>
    <div>only p的上部</div>
    <p id="d3">测试only p</p>
    <div>only p的下部</div>
</div>

测试跨越性的p

<body>
   <div>www.ayjs.net</div>
   <p>www.baidu.com</p>
   <p>www.wpfui.com</p>
   <p>测试</p>
   <p>测试22</p>
   <div>www.ayjs.net</div>
   <p>www.baidu.com2</p>
   <p>www.baidu.com3</p>
   <hr/>
   <div>
       <div id="ayjs">ayjs.net1</div>
       <div id="wpf">ayjs.net2</div>
       <p>www.baidu.com</p>
       <p>www.wpfui.com</p>
       <p id="ceshi">测试</p>
       <p id="ceshi22">测试22</p>
       <div>www.ayjs.net3</div>
   </div>
<div>
    <div>only p的上部</div>
    <p id="d3">测试only p</p>
    <div>only p的下部</div>
</div>
</body>

body下，连续4个p，然后加个div，然后2个p

按道理有6个p，测试css，第5个p的背景色换下，运行更没效果的

   p:nth-of-type(5) {
            background: rgb(124, 124, 233);
        }

得出结论，要连续的元素

同样的，奇数行，偶数行，正数kn+y，倒数kn+y,例子同上面

测试一个demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style type="text/css">
         /* p:first-child {
            border:1px solid lightcoral;
        } */
        p:first-of-type {
            border:1px solid lightcoral;
        }
        p:last-of-type {
            border:1px solid rgb(195, 50, 252);
        }
        p:nth-of-type(2n+1) {
            background: rgb(124, 124, 233);
        }
        p:nth-last-of-type(2) {
            background: rgb(124, 233, 182);
        }
        p:only-of-type{
            color: rgb(210, 233, 8);
        }
    </style>
</head>

<body>
   <div>[div]www.ayjs.net</div>
   <p>www.baidu.com</p>
   <p>www.wpfui.com</p>
   <p>测试</p>
   <p>测试22</p>
   <div>[div]www.ayjs.net</div>
   <p>www.baidu.com2</p>
   <p>www.baidu.com3</p>
   <p>www.baidu.com4</p>
   <hr/>
   <div>
       <div id="ayjs">ayjs.net1</div>
       <div id="wpf">ayjs.net2</div>
       <p>www.baidu.com</p>
       <p>www.wpfui.com</p>
       <p id="ceshi">测试</p>
       <p id="ceshi22">测试22</p>
       <div>www.ayjs.net3</div>
   </div>
<div>
    <div>only p的上部</div>
    <p id="d3">测试only p</p>
    <div>only p的下部</div>
</div>
</body>

</html>

得出结论：

先拿到父元素，然后拿到父元素下所有的p，不管中间还有啥元素。

然后，奇数还是偶数，还是正数kn+y，倒数kn+y计算，然后应用的。

:empty

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style type="text/css">
    :empty{
        height: 60px;
        border: 1px solid #0F0;
    }
    </style>
</head>

<body>
<img src="http://www.wpfui.com/abl/o_37.jpg" alt=""/>
<div></div>
<div> </div>
</body>

</html>

第3个div有个空格，非空，所以不应用样式

发现文本框

也会被应用。

查出空p的元素

 p:empty{
        height: 20px;
        border: 1px solid rgba(0, 255, 200, 0.726);
        background-color: gray;
    }

<p>文字</p>
<p></p>
<p>文字2</p>

:lang

表示元素的 lang="zh"的元素

    p:lang(zh){
        background-color: red;
    }

<p>文字</p>
<p></p>
<p lang="zh">文字2</p>

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

UI元素状态伪类选择器

前面的Selector我省略了。

---超链接的---

:link 未被访问前的元素

:visited 访问过的元素

:active 处于被用户激活（鼠标点击与释放之间的事件）状态的元素。

:hover 鼠标悬停的时候

---文本等---

:focus 获得了焦点时候

:read-only 只读状态的元素

:read-write 处于读写状态的元素

:selection当前被选中的内容

---验证---

:required 具有必填要求的元素

:optional 不具有必填要求的元素

:valid 输入通过校验的元素

:invalid 输入未通过校验的元素

:in-range 处于指定范围内的元素

:out-of-range 处于超出指定范围内的元素

---通用---

:enabled 当前状态可用的

:disabled 不可用状态的元素

---复选，单选---

:checked 选中状态的元素

:default 页面打开时候处于选中状态(当前没有被选中的也行)

:indeterminate 当前选中状态不明确的元素

比如，鼠标按下的input

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>active</title>

    <style type="text/css">
    input:active{
      background: blue;
    }
   
    </style>
</head>

<body>
<input type="text" width="120">
</body>

</html>

  <style type="text/css">
    input:active{
      background: blue;
    }
   input:focus{
    text-decoration:underline;
   }
    </style>

获得焦点时候，文本框文字，文字下面加一条横线

关于:read-write

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>active</title>

    <style type="text/css">
        input:active {
            background: blue;
        }

        input:focus {
            text-decoration: underline;
        }


        input:read-write {
            color: seagreen;
            font-size: 30px;
            height: 50px;
        }
        input:read-only {
            font-size: 30px;
            height: 50px;
            border: 1px solid purple;
        }

    </style>
</head>

<body>
    <input type="text" width="120">
    <br />
    <input readonly type="text" width="120">
    <br />
    <div contenteditable="true">
        测试ay，div
    </div>
</body>

</html>

这里还有个

:-moz-read-only

:-moz-read-write

前面-moz-表示基于Gecko内核的浏览器指定css样式

我测试in-range没效果

不考虑这个选择器，还有浏览器专属的选择器

-ms-开头的，IE浏览器的

-moz- 基于Gecko的

-webkit- 基于webkit的

-wap- 支持 wap的移动电话

微软office，可能使用 -mso-

::selection

文本选择的时候

 ::selection {
            background-color: #f00;
            color: #FFF;
        }

::-moz-selection

css3.0新增的 :target

必须命名锚点目标的元素

<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #f3d491;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

</body>
</html>

第一次显示

单击锚点，目标的元素，被赋予了:target指定的样式

css3.0新增的 :not

Selector1:not(Selector2)

例如下面的，所有p元素，但是p元素的id等于news3的除外

<!DOCTYPE html>
<html>
<head>
<style>
p:not(#news3){
    font-size: 30px;
}
</style>
</head>
<body>


<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
<p id="news3"><b>内容 3...</b></p>
<p id="news4"><b>内容 4...</b></p>
</body>
</html>

在脚本中修改显示样式

修改行内css属性值

obj.style.属性名=属性值

修改HTML元素的class属性值

obj.className=class选择器

例如：

document.body.style.backgroundColor="#FF0000";

document.getElementById("XXX").className="newcClassName";

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

推荐您阅读更多有关于“web前端，”的文章

上一篇：AY H5笔记8-css导入
下一篇：AY H5笔记10-字体和文本和服务端字体

猜你喜欢

额本文暂时没人评论来添加一个吧

发表评论取消回复

: 登录后台查看权限

: 抖音:wpfui 工作wpf,目前主maui

目前在合肥市中安创谷A1科大智联就职，5月底离职

AYUI8全源码 Github地址:前往获取

杨洋（AaronYang简称AY,安徽六安人）和AY交流

高中学历，2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费，源码可购买。部分DEMO不免费

不是从我处购买的ayui7源码，我不提供任何技术服务，如果你举报从哪里买的，我可以帮你转正为我的客户，并送demo
查看捐赠
AYUI7.X MVC教程更新如下：
第一课第二课程序加密教程

=======作品========
AYUI7.6表格体验
 AYUI7串口调试小demo
AYUI7百度网盘9.0
AYUI7.2.5.5 官方风格DEMO
AYUI7.2.5.5 医疗定制DEMO
AYUI7 响应式DEMO
AY小图形170803 DEMO8.0
【2017-6-12更新】QQ2017 2.0模仿
 海康监控WPF独立DEMO
QQ2017登陆多边形动画(独立)
AYUI4.2工具箱DEMO
QQ音乐12.64高仿
 打包安装与卸载作品
 监控作品
 【Github开源】LOL抽奖-魔法少女的星光水晶
 【Github开源】QQ音乐作品
 【Github开源】OA办公作品
 【Github开源】《AY酒吧聚光灯效果》
【Github开源】AYQQ管家2018
【Github开源】APS粒子模块
 【Github开源】QQ8.4 登录
 【Github开源】蜘蛛网效果

AY H5笔记9-css选择器,伪元素选择器,伪类选择器

元素选择器

属性选择器

ID选择器

class选择器

包含选择器

子级选择器

css3.0新增的兄弟选择器

选择器组合

伪元素选择器

内容相关的属性

插入图片

配合quotes，

实现前后插入，quotes的值，两个字符串用空格隔开

配合counter-increment添加编号

使用自定义编号，我们上面使用的是数字

伪类选择器

奇数行应用

偶数行应用

倒数奇数行

倒数偶数行

正数 :nth-child(xn+y)

倒数 nth-last-child(xn+y)

:first-of-type

:last-of-type

:nth-of-type 正数第N个

:nth-last-of-type 倒数第N个

:only-of-type

:empty

:lang

UI元素状态伪类选择器

::selection

css3.0新增的 :target

css3.0新增的 :not

在脚本中修改显示样式

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论 取消回复

额本文暂时没人评论来添加一个吧

发表评论取消回复