CSS选择器详解-优快云博客

原文在w3school:http://www.w3school.com.cn/css/index.asp
one:
——–基础教程:
之前经常用的印象比较深刻的就是id选择器，类选择器，派生选择器(子元素选择器，后代选择器，相邻兄弟选择器)，今天看到了属性选择器，发现竟然还可以这样子的。

id选择器：

css：
     #class{
        color:red;
        width:100px;
        height:100px;
    }
html:
    <div id="class1">这个是类选择器，在设置时前面是#</div>

类选择器：

css：
    .class2{
            width:100px;
            height:100px;
    }
html:
    <div class="class2">这个是类选择器，在设置时前面是.</div>

派生选择器：

css：
    div p{
        background:green;
        width:100px;
        height:100px;
    }
html:
    <body>
        <div>
            <p>第一行</P>
            <p>第二行</P>
        </div>
        <p>外一行</P>
    </body>
这边外一行就没有样式没有颜色

上面这个也可以叫后代选择器
子元素选择器：

css:
    h1>strong{
        color:red;
    }
html:
<h1>This is <strong>very</strong><strong>very</strong>important</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

结果（只会把第一个h1下的strong样式改变，而第二个不会）：
这里写图片描述
相邻兄弟选择器(用一个结合符只能选择两个相邻兄弟中的第二个元素)：

css:
    li+li{
        font-weight:bold;
        }
html:
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ol>

以上就是基础的三种选择器，现在我着重讲下我不理解的属性选择器。
属性选择器：

css:
    [title]{
        color:red
    }
html:
    <h1>可以应用样式：</h1>
    <h1 title="w3school">w3school</h1>
    <p title="hello">hello</P>
    <hr />
    <h1>无法应用样式：</h1>
    <h1>w3school</h1>
    <p>hello</P>

结果：

css:
    [title=w3school]{
        color:red;
    }
html:
    <h1>可以应用样式：</h1>
    <a title="W3School" href="http://w3school.com.cn">W3School</a>
    <hr />
    <h1>无法应用样式：</h1>
    <p title="greeting">Hi!</p>
    <a class="W3School" href="http://w3school.com.cn">W3School</a>

结果只有title= w3school才会改变样式的：
这里写图片描述

css:
    [title~=hello]{
    color:red;
    }
html:
    <h1>可以应用样式：</h1>
    <h2 title="hello world">Hello world</h2>
    <p title="student hello">Hello W3School students!</h1>
    <hr />
    <h1>无法应用样式：</h1>
    <h2 title="world">Hello world</h2>
    <p title="student">Hello W3School students!</p>

结果title=hello需要title中有hello整个单词的才会显示，这样子 s helloWold这样子是不算的：
这里写图片描述

css:
    [lang|=en]{
    color:red;
    }
html:
    <h1>可以应用样式：</h1>
    <p lang="en">Hello!</p>
    <p lang="en-us">Hi!</p>
    <hr />
    <h1>无法应用样式：</h1>
    <p lang="us">Hi!</p>
    <p lang="zh">Hao!</p>
    <p lang="us-en">Hi!</p>

结果当lang=en只有当en为开头元素的才能应用该样式：
这里写图片描述

css:
    input[type="text"]{
        width:100px;
        display:block;
        margin-bottom:10px;
        background-color:yellow;
        font-family: Verdana, Arial;
    }
    input[type="button"]{
         width:100px;
         margin-left:35px;
         display:block;
         font-family: Verdana, Arial
    }
html:
    <input type="text" name="Name" value="Bill" size="20">
    <input type="text" name="Name" value="Gates" size="20">
    <input type="button" value="Example Button">