반응형
변수 ID 이름을 대상으로 하는 CSS
저는 워드프레스를 사용하고 있고 제 스러그머그 사이트의 슬라이드쇼를 가지고 있습니다.
슬라이드쇼는 숨기고 싶은 쿠키 알림을 보여줍니다..id속성은 첫 번째 문자와 마지막 문자를 제외하고 랜덤입니다(시작은 다음과 같습니다).yui_와 함께_32맨 끝에하지만 이 클래스를 사용하면 쿠키의 표시가 되지 않습니다.클래스는 일정하지만 이 클래스를 사용하면 쿠키 경고의 표시가 변경되지 않습니다.내장된 슬라이드쇼의 일부로 실행되는 동적으로 로드된 자바스크립트도 있습니다.그것이 로컬 CSS의 코드 수정 능력에 차이를 주는지는 모르겠습니다.
HTML:
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_32"> = $0
“ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
<a class"headermessagelink"="" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>
저는 답을 찾기 위해 몇 시간 동안 노력했지만 성공하지 못했습니다.
어떻게 하면 전체를 숨길 수 있을까요?<div>CSS를 이용한 요소?
편집: 내장된 코드가 제공되는 서버에 대한 통제권이 없으며 위의 대부분의 코드는 페이지가 로드될 때 동적으로 생성된다는 것을 언급했어야 합니다.워드프레스 테마의 로컬 CSS와 스러그머그 호스트 갤러리의 테마 CSS만 편집할 수 있습니다(그러나 외부 임베딩에 표시되는 슬라이드쇼에는 영향이 없다고 생각합니다).사이트는 https://light/touch.photography/ 사용자에게 제시된 페이지 코드를 보고 싶다면.
CSS 어프로치
쿠키 통지 클래스가 일치하면 다음을 사용할 수 있습니다.
.sm-eu-cookie-message{
display: none; /* If it is persistent, use the !important flag. */
}
또는 사용하기!important플래그:
.sm-eu-cookie-message{
display: none!important;
}
클래스가 일치하지 않고 속성인 경우id값들은, 당신은 사용할 수 있습니다.^아니면$부분 문자열 일치 특성 선택기.
[attribute^=value]속성이 지정된 값으로 시작하는 모든 요소를 선택합니다.[attribute$=value]속성이 지정된 값으로 끝나는 모든 요소를 선택합니다.
[id^=yui_],
[id^=yui_ i] { /* match attribute values case-insensitively */
color: red;
/*display: none;*/
}
[id$=_32] {
color: blue;
/*display: none;*/
}<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute ends with <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yUI_</em>
</div>더 많은 지면을 덮기 위해, 당신은 또한 사용할 수 있습니다.*부분 문자열 일치 특성 선택기.
[attribute*=value]특성에 지정된 값의 인스턴스가 하나 이상 포함된 모든 요소를 선택합니다.
[id^=yui_],
[id^=yui_ i], /* match attribute values case-insensitively */
[id*=yui_],
[id*=yui_ i]{ /* match attribute values case-insensitively */
color: red;
/*display: none;*/
}
[id$=_32],
[id*=_32]{
color: blue;
/*display: none;*/
}<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute ends with <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yUI_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute containing an instance of <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yUI_</em>
</div>여기 이 셀렉터에 대한 자세한 정보, 출처 W3C.
이 알림은 외부에서 온 것이며, 갑자기 완전히 변경되어 이전 선택기가 쓸모없게 되고 업데이트가 필요하다는 것을 명심해야 합니다.
편집:
JS 어프로치
여기에는 jQuery 라이브러리가 필요합니다.
두 가지 옵션이 있습니다.
- jQuery 다중 선택기를 수동으로 만들어 사용합니다.
- 기능을 사용하여 대신 작업을 수행합니다.
1) 수동으로 jQuery Multiple Selector 만들기:
$(document).ready(function() {
$("[id^=yui_], [id$=_32], [id*=yui_], [id*=_32], [id^=yui_ i], [id$=_32 i], [id*=yui_ i], [id*=_32 i], [id^=yui_][id$=_32], [id^=yui_ i][id$=_32 i]").remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute ends with <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yUI_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute containing an instance of <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yUI_</em>
</div>2. 기능을 사용하여 대신 작업을 수행합니다.
$(document).ready(function() {
// Summary: Removes an element from the DOM by substring matching attribute selectors.
// Params: att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith
function removeByAttSubstring(att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith) {
// Assign string variables for each selector that we want to create
var sBw = att + "^=" + beginsWith,
sEw = att + "$=" + endsWith,
sCbw = att + "*=" + beginsWith,
sCew = att + "*=" + endsWith;
// Create an array of the string selectors
var aSelectors = [sBw, sEw, sCbw, sCew];
// If boolean case insensitive equals true, add those strings as well
if (bCaseInsensitive === true) {
var sBwCi = att + "^=" + beginsWith + " i",
sEwCi = att + "$=" + endsWith + " i",
sCbwCi = att + "*=" + beginsWith + " i",
sCewCi = att + "*=" + endsWith + " i";
aSelectors.push(sBwCi, sEwCi, sCbwCi, sCewCi);
}
// If boolean stack attributes equals true, combine the strings
if (bBeginsAndEndsWith === true) {
var sBwaew = sBw + "][" + sEw;
aSelectors.push(sBwaew);
}
// If booleans case insensitive and stack attributes equals true, combine the case insensitive strings
if (bCaseInsensitive === true && bBeginsAndEndsWith === true) {
var sBwaewCi = sBw + " i][" + sEw + " i";
aSelectors.push(sBwaewCi);
}
// For each string in the array, construct the attribute selector.
for (var i = 0; i < aSelectors.length; i++) {
aSelectors[i] = "[" + aSelectors[i] + "]";
}
// Format the jQuery Multiple Selector
var sSelectors = aSelectors.join(", ");
// Illustration purposes only
console.log("Attribute Selectors: " + sSelectors);
// Remove the elements, if matched, entirely from the DOM
$(sSelectors).remove();
}
// Initialize function
removeByAttSubstring("id", "yui_", "_32", true, true, true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute ends with <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yUI_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute containing an instance of <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yUI_</em>
</div>매개변수:
att- (유형: 문자열)일치시킬 특성.beginsWith- (유형: 문자열)속성 값이 시작하는 값입니다.endsWith- (유형: 문자열)특성 값이 끝나는 값입니다.bContains- (type: boolean) true이면 다음을 사용합니다.*부분 문자열 둘 다에 대해 일치하는 특성 선택기beginsWith그리고.endsWith새 선택기를 생성하여 변수를 바꿉니다(교체하지 않고 새 선택기를 추가합니다).bCaseInsensitive- (type: boolean) true인 경우 대소문자를 구분하지 않는 플래그를 사용하여 새 선택기를 추가합니다.i.bBeginsAndEndsWith- (type: boolean) true이면 속성 선택기를 쌓습니다. (만약에)bCaseInsensitivetrue입니다. 대소문자를 구분하지 않는 스택 선택기를 추가합니다.
예:
removeByAttSubstring("id", "yui_", "_32", true, true, true);
jsFiddle
주의:
- 대소문자를 구분하지 않는 CSS 속성 선택기는 레벨 4이므로, 여기에서 브라우저 지원을 확인할 수 있습니다.더 많은 지면을 다루기 위해 데모에 포함되어 있지만 일부 브라우저에서는 작동하지 않을 수도 있습니다.그래서 환자에 민감한 환자들도 계속 유지하고 있습니다.
멋지고 간단합니다: 스택 속성 선택기.저도 추가했습니다.!important이 HTML이 플러그인에서 나온 것이라면 이미 사용 가능한 CSS가 있을 가능성이 높기 때문입니다.와 함께!important상대방이 훨씬 더 특정한 셀렉터를 사용하지 않는 한, 당신은 당신의 CSS를 사용하도록 강요합니다.!important. 만약 그들이 자바스크립트로 CSS를 재정의한다면 당신은 직접 JS 솔루션에 의존해야 합니다.
div[id^="yui_"][id$="_32"] {
display: none!important;
}<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478235091986_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
<a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_14782349638956_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
<a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
<a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_33">NOT HIDDEN
<a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>언급URL : https://stackoverflow.com/questions/40519850/css-for-targeting-variable-id-name
반응형
'programing' 카테고리의 다른 글
| 문자열의 처음이나 끝에서 공백을 모두 제거하는 방법은 무엇입니까? (0) | 2023.10.22 |
|---|---|
| 'ng'는 내부 또는 외부 명령, 작동 가능한 프로그램 또는 배치 파일로 인식되지 않습니다. (0) | 2023.10.22 |
| SQL을 이용하여 지난 24시간 동안의 레코드를 선택하는 방법은? (0) | 2023.10.22 |
| Oracle Text 인덱스를 동기화하고 최적화하는 방법은 무엇입니까? (0) | 2023.10.22 |
| 저장된 프로시저/기능이 테이블을 반환할 수 있습니까? (0) | 2023.10.22 |