css3（二）选择器

基本选择器

标签选择器
HTML标签作为标签选择器的名称
语法

<style type="text/css">
    p{
        color:red;
    }
</style>
<body>
    <p>内容</p>
</body>

类选择器

<style type="text/css">
    .name{
        color:red;
    }
</style>
<标签名 class= "类名称">标签内容</标签名>
<p class="name">内容</p>

ID选择器

<style type="text/css">
    #name{
        color:red;
    }
</style>
<标签名 id= "id名称">标签内容</标签名>
<p id="name">内容</p>

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

基本选择器的优先级
ID选择器>类选择器>标签选择器

高级选择器

关系选择器（层次选择器）
E , F：多元素选择器（并集选择器）
E F：后代选择器
E > F：子元素选择器
E + F：相邻元素选择器（兄弟）匹配所有紧随E元素之后的同级元素F
E ~ F：同级元素通用选择器匹配任何在E元素之后的同级F元素

<style type="text/css">
    li,p{color:red;}
    ul li{color:red;}
    ul>li{color:red;}
    li+p{color:red;}
    li~p{color:red;}
</style>
<body>
    <ul>
        <li>1</li>
        <p>2</p>
        <li>3</li>
    </ul>
</body>

属性选择器
E[属性]：匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”，以下同。）
E[att=val]：选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[att~=val]：匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
E[att|=val]：匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val-”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等
E[att^=”val”]：属性att的值以”val”开头的元素
E[attr$=val]：属性att的值以”val”结尾的元素
E[att*=”val”]：属性att的值包含”val”字符串的元素

<style type="text/css">
    li[class]{color:red;}
    li[class=name]{color:red;}
    li[class~=name]{color:red;}
    p[class="name-user"]{color:red;}
    li[class^='n']{color:red;}
    li[class$='e']{color:red;}
    li[class*='m']{color:red;}
</style>
<body>
    <ul>
        <li class="name user">1</li>
        <p class="name-user">2</p>
        <li>3</li>
    </ul>
</body>

伪类选择
伪类选择器是CSS中已经定义好的选择器，不能随便取名，常用的伪类选择器是使用在a元素上的几种，
a:link：未单击访问时超链接样式
a:visited：单击访问后超链接样式
a:hover：鼠标悬浮其上的超链接样式
a:active：鼠标单击未释放的超链接样式

//鼠标滑过li时显示p元素
<style type="text/css">
    li:hover+p{display:block;}
    p{display:none;}
</style>
<body>
    <ul>
        <li>1</li>
        <p>2</p>
    </ul>
</body>

display：属性规定元素应显示的类型。常用的有block（块级元素）inline（行内元素，不可以设置宽高）inline-block（行内块元素，可以设置宽高）none（此元素不会被显示）

伪元素选择器
伪元素选择器并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，CSS中有如下四种伪元素选择器
first-line：用于选取指定选择器的首行
first-letter：用于选取指定选择器的首字母
before：在被选元素的内容的前面插入内容
after：在被选元素的内容的后面插入内容

p:first-line{ color:#ff0000;}
li:after{ content: url(dot.png);}

content：属性来指定要插入的内容（图片、图标路径）

结构性伪类选择器
E:root：将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的html部分
E:not：想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用not样式如：ul li:not(.two)
E:empty：指定当元素内容为空白时使用的样式
E:first-child：对一个父元素中的第一个子元素指定样式
E:last-child：对一个父元素中的最后一个子元素指定样式
E:nth-child()：对指定序号的子元素设置样式(正数)
E:nth-child(odd)：所有正数下来第奇数个子元素
E:nth-child(even)：所有正数下来第偶数个子元素
E:nth-last-child(n)：对指定序号的子元素设置样式(倒数)
E:nth-last-child(odd)：所有倒数上去第奇数个子元素
E:nth-last-child(even)：所有倒数上去第偶数个子元素
E:nth-of-type(n)：与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)：与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:nth-child(an+b)：a表示每次循环中共包括几张样式；b表示指定的样式在循环中所在的位置；循环使用样式(注意a后面必须加n)
E:only-child：匹配父元素下仅有的一个子元素等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type：匹配父元素下使用同种标签的唯一一个子元素等同于: first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:enabled：匹配表单中激活的元素
E:disabled：匹配表单中禁用的元素
E:checked：匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
E::selection：匹配用户当前选中的元素

猜你喜欢