CSS3 高级选择器

最新推荐文章于 2024-03-06 17:08:15 发布
最新推荐文章于 2024-03-06 17:08:15 发布
阅读量992 收藏 4
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hlx20080808/article/details/86307287
版权

高级选择器：

   1>层次选择器

   2>结构伪类选择器

   3>属性选择器

详细介绍这几个选择器：

 层次选择器

  

 页面：

<body>
		<!--格式化代码：ctrl+shift+F-->
		<h2>兄弟</h2>
		<p>1</p>
		<!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>张三</p>
			</li>
			<li>
				<p>李四</p>
			</li>
			<li>
				<p>王五</p>
			</li>
		</ul>
	</body>
/*后代选择器:孩子的孩子...*/
body p{
	 /*border: 1px solid red;*/
}

/*子选择器:body的孩子*/
body>p{
	/*border: 1px solid blue;*/
}

/*相邻兄弟选择器:比较近的兄弟*/
h2+p{
	/*border: 2px solid yellowgreen;*/
}


/*通用兄弟选择器:找到p远近兄弟*/
h2~p{
	border: 5px solid chocolate;
}

效果：

结构伪类选择器

页面：

<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>张三0</p>
			</li>
			<li>
				<p>李四1</p>
			</li>
			<li>
				<p>王五2</p>
			</li>
			<li>
				<p>熊大3</p>
			</li>
		</ul>
	</body>
/*E:first-child :找父的第一个孩子 */

/*注意:不能用body作为父*/
li:first-child{
	border: 2px solid darkcyan;
}

/*E:first-child :找父的最后一个孩子 */

li:last-child{
	border: 2px solid brown;
}

/*E F:nth-child(n): 找到父的孩子第几个
   odd:奇数 ,even:偶数（从1开始数）
 */
/*ul li:nth-child(odd){*/
ul li:nth-child(3){
	/*background-color: coral;*/
}

/*E:first-of-type:父级的第一个元素*/
li:first-of-type{
	background: cornflowerblue;
}

/*E:last-of-type:父级的最后一个元素*/
li:last-of-type{
	background: chartreuse;
}

/*E F:nth-of-type(n):找到子孩子的第几个*/
ul li:nth-of-type(2){
	border: 10px double darkgrey;
}

/*E F:nth-last-of-type(n):子孩子中的倒数第1个同级兄弟*/
li:nth-last-of-type(1){
	border: 5px double red;
}

效果：

属性选择器

页面：

<body>
		<a href="http://www.baidu.com" id="first">1</a>
		<a href="#" title="test website" target="_blank">2</a>
		<a href="sites/file/test.html">3</a>
		<a href="sites/file/test.png" class="links item"> 4</a>
		<a href="sites/file/image.jpg">5</a>
		<a href="efc" title="website link">6</a>
		<a href="/a.pdf">7</a>
		<a href="/abc.pdf">8</a>
		<a href="abcdef.doc">9</a>
		<a href="abd.doc" id="last">10</a>

	</body>
a{
	width: 60px;
	height: 60px;
	border: 0px solid red;
	background: gainsboro;
	display: block;  /*行级转换成块级*/
	float: left;   /*浮动*/
	margin: 5px 10px;  /*外边距*/
	border-radius: 20%;  /* 圆角  */
	text-align: center;  /*水平文本居中*/
	line-height: 55px;  /*垂直居中*/
	font-weight: bolder; /*字体加粗*/
	text-decoration: none; /*去掉下划线*/
	color:black;  /*字体颜色*/
}


/*E[attr]: E标签的属性id*/
a[id]{
	background: mediumaquamarine;
}

/*E[attr=val]:E标签的属性href=#*/
a[href='#']{
	background: chocolate;
}


/*E[attr^=val]:E标签的属性href的值以s开头*/
a[href^='s']{
	background: yellowgreen;
}

/*E[attr$=val]:E标签的属性href的值以f结尾*/
a[href$='f']{
	background: blueviolet;
}

/*E[attr*=val]:E标签的属性href的值包含f所有的*/
a[href*='f']{
	background:coral;
}

效果：

