css - 选择器

css - 选择器

 css选择器用于选择html元素，为其设置css样式。选择器不会选择纯文本，只选择html元素

ID选择器

html标签的唯一编号由id属性指定，通过使用id的形式可以选择指定的元素对象，慎用id选择器，因为css不会检测id的唯一性，一个页面上有多个相同id的元素，css同样会为它们应用样式

 #box { background: red; }
 <div id="box">sdiv>

类选择器

html标签的类名由class属性指定。可以为一个html标签指定多个class类名，每个类名以空格隔开即可。

.box { background: red; }
<div class="box">sdiv>

当一个元素被相同的选择器选中一次以上时，按样式表的先后顺序，后面的样式会覆盖前面的样式。在class属性中，即便把c2放在c1前面，最终结果还是以css样式表的先后顺序进行覆盖，所以以下该元素的字体颜色为blue

 .c1 {color: red;}
 .c2 {color: blue;}

<div class="c1 c2">xxdiv>

标签选择器

即使用html标签作为选择对象

div { background: red; }
<div>sdiv>

通配符选择器 

使用*号可以选择所有Html元素，也可以搭配其他选择器实现选择某个元素所包含的所有元素，如

div *{ font-size:50px; }
<div>
    Astor Piazzolla //此纯文本不会应用100px的字号
    <p> Inamu Discosp>
div>

子代选择器

选择自身所包含的直接（第一层）子元素

 //选择id为box的元素中的所有为p的子元素
 #box>p{ font-size:200px; }
<div id="box">
    <p>sp> 
    <div><p>sp> div>    
div>

后代选择器 

选择器 空格 选择器，表示选择某后代元素

//选择id为box的元素中的所有为p的后代元素
#box p{ font-size:200px; }
<div id="box">
    s
    <p>sp> 
    <div>sdiv> 
    <p>sp> 
div>

兄弟选择器

啊啊选择紧靠h1后面的那一个p元素
 h1 + p { margin-top:50px; }
<h1>Libertangoh1>
<p> Tropicalp>

交集选择器

交集选择器是指开头一个选择器必须是标签选择器，其后不能有空格，紧随其后书写类选择器或ID选择器。用于选择某一个元素

//选择类名为test的div元素
div.test {color: red;}
<div class="test">divdiv>
<p class="test">pp>

并集选择器

每个选择器用逗号隔开。用于选择多个元素

//多个选择器用逗号隔开，表示选择多个元素
#div,.box{ color:red; }
<div id="div">divdiv>
<p class="box">pp>

属性选择器

//选择带class属性的div
div[class] {
    width: 100px;
    height: 100px;
    background: #ff0000;
}

<div myProperty="sam" > div >

//选择带自定义属性且值为sam的div
 div[myProperty="sam"] {
     width: 100px;
     height: 100px;
     background: #ff0000;
 }
 //选择某html属性的值以t开头的xx元素
 input[value^="t"]
 //选择某html属性的值以t结尾的xx元素
 input[value$="t"]
 //选择某html属性的值包含子字符串in的xx元素
 input[value*="in"]
 //选择某html属性的值以s-开头或等于s的xx元素
 input[value|="s"] 

伪类选择器

以冒号开始的就是伪类选择器，伪类即不存在的类名。伪类：通过css预设计的不存在的类名选择具有指定特性的元素，而元素实际上并不具有该类名。

超链接伪类

//没有被点击过的链接
:link
//被点击过的链接
:visited

//具有输入功能的元素、通过tab键可以切换的html元素获得焦点时

:focus

//元素被鼠标划过时

:hover
//元素被点击时
:active 

如果需要为a元素设置这五种伪类的样式，推荐顺序为link visted focus hover active，如果你改变这种顺序，可能导致hover、active等无效，因为后面的样式可能会覆盖前面的样式。

使用伪类时要注意空格，空格表示的是后代

//div被划过时的样式
div:hover {
    border: 1px solid #000;
}

//div的后代元素被划过时的样式
div :hover {
    border: 1px solid #000;
}

