当前位置:网站首页 / web前端 / 正文

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

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

元素选择器

    *{
        border: 1px solid #F00;
    }

image.png

就是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>

image.png


属性选择器

下面以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;

}


使用

<div class="ayclass"></div>


====================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>

image.png

: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>

image.png


: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>

image.png

继续增加一个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>

image.png

写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>

image.png




内容相关的属性

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

image.png


选择器插入

下面是 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>

image.png



配合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>

image.png




配合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>

image.png


再复杂点,二级编号

<!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>

image.png

数字项目模板 Section 计数 .

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


修改代码,每次递增3

image.png


image.png


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

修改这里的值

image.png


image.png

值的列表

 decimal:数字,默认

disc实心圈

circle:空心圈

square:实心方块

lower-roman:小写罗马数字

upper-roman:大写罗马数字

其他的如下

 lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin


====================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>

image.png



必须是第一个元素,如果第一个是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>

image.png

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




:last-child

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

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

image.png



 :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>


image.png

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



奇数行应用

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


image.png

偶数行应用

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

image.png



倒数奇数行

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

倒数偶数行

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

image.png

image.png

上方再增加一个li

image.png

正数 :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

image.png

倒数 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

...

image.png


示例代码:

<!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是第二个元素,所以不生效

image.png

换成

p:first-of-type 

image.png

:last-of-type

image.png


:nth-of-type 正数第N个

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

第二个p节点

image.png

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

image.png


:only-of-type

增加一个only的p

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

样式

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

image.png


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

only-child无效的

image.png

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

image.png

image.png


测试跨越性的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>

image.png

得出结论:

 先拿到父元素,然后拿到父元素下所有的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>

image.png

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


发现文本框

<input type="text" name="username" id="username"/>

<input type="text" name="username1" id="username1" value="ay"/>

image.png

也会被应用。


查出空p的元素

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

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


image.png



:lang

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

    p:lang(zh){
        background-color: red;
    }
<p>文字</p>
<p></p>
<p lang="zh">文字2</p>

image.png

====================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>

image.png

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

image.png

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



关于: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>

image.png

这里还有个

:-moz-read-only

:-moz-read-write

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


我测试in-range没效果

image.png





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

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

-moz- 基于Gecko的

-webkit- 基于webkit的

-wap- 支持 wap的移动电话

微软office,可能使用 -mso-


::selection

文本选择的时候

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

image.pngimage.png

::-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>

第一次显示

image.png

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

image.png



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>

image.png




在脚本中修改显示样式

修改行内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前端,”的文章

猜你喜欢

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

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表