`

CSS不为人知的选择器

    博客分类:
  • CSS
阅读更多

在CSS中,选择器是一种模式,用于选择需要添加样式的元素

1.类选择器 .class

 

 .mydiv{
	background-color:yellow;
  }
  <div class="mydiv">内容</div>

 

 

2.id选择器 #id

 

  #myid{
	font-size:150%;
	color:red;  //设置字体的颜色
  }
  <div id="myid">内容</div>

 

3.element选择器 p 

 

  p{     //选取所有的p标签
    font-size:150%;
  } 
  <p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature</p>

 4.*选择器 

 

 

  *{    //选择所有的元素
	background-color:yellow;
  }	
  div *{   //选取<div>元素内部的所有元素
	background-color:red;
  }

 5.组合选择器  

 

div,p {}  //选择所有<div>元素和所有<p>元素

div p{}//选择<div>元素内部的所有<p>元素

div>p{}//选择父元素为<div>元素的所有<p>元素

div+p{}//选择紧接在<div>元素之后的所有<p>元素

6.属性选择器

  [attribute] 用于选取带有指定属性的元素

 eg:

 

  [target]{ background-color:yellow;}
	  <=>  a[target]{background-color:yellow;}  //a与[target]之间不能加空格
	  <a href="http://www.baidu.com" target="_blank">百度</a>

 

 

  [attribute=value] 用于选取带有指定属性和值的元素

eg:

 

a[target=_blank] { background-color:yellow;}
	//为target="_blank"的<a>元素设置样式

 

  [attribute~=value] 用于选取属性值中包含指定词汇的元素

eg:

 

[title~=flower]{ background-color:yellow;}
	//选择title属性包含单词"flower"的元素,value值必须是整个单词

 

  [attribute|=value] 用于选取带有以指定值开头的属性值的元素

eg:

 

[class|=top]{ background-color:yellow;}
	<div class="top">Welcome</div>    
	<div class="top-text">Hello world!!</div>  
	<div class="toptext">My name is jerry!</div>
	<!-- 前两个样式会改变,第三个样式不会改变 -->

 

注:value值必须是整个单词,如class="top",或者后面跟着连字符,如class="top-text"

7.链接动态选择器

  :link 用于选取未被访问的链接

  :visited  用于选取已访问的链接

  :active 用于选择活动链接

  :hover 用于选择鼠标指针浮动在上面的元素,可用于所有元素,不只是链接

eg:

 

a:link    {color:blue;}
a:visited {color:blue;}
a:active  {color:yellow;}
a:hover   {color:red;}

 8.:focus 选择器 用于选取获得焦点的元素

 

eg:

 

input:focus{ background-color:yellow;} //选择获得焦点的input元素

 9.:first-letter选择器   用于选取指定选择器的首字母

  eg:

 <style> 
	#fd:first-letter{     //id选择器与:first-letter之间没有空格
		color:red;
		font-size:200%;
	}
  </style>
  <div id="fd">Hello,world!</div>   
  <!-- 首字母(中文是第一个汉字)会变红并且字体会变大,其余字母样式不变 -->

 10.:first-line  用于选取指定选择器的首行

  eg:

 <style>
	.p:first-line{
		background-color:red;
		font-size:150%;
	}
  </style>
  <div class="p">
	To stop the degradation of the planet's natural environment and to build a future in which humans
	live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use
	of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.
  </div>
  <!-- 只选择在显示时出现的一行字符,缩放浏览器会使选择的字符不一样 -->

11.:first-child  用于选取属于其父元素的首个子元素的指定选择器

eg:

p:first-child i{background:yellow;}

 

//选择每个<p>中的每个<i>元素并设置其样式,其中<p>元素是其父元素的第一个子元素

12.插入选择器

  :before  选择器在被选元素的内容前面插入内容,可以使用content属性来指定要插入的内容

  :after   选择器在被选元素的内容后面插入内容,可以使用content属性来指定要插入的内容

eg:

p:before{ content:"台词:-";color:red;}
p:after{content:"--end";font-size:80%;}

 

13.:lang选择器 用于选取带有以指定值开头的lang属性的元素

p:lang(en){background:yellow;}

 

注:该值必须是整个单词,即可是单独的,比如 lang="en",也可后跟连接符,比如 lang="en-us"

14.element1~element2选择器  选择element1之后出现的所有element2

element1和element2必须拥有同一个父元素

eg:

p~ul{background:#ff0000;}
	
	<p>This is the first paragh!</p>
	<h4>这是第一段<h4>
	<ul>
		<li>咖啡</li>
		<li>牛奶</li>
	</ul>
	<div>
		<ul>
			<li>红茶</li>
			<li>绿茶</li>
		</ul>
	</div>
	<!-- 第一段ul的背景是红色, 第二段ul没有样式-->

 

注:两个元素必须拥有相同的父元素,但是element2不必直接紧随element1

 

  

 注意:

  选择器之间什么时候加空格,什么时候不加?

当多个选择器表示在同一个元素时,之间不需要加空格;当表示不同的元素时之间需要加空格。

eg:

#div .dd{font-size:150%;}   //“#div”代表的是<div>元素,“.dd”代表的是<p>元素,之间需要加空格
	p#pp.dd{color:red;}  //"p","#pp",".dd"都表示<p>元素,之间不需要加空格
	
	<div id="div" class="mydiv">
		<p id="pp" class="dd">To stop the degradation of the planet's natural environment</p>
	</div>

 

 

分享到:
评论

相关推荐

    CSS揭秘CSS.rar

    《CSS揭秘》是一本深入探讨CSS技术的权威书籍,它以独特的视角揭示了许多不为人知的CSS技巧和高级用法。这本书旨在帮助开发者们更好地掌握CSS,提升网页设计与开发的技能水平。配合这本书的代码文档,我们可以进行...

    css reference

    在这个压缩包中包含的《OReilly.CSS.Secrets.2015.6.pdf》很可能是O'Reilly出版社的一本CSS高级指南,揭示了CSS的一些不为人知的技巧和最佳实践。 CSS涵盖了许多方面,包括但不限于: 1. **选择器**:CSS的选择器...

    10个你未必知道的CSS技巧

    在CSS世界里,隐藏着许多不为人知但极具实用性的技巧。这些技巧能帮助开发者们更高效、更有创意地设计网页。以下就是10个你可能还不了解的CSS技巧,让我们一起深入探索: 1. **伪类选择器的创新用法** CSS中的伪类...

    告诉你6个不为人知的用esc键来提高操作速度

    例如,在资源管理器中误选了多个文件,或是在图形编辑软件中不小心选择了错误的图层,ESC键都能迅速帮你恢复正常状态。 总之,ESC键远不止是一个简单的“退出”键,掌握以上六种使用技巧,可以帮助你在日常的电脑...

    the-css-that-you-dont-know-about:你不知道的 CSS

    在CSS的世界里,隐藏着许多不为人知但极具实用性的技巧和特性。这些"你不知道的 CSS"知识点,能够帮助开发者提升工作效率,创造出更具表现力和功能性的网页设计。以下是一些可能涵盖在《你不知道的 CSS》系列文章中...

    CSS改变网页中鼠标选中文字背景颜色例子

    总的来说,通过这个例子,我们可以了解到CSS不仅能够帮助我们美化网页,还能够通过一些不太为人所知的特性来增加网页的互动性和美观度。这些看似微不足道的功能在提升用户体验方面扮演着重要的角色。随着CSS技术的...

    250个HTML和Web设计的秘密(PDF

    这本书深入探讨了HTML(超文本标记语言)和Web设计的基础知识,以及许多不为人知的技巧和最佳实践,旨在帮助读者提升网站构建和设计的专业水平。 HTML,全称为HyperText Markup Language,是创建网页的标准标记语言...

    hermittrivia:隐士Trivia测验

    从标题和描述来看,我们可以推测这款测验旨在挑战用户的广泛知识,尤其是那些不太为人所知的“隐士”类知识,可能是关于隐居生活、不为人知的历史人物或者鲜为人知的事实。 在开发这样的应用时,HTML(HyperText ...

    firebug的一个有趣现象介绍

    然而,正如标题所指出的,“firebug的一个有趣现象介绍”揭示了一个不那么为人知的特性,即当一个对象同时具有`length`属性和`splice`方法时,Firebug会在控制台中将其表现为数组形式。尽管这个对象并非真正的数组,...

    Insider:内幕网页

    "Insider:内幕网页"这个主题将深入探讨HTML的一些核心概念、最佳实践以及不为人知的技巧,帮助我们更深入地理解这一强大的标记语言。 1. **HTML基础知识**:HTML由一系列元素组成,每个元素都有其特定的标签,如`...

    0rakul0_Voice:不和谐插件

    即使这项技术已经为人所知,离开当前页面只是为了去谷歌翻译,写文本,说话然后回到你所在的页面,需要一些时间,有时可能会带来压力。 那么为什么不把它变成一个直接的资源呢? 这个插件允许当你的屏幕被共享时...

    d3.js中冷门却实用的内置函数总结

    在JavaScript的可视化库d3.js中,有一些内置的函数虽然不太为人所知,但它们却在实际开发中具有很高的实用性。下面将详细讲解这些冷门却实用的函数,帮助开发者更好地利用d3.js进行数据可视化。 1. `selection....

Global site tag (gtag.js) - Google Analytics