//div被划过时它的后代为span元素的样式
div:hover span {
    border: 1px solid #000;
}

语言伪类

选择某个具有lang属性（lang是一个html属性）的元素，该元素的lang的值必须以某个值-开头或等于某值的元素，参考：，可以利用这个伪类达到和属性选择器：|号完全一样的选择效果，也即为元素设置lang属性，但不一定非得是指向某种语言，任意设置lang属性依然可以通过lang伪类来选择你需要的元素，以下两个元素都会被选中

div:lang(x) { color: red; }

<div lang="x" > lldiv >
<div lang="x-s" > ffdiv >

列表伪类

此处不一定是指ul列表，所有具有嵌套关系的元素都类似于列表，可以使用列表伪类。

//选择ul里的li，得到第一个子li
 ul li:first-child{
     background: #ff6a00;
 }

//选择ul里的li，得到最后一个子li
 ul li:last-child{
     background: #ff6a00;
 }

//选择顺序为偶数的元素
//n：会自动从0开始自增，每次增1的数字。2n=2*0、2n=2*1、2n=2*2……
ul li:nth-child(2n) {
    background: #ff6a00;
}

//选择顺序为偶的元素，该偶数从4开始，如果要选择序列从2开始的元素，则是2n+2即可
ul li:nth-child(2n+4) {
    background: #ff6a00;
}

//选择顺序为奇数的元素，该奇数从1开始
ul li:nth-child(2n+1) {
    background: #ff6a00;
}

//选择顺序为偶数的元素
ul li:nth-child(even) {
    background: #ff6a00;
}

//选择顺序为奇数的元素
ul li:nth-child(odd) {
    background: #ff6a00;
}

伪元素选择器

以两个冒号开始的就是伪元素选择器。伪元素即不存在的元素，伪元素：通过css预置的不存在的元素为普通选择器所选择的元素指定特殊效果。所以，使用伪元素选择器时，需要先使用其它选择器选择某个在html文档上存在的元素，然后在这个选择器的末尾指定伪元素为该元素设置特殊效果。伪元素选择器必须放在一组选择器的最后面，否则会无效。伪类是选择具有指定特殊行为、特殊样式的元素，而伪元素是为某个元素设定特殊效果。

::before | ::after 插入新元素并选择该元素

表示在div里动态插入一个行内子元素并可以设置其样式，由于它是一个伪元素，所以它在html文档上只显示为::before或::after。它们主要的作用是清除浮动或用来放字体图标，这样可以避免在父元素内插入无意义的html标签

div::before {
    content: "你";
    background: red;
    display: block;
    width: 100px;
    height: 100px;
}

::first-letter 选择作为首字符的元素

字符不是元素，但如果你向选择某段文本中的首个字符，那么你可以使用此伪元素来选择首个字符

::first-letter只能应用于：块（block）、行内块（inline-block）、table-cell（单元格行内块）、list-item（列表块元素）可以记为：块、li、td，如果你用这个伪元素选中父元素包含的某个字符，那么就算该字符包含在某个被定义为任何显示模式的子元素下，该字符依然会被选中。所以，::first-letter只看父元素的显示模式，与子元素无关

::first-letter对以下字符无效，但如果以下字符后面是正常字符，则first-letter会选中以下字符+第一个正常字符

· @ # % & * ( ) （ ） [ ] { } 【 】 : " “ ” ; ； 》 ' ‘ ’ 《 , . 。 ？ ? ! ！ … * 、 / \ 。

此伪元素比较麻烦，如果有字符被选它选中，那么在选中后的样式里，很多css样式不能使用，只能应用一些字体相关属性。

::first-line 选择作为首行的所有字符

如果你需要选择某一行纯文本，可以使用这个伪元素来选择它们，一行上不是字符的空间不会被选中。与::first-letter一样的是这个选择器只能选择：块（block）、行内块（inline-block）、table-cell（单元格行内块）、list-item（列表块元素），与::first-letter不一样的是可以选择特殊字符。

 

 

 

css + html学习总目录 

转载于:https://www.cnblogs.com/myrocknroll/p/11599187.html