凌冰_
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3高级选择器使用方法
09-25
CSS3高级选择器是CSS3新增的一系列功能强大的选择器，极大地增强了CSS的样式匹配能力，使得开发者能够更精准地定位和控制网页元素的样式。本文将深入探讨CSS3的属性选择器、结构性伪类选择器以及伪元素选择器。 ...
CSS的高级选择器
JJ_Smilewang的博客
03-24 2760
1.什么是高级选择器 在 CSS 中，可以根据选择器的类型，把选择器分为基础选择器和高级选择器（又称为复合选择器），高级选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 ①高级选择器可以更准确、更高效的选择目标元素（标签） ②高级选择器是由两个或多个基础选择器，通过不同的方式组合而成的 ③常用的高级选择器包括：层次选择器、属性选择器、伪类选择器等等，本文主要介绍层次选择器和属性选择器。 2.层次选择器 层次选择器里包含：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器和并集选择..
css3高级选择器
qi341500的博客
07-02 1128
一、层次选择器 1、后代选择器 2、子选择器 3、相邻兄弟选择器 4、通用兄弟选择器 5、并集选择器 二、结构伪类选择器 三、属性选择器 四、链接伪类选择器
最高选择器是哪个html,css有哪些高阶选择器？
weixin_29237635的博客
06-03 198
css高级选择器有：后代选择器(定义的时候用空格隔开)、交集选择器、并集选择器(定义的时候用逗号隔开)、伪类选择器。css高阶选择器介绍：1、后代选择器: 定义的时候用空格隔开对于E F这种格式，表示所有属于E元素后代的F元素，有这个样式。空格就表示后代。后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。后代选择器，描述的是祖先结构。示例：...
CSS3高级选择器
weixin_68485297的博客
03-31 794
一、新增全局属性 1、contenteditable 规定是否允许用户再编辑内容 2、hidden 对元素进行隐藏 （规定对元素进行隐藏hidden和input：hidden本质上还是利用display：none来实现） 二、CSS3高级选择器 1、first-of-type 选择属性其父元素的首个元素 2、last-of-type 选择属性其父元素的最后一个元素 以下面的小练习 ...
让IE可以变相支持CSS3选择器
09-25
别误会，IE是不支持CSS3高级选择器，包括最新的IE8（详见《CSS选择器的浏览器支持》），但是CSS选择器的确是很有用的，它可以大大的简化我们的工作，提高我们的代码效率，并让我们很方便的制作高可维护性的页面。
让IE8以下兼容HTML5标签和CSS3高级选择器
10-20
ie8以下兼容HTML5和css3高级选择器
详解css常用选择器
09-27
CSS选择器是CSS样式语言的核心组成部分，用于选取页面上的HTML或XML元素，进而应用...对于更复杂的布局和设计，还可以探索更高级的选择器，如`:not()`, `:nth-of-type()`, `:matches()`, 以及CSS4引入的更多新特性。
CSS的基本选择器及高级选择器（附详细示例以及效果图）
Jin_Xiang123的博客
12-13 3026
CSS的基本选择器及高级选择器（附详细示例以及效果图） 层次选择器是CSS中一种常见的选择器，用于选择具有特定层次关系的元素。通过层次选择器，可以选择父元素、子元素、兄弟元素等。 常见的层次选择器包括： 1、后代选择器：用空格表示。它选择某个元素的所有后代元素。例如，选择所有段落元素内部的 strong 元素可以使用 p strong 选择器。 2、子元素选择器：用>表示。它选择某个元素的直接子元素。例如，选择 ul 元素下的所有 li 元素可以使用 ul > li 选择器。 3、相邻兄弟选择器：用+表
高级选择器
jmz98的博客
05-13 101
定义：选择所有紧接着<div>元素之后的第一个<P>元素。定义：选择所有紧接着<div>元素之后的所有<p>元素。定义：选择匹配具有属性attr的E元素。(3)相邻兄弟选择器。(4)通用兄弟选择器。
高级选择器，盒子模型，CSS样式
m0_73180034的博客
03-31 176
高级选择器，盒子模型，CSS样式
【前端CSS】CSS的3种基本选择器和5种高级选择器使用方式
最新发布
借他一双眼，愿这盛世如先生所愿
03-06 1082
CSS选择器由HTML元素的id、class属性或元素名本身以及一些特殊符号构成；用于指定要为哪个HTML元素定义样式；
css的基本选择器和高级选择器
helongzhi的博客
05-03 1265
css选择器：指定css要作用的标签，即选择哪个容器，更改它的样式 css选择器主要分为两大类：基本选择器和高级选择器 基本选择器： 元素选择器（标签选择器） id选择器 类选择器（class选择器） 通用选择器（通配符） 1.元素选择器：根据标签名来选择指定元素 语法：标签名{} 举例 <style> h1{color:red;} </style> </head> <body> <h1>古
属性选择器
梦寐的博客
08-22 331
    属性选择器 属性选择器            功能描述 E[attr]                选择匹配具有属性attr的E元素 E[attr=val]            选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） E[attr^=val]            选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 E[...
css高级选择器
ZY00000000000000的博客
04-03 65
【代码】css高级选择器。
CSS3 高级应用（过渡、变形、动画）、滤镜、精灵图、字体图标、CSS初始化、及相关技巧等
YuLong的博客
04-29 1629
文章目录CSS3高级应用过渡变形动画多媒体嵌入图像视频音频 CSS3高级应用 在传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。在CSS3中，提供了对动画的强大支持，可以实现旋转、缩放、移动和过渡等效果。 过渡 属性 描述 属性值 transition-property 用于指定过渡效果 ①none ②all ③prpperty（定义多个名称用逗号分隔） transition-duration 用于指定过渡的持续时间 s/ms
CSS:高级选择器
yiXin_Chen的博客
12-22 495
1. 属性选择器 2. 并集选择器 3. 交集选择器 4. 后代选择器 5. 伪类选择器
selenium中css选择器
08-25
Selenium CSS选择器是一种在Selenium中用于定位网页元素的方法。它使用CSS选择器语法，通过指定元素的标签名、类名、id、属性等信息来唯一地定位元素。 在Selenium中使用CSS选择器时，可以通过`By.cssSelector`方法将CSS选择器作为参数传递给`findElement`方法来定位元素。例如，如果要定位一个名为"email"的输入框，可以使用以下CSS选择器：`input.inputtext[name=email]`。 下面是一个使用CSS选择器定位并操作网页元素的示例代码： ```java import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class SeleniumCSSLocators { public static void main(String[] args) { WebDriver driver = new ChromeDriver(); driver.get("https://www.facebook.com/"); driver.findElement(By.cssSelector("input.inputtext[name=email")).sendKeys("journaldev"); } } ``` 这段代码中，通过`By.cssSelector`方法和CSS选择器`input.inputtext[name=email]`定位了一个名为"email"的输入框，并使用`sendKeys`方法往该输入框中输入了"journaldev"。 CSS选择器还支持一些高级的定位方式，例如使用子串匹配来定位元素。通过使用`*=`操作符可以实现子串匹配，可以匹配元素的属性中包含指定字符串的元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [SeleniumCSS选择器](https://blog.csdn.net/cunchi4221/article/details/107472314)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值