02selector2

CSS选择符

[toc]

css选择符：

(8)属性选择符

根据标签属性进行选择 （拓展知识）

• .one[abc] 是否具有abc属性

  <div class="one" abc=""></div>
  .oen[abc]{
      /* 是否具有abc属性 */
      background-color:yello;
  }
  
  

• .one[abc="aa"] 是否具有abc属性而且值是aa

  <div class="one" abc="aa"></div>
  .oen[abc="aa"]{
      background-color:yello;
  }
  

• .one[aaa~="one"] 有aaa属性并且one是aaa值中空格的一个,也可以值是one

  <div class="one" aaa="one two three" bbb="abc 
  defg">222222</div>
  .ond[aaa~="one"]{   
      有属性aaa 而且值one或者 这样也行one two
      color:blue;
  }
  

• .one[bbb^="one"] 有bbb属性并且值是以one开头

• .one[ccc$="one"] 有ccc属性并且值是以one结尾

• .one[ddd*="one"] 有ddd属性并且值包含连续在一起的one

• .one[eee|="one"] 有eee属性并且值是以 one- 开头的

(9)伪对象选择符

使用两个冒号的 和伪类选择符的一个冒号区分开 （挺重要的）

1.first-latter

设置第一个字符的样式

<p>我大范德萨富士达我的大范德萨发大水佛但是 </p>
p::first-latter{
	font-size:20px;
	color:red;
}

(2).first-line

设置第一行的样式 和第一个差不多

(3). before

在选择符之前设置内容

<p>
    dafsdofjdsafdslkafodsaf
</p>
<style>
  	p::before{
		content:"随便输入的"
	}
</style>

(4).after

在选择符之后设置内容 和上个兄弟一样

(5).placeholder

给placeholder提示的文本设置样式

我们还记得input的placeholder属性么，提示信息，这个选择符就可以给他设置样式
<input type="text" name="" placeholder="用户名">

<style>
    input::placeholder{
        color:red;
        font-size:20px;
    }
</style>

(6).selection

给选中的文本设置样式 -- 鼠标选中的文字

<p>
    dasfdsafdsf选择复制我 
</p>
<style>
    p::selection{
        /* 鼠标选中的文字会有的样式 */
        background-color:blue;
        color:green;
    }
</style>