:CSS选择器的问题_html/css_WEB-ITnose
在为一个网站写一个通用的CSS,对不同的网页做不同的布局修改。但是网站的HTML不可修改。遇到一个选择器的问题,请教一下各位。
网页中有个类叫做 class1, 这是唯一能识别网页的东西,只出现一次。他的子元素的子元素...(四级)之后有多个并列的元素(有网页内唯一的ID, p0c1,p0c2,...)需要分别做不同的修改。
information
我试了两种方法都有问题:
1、直接使用ID。但这将和网站的其他网页冲突(结构类似,有重复的ID)
2、使用class1 :nth-child(1) :nth-child(3) :nth-child(1) :nth-child(1) 。但是选择器用一个nth-child的时候不仅选了第n个子元素,还选了第n个子元素的子元素,造成冲突。
请问,是否有如下方法:
1、在class1的子孙元素中按ID号选择?
2、如何正确的使用nth-child只选择第n个元素而不牵扯其他后代?
各位如果有其他方法,也敬请告知,多谢!
回复讨论(解决方案)
$('.class1 div div div #p0c1')
第二个问题:
我从你代码copy下来的结构结果用这个也行,可能你给的结构有问题所以和你的(:nth-child(1) :nth-child(3) :nth-child(1) :nth-child(1))有点出入,不是大问题
$('.class1 div:nth-child(1) div:nth-child(1) div:nth-child(2) #p0c1')
试验了下这个方法
nth-child(1)
结果可以总结为:
这个nth-child(n) 是针对所有 有父元素的子元素起作用,当然 如果前面用了.class1 div:nth-child(1) div:nth-child(1) div:nth-child(2) 想后面再加一次过滤:nth-child(1) 就是在那一串的结果里的所有层次的子元素(其实就包含了所有子孙)只要符合就都会成为返回结果
举个例子:
div:nth-child(2)
如果直接用这个来做选择器,那整个HTML里 满足一下几点的所有元素都会成为结果
1. 这个有父元素
2. 这个子元素排行第二,有一个哥哥
3. 这个元素是 div
是的,第二个nth-child的解释我明白了,确实比较头疼。好在第一个好像能用。我晚上有空该好程序后就能确定是不是好用,先谢谢了。
楼主,你先把结构整理好。 区分不同的东西,可以使用id,id是唯一的。
楼主,你先把结构整理好。 区分不同的东西,可以使用id,id是唯一的。
其他网页也有这个ID,只用ID会冲突的。
$('.class1 div div div #p0c1')
基本上解决了问题,周一到公司还要测试一下,但是应该能用。多谢!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